diff --git a/client/plugins/fcc-source-challenges/create-challenge-nodes.js b/client/plugins/fcc-source-challenges/create-challenge-nodes.js index 5abe9b9f6e..e1896062e1 100644 --- a/client/plugins/fcc-source-challenges/create-challenge-nodes.js +++ b/client/plugins/fcc-source-challenges/create-challenge-nodes.js @@ -3,8 +3,14 @@ const crypto = require('crypto'); function createChallengeNode(challenge, reporter) { // challengeType 11 is for video challenges (they only have instructions) // challengeType 7 is for certificates (they only have tests) + + // TODO: either handle empty descriptions inside Gatsby OR ensure that + // description defaults to '' when creating challenges. + // ditto for seeds and instructions. + // create-md should, then, not create empty seed, description or instruction + // sections. if ( - typeof challenge.description[0] !== 'string' && + typeof challenge.description !== 'string' && (challenge.challengeType !== 11 && challenge.challengeType !== 7) ) { reporter.warn(` diff --git a/client/plugins/fcc-source-challenges/gatsby-node.js b/client/plugins/fcc-source-challenges/gatsby-node.js index 9f1ec3a942..0f4c71b68d 100644 --- a/client/plugins/fcc-source-challenges/gatsby-node.js +++ b/client/plugins/fcc-source-challenges/gatsby-node.js @@ -34,7 +34,7 @@ exports.sourceNodes = function sourceChallengesSourceNodes( }); watcher.on('change', filePath => - /\.md$/.test(filePath) + /\.md?$/.test(filePath) ? onSourceChange(filePath) .then(challenge => { reporter.info( @@ -61,13 +61,14 @@ File changed at ${filePath}, replacing challengeNode id ${challenge.id} .then(challenges => challenges.map(challenge => createVisibleChallenge(challenge)) ) - .catch(e => + .catch(e => { + console.log(e); reporter.panic(`fcc-source-challenges ${e.message} - `) - ); + `); + }); } function createVisibleChallenge(challenge) { diff --git a/client/src/templates/Challenges/components/Challenge-Description.js b/client/src/templates/Challenges/components/Challenge-Description.js index ad6fcfd819..65a7bb9820 100644 --- a/client/src/templates/Challenges/components/Challenge-Description.js +++ b/client/src/templates/Challenges/components/Challenge-Description.js @@ -12,8 +12,8 @@ const propTypes = { function ChallengeDescription({ description, instructions, section }) { return ( -
- +
+ {description && } {instructions && (
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md index cadea225d1..eef444d35c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md @@ -6,53 +6,38 @@ videoUrl: 'https://scrimba.com/c/cPp7VfD' forumTopicId: 16628 --- -## Description -
-It's likely that you've seen an alt attribute on an img tag in other challenges. Alt text describes the content of the image and provides a text-alternative for it. This helps in cases where the image fails to load or can't be seen by a user. It's also used by search engines to understand what an image contains to include it in search results. Here's an example: -<img src="importantLogo.jpeg" alt="Company logo"> -People with visual impairments rely on screen readers to convert web content to an audio interface. They won't get information if it's only presented visually. For images, screen readers can access the alt attribute and read its contents to deliver key information. -Good alt text provides the reader a brief description of the image. You should always include an alt attribute on your image. Per HTML5 specification, this is now considered mandatory. -
+# --description-- -## Instructions -
+It's likely that you've seen an `alt` attribute on an `img` tag in other challenges. `Alt` text describes the content of the image and provides a text-alternative for it. This helps in cases where the image fails to load or can't be seen by a user. It's also used by search engines to understand what an image contains to include it in search results. Here's an example: -Camper Cat happens to be both a coding ninja and an actual ninja, who is building a website to share his knowledge. The profile picture he wants to use shows his skills and should be appreciated by all site visitors. Add an alt attribute in the img tag, that explains Camper Cat is doing karate. (The image src doesn't link to an actual file, so you should see the alt text in the display.) +`Company logo` -
+People with visual impairments rely on screen readers to convert web content to an audio interface. They won't get information if it's only presented visually. For images, screen readers can access the `alt` attribute and read its contents to deliver key information. -## Tests -
+Good `alt` text provides the reader a brief description of the image. You should always include an `alt` attribute on your image. Per HTML5 specification, this is now considered mandatory. -```yml -tests: - - text: Your img tag should have an alt attribute and it should not be empty. - testString: assert($('img').attr('alt')); +# --instructions-- +Camper Cat happens to be both a coding ninja and an actual ninja, who is building a website to share his knowledge. The profile picture he wants to use shows his skills and should be appreciated by all site visitors. Add an `alt` attribute in the `img` tag, that explains Camper Cat is doing karate. (The image `src` doesn't link to an actual file, so you should see the `alt` text in the display.) + +# --hints-- + +Your `img` tag should have an `alt` attribute and it should not be empty. + +```js +assert($('img').attr('alt')); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` -
- - - -
- -## Solution -
+# --solutions-- ```html Someone doing karate ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md index 16be4f16f2..811ca073a1 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md @@ -6,11 +6,14 @@ videoUrl: 'https://scrimba.com/c/cR3bRbCV' forumTopicId: 301008 --- -## Description -
-Forms often include the input field, which can be used to create several different form controls. The type attribute on this element indicates what kind of input will be created. -You may have noticed the text and submit input types in prior challenges, and HTML5 introduced an option to specify a date field. Depending on browser support, a date picker shows up in the input field when it's in focus, which makes filling in a form easier for all users. -For older browsers, the type will default to text, so it helps to show users the expected date format in the label or as placeholder text just in case. +# --description-- + +Forms often include the `input` field, which can be used to create several different form controls. The `type` attribute on this element indicates what kind of input will be created. + +You may have noticed the `text` and `submit` input types in prior challenges, and HTML5 introduced an option to specify a `date` field. Depending on browser support, a date picker shows up in the `input` field when it's in focus, which makes filling in a form easier for all users. + +For older browsers, the type will default to `text`, so it helps to show users the expected date format in the label or as placeholder text just in case. + Here's an example: ```html @@ -18,35 +21,39 @@ Here's an example: ``` -
+# --instructions-- -## Instructions -
-Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competitors to see what date works best. Add an input tag with a type attribute of "date", an id attribute of "pickdate", and a name attribute of "date". -
+Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competitors to see what date works best. Add an `input` tag with a `type` attribute of "date", an `id` attribute of "pickdate", and a `name` attribute of "date". -## Tests -
+# --hints-- -```yml -tests: - - text: Your code should add one input tag for the date selector field. - testString: assert($('input').length == 2); - - text: Your input tag should have a type attribute with a value of date. - testString: assert($('input').attr('type') == 'date'); - - text: Your input tag should have an id attribute with a value of pickdate. - testString: assert($('input').attr('id') == 'pickdate'); - - text: Your input tag should have a name attribute with a value of date. - testString: assert($('input').attr('name') == 'date'); +Your code should add one `input` tag for the date selector field. +```js +assert($('input').length == 2); ``` -
+Your `input` tag should have a `type` attribute with a value of date. -## Challenge Seed -
+```js +assert($('input').attr('type') == 'date'); +``` -
+Your `input` tag should have an `id` attribute with a value of pickdate. + +```js +assert($('input').attr('id') == 'pickdate'); +``` + +Your `input` tag should have a `name` attribute with a value of date. + +```js +assert($('input').attr('name') == 'date'); +``` + +# --seed-- + +## --seed-contents-- ```html @@ -74,14 +81,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -102,5 +102,3 @@ tests:
© 2018 Camper Cat
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md index 3635c31af8..5c76bfe858 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md @@ -1,39 +1,36 @@ --- id: 587d778f367417b2b2512aad -title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information +title: >- + Avoid Colorblindness Issues by Carefully Choosing Colors that Convey + Information challengeType: 0 videoUrl: 'https://scrimba.com/c/c437as3' forumTopicId: 301011 --- -## Description -
+# --description-- + There are various forms of colorblindness. These can range from a reduced sensitivity to a certain wavelength of light to the inability to see color at all. The most common form is a reduced sensitivity to detect greens. + For example, if two similar green colors are the foreground and background color of your content, a colorblind user may not be able to distinguish them. Close colors can be thought of as neighbors on the color wheel, and those combinations should be avoided when conveying important information. -Note: Some online color picking tools include visual simulations of how colors appear for different types of colorblindness. These are great resources in addition to online contrast checking calculators. -
-## Instructions -
-Camper Cat is testing different styles for an important button, but the yellow (#FFFF33) background-color and the green (#33FF33) text color are neighboring hues on the color wheel and virtually indistinguishable for some colorblind users. (Their similar lightness also fails the contrast ratio check). Change the text color to a dark blue (#003366) to solve both problems. -
+**Note:** Some online color picking tools include visual simulations of how colors appear for different types of colorblindness. These are great resources in addition to online contrast checking calculators. -## Tests -
+# --instructions-- -```yml -tests: - - text: Your code should change the text color for the button to the dark blue. - testString: assert($('button').css('color') == 'rgb(0, 51, 102)'); +Camper Cat is testing different styles for an important button, but the yellow (`#FFFF33`) `background-color` and the green (`#33FF33`) text `color` are neighboring hues on the color wheel and virtually indistinguishable for some colorblind users. (Their similar lightness also fails the contrast ratio check). Change the text `color` to a dark blue (`#003366`) to solve both problems. +# --hints-- + +Your code should change the text `color` for the `button` to the dark blue. + +```js +assert($('button').css('color') == 'rgb(0, 51, 102)'); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -54,14 +51,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -81,5 +71,3 @@ tests: ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md index dbed30c7e7..a0512ae9bf 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md @@ -6,37 +6,37 @@ videoUrl: 'https://scrimba.com/c/cmzMEUw' forumTopicId: 301012 --- -## Description -
+# --description-- + Color is a large part of visual design, but its use introduces two accessibility issues. First, color alone should not be used as the only way to convey important information because screen reader users won't see it. Second, foreground and background colors need sufficient contrast so colorblind users can distinguish them. + Previous challenges covered having text alternatives to address the first issue. The last challenge introduced contrast checking tools to help with the second. The WCAG-recommended contrast ratio of 4.5:1 applies for color use as well as gray-scale combinations. + Colorblind users have trouble distinguishing some colors from others - usually in hue but sometimes lightness as well. You may recall the contrast ratio is calculated using the relative luminance (or lightness) values of the foreground and background colors. + In practice, the 4.5:1 contrast ratio can be reached by shading (adding black to) the darker color and tinting (adding white to) the lighter color. Darker shades on the color wheel are considered to be shades of blues, violets, magentas, and reds, whereas lighter tinted colors are oranges, yellows, greens, and blue-greens. -
-## Instructions -
-Camper Cat is experimenting with using color for his blog text and background, but his current combination of a greenish background-color with maroon text color has a 2.5:1 contrast ratio. You can easily adjust the lightness of the colors since he declared them using the CSS hsl() property (which stands for hue, saturation, lightness) by changing the third argument. Increase the background-color lightness value from 35% to 55%, and decrease the color lightness value from 20% to 15%. This improves the contrast to 5.9:1. -
+# --instructions-- -## Tests -
+Camper Cat is experimenting with using color for his blog text and background, but his current combination of a greenish `background-color` with maroon text `color` has a 2.5:1 contrast ratio. You can easily adjust the lightness of the colors since he declared them using the CSS `hsl()` property (which stands for hue, saturation, lightness) by changing the third argument. Increase the `background-color` lightness value from 35% to 55%, and decrease the `color` lightness value from 20% to 15%. This improves the contrast to 5.9:1. -```yml -tests: - - text: Your code should only change the lightness value for the text color property to a value of 15%. - testString: assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi)); - - text: Your code should only change the lightness value for the background-color property to a value of 55%. - testString: assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi)); +# --hints-- +Your code should only change the lightness value for the text `color` property to a value of 15%. + +```js +assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi)); ``` -
+Your code should only change the lightness value for the `background-color` property to a value of 55%. -## Challenge Seed -
+```js +assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi)); +``` -
+# --seed-- + +## --seed-contents-- ```html @@ -59,15 +59,7 @@ tests: ``` -
- - - -
- -## Solution -
- +# --solutions-- ```html @@ -89,5 +81,3 @@ tests: ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md index 46187a4297..207f83f49c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md @@ -6,37 +6,46 @@ videoUrl: 'https://scrimba.com/c/c437DcV' forumTopicId: 301013 --- -## Description -
+# --description-- + Screen reader users have different options for what type of content their device reads. This includes skipping to (or over) landmark elements, jumping to the main content, or getting a page summary from the headings. Another option is to only hear the links available on a page. -Screen readers do this by reading the link text, or what's between the anchor (a) tags. Having a list of "click here" or "read more" links isn't helpful. Instead, you should use brief but descriptive text within the a tags to provide more meaning for these users. -
-## Instructions -
-The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (a) tags so they wrap around the text "information about batteries" instead of "Click here". -
+Screen readers do this by reading the link text, or what's between the anchor (`a`) tags. Having a list of "click here" or "read more" links isn't helpful. Instead, you should use brief but descriptive text within the `a` tags to provide more meaning for these users. -## Tests -
+# --instructions-- -```yml -tests: - - text: Your code should move the anchor a tags from around the words "Click here" to wrap around the words "information about batteries". - testString: assert($('a').text().match(/^(information about batteries)$/g)); - - text: The a element should have an href attribute with a value of an empty string "". - testString: assert($('a').attr('href') === ''); - - text: The a element should have a closing tag. - testString: assert(code.match(/<\/a>/g) && code.match(/<\/a>/g).length === code.match(//g).length); +The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (`a`) tags so they wrap around the text "information about batteries" instead of "Click here". +# --hints-- + +Your code should move the anchor `a` tags from around the words "Click here" to wrap around the words "information about batteries". + +```js +assert( + $('a') + .text() + .match(/^(information about batteries)$/g) +); ``` -
+The `a` element should have an `href` attribute with a value of an empty string `""`. -## Challenge Seed -
+```js +assert($('a').attr('href') === ''); +``` - - - - -
- -## Solution -
+# --solutions-- ```html @@ -70,5 +72,3 @@ tests: ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md index fce22783b8..1adcef881a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md @@ -6,10 +6,12 @@ videoUrl: 'https://scrimba.com/c/cVJVkcZ' forumTopicId: 301014 --- -## Description -
-HTML5's audio element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript. -The audio tag supports the controls attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, its presence on the tag turns the setting on. +# --description-- + +HTML5's `audio` element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript. + +The `audio` tag supports the `controls` attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, its presence on the tag turns the setting on. + Here's an example: ```html @@ -19,43 +21,67 @@ Here's an example: ``` -Note: Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them. -
+**Note:** Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them. -## Instructions -
-Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an audio element after the p. Include the controls attribute. Then place a source tag inside the audio tags with the src attribute set to "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" and type attribute set to "audio/mpeg". -Note: The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users. -
+# --instructions-- -## Tests -
+Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an `audio` element after the `p`. Include the `controls` attribute. Then place a `source` tag inside the `audio` tags with the `src` attribute set to "`https://s3.amazonaws.com/freecodecamp/screen-reader.mp3`" and `type` attribute set to "audio/mpeg". -```yml -tests: - - text: Your code should have one audio tag. - testString: assert($('audio').length === 1); - - text: Your audio element should have a closing tag. - testString: assert(code.match(/<\/audio>/g).length === 1 && code.match(/[\s\S]*<\/audio>/g)); - - text: The audio tag should have the controls attribute. - testString: assert($('audio').attr('controls')); - - text: Your code should have one source tag. - testString: assert($('source').length === 1); - - text: Your source tag should be inside the audio tags. - testString: assert($('audio').children('source').length === 1); - - text: The value for the src attribute on the source tag should match the link in the instructions exactly. - testString: assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'); - - text: Your code should include a type attribute on the source tag with a value of audio/mpeg. - testString: assert($('source').attr('type') === 'audio/mpeg'); +**Note:** The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users. +# --hints-- + +Your code should have one `audio` tag. + +```js +assert($('audio').length === 1); ``` -
+Your `audio` element should have a closing tag. -## Challenge Seed -
+```js +assert( + code.match(/<\/audio>/g).length === 1 && + code.match(/[\s\S]*<\/audio>/g) +); +``` -
+The `audio` tag should have the `controls` attribute. + +```js +assert($('audio').attr('controls')); +``` + +Your code should have one `source` tag. + +```js +assert($('source').length === 1); +``` + +Your `source` tag should be inside the `audio` tags. + +```js +assert($('audio').children('source').length === 1); +``` + +The value for the `src` attribute on the `source` tag should match the link in the instructions exactly. + +```js +assert( + $('source').attr('src') === + 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3' +); +``` + +Your code should include a `type` attribute on the `source` tag with a value of audio/mpeg. + +```js +assert($('source').attr('type') === 'audio/mpeg'); +``` + +# --seed-- + +## --seed-contents-- ```html @@ -71,14 +97,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -93,5 +112,3 @@ tests: ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md index 31dec12039..a3c6347b8c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md @@ -6,11 +6,13 @@ videoUrl: 'https://scrimba.com/c/cGJMqtE' forumTopicId: 301015 --- -## Description -
-HTML5 introduced the figure element, along with the related figcaption. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the figure. +# --description-- + +HTML5 introduced the `figure` element, along with the related `figcaption`. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the `figure`. + For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users. -Here's an example - note that the figcaption goes inside the figure tags and can be combined with other elements: + +Here's an example - note that the `figcaption` goes inside the `figure` tags and can be combined with other elements: ```html
@@ -22,39 +24,54 @@ Here's an example - note that the figcaption goes inside the
``` -
+# --instructions-- -## Instructions -
-Camper Cat is hard at work creating a stacked bar chart showing the amount of time per week to spend training in stealth, combat, and weapons. Help him structure his page better by changing the div tag he used to a figure tag, and the p tag that surrounds the caption to a figcaption tag. -
+Camper Cat is hard at work creating a stacked bar chart showing the amount of time per week to spend training in stealth, combat, and weapons. Help him structure his page better by changing the `div` tag he used to a `figure` tag, and the `p` tag that surrounds the caption to a `figcaption` tag. -## Tests -
+# --hints-- -```yml -tests: - - text: Your code should have one figure tag. - testString: assert($('figure').length == 1); - - text: Your code should have one figcaption tag. - testString: assert($('figcaption').length == 1); - - text: Your code should not have any div tags. - testString: assert($('div').length == 0); - - text: Your code should not have any p tags. - testString: assert($('p').length == 0); - - text: The figcaption should be a child of the figure tag. - testString: assert($('figure').children('figcaption').length == 1); - - text: Your figure element should have a closing tag. - testString: assert(code.match(/<\/figure>/g) && code.match(/<\/figure>/g).length === code.match(/
/g).length); +Your code should have one `figure` tag. +```js +assert($('figure').length == 1); ``` -
+Your code should have one `figcaption` tag. -## Challenge Seed -
+```js +assert($('figcaption').length == 1); +``` -
+Your code should not have any `div` tags. + +```js +assert($('div').length == 0); +``` + +Your code should not have any `p` tags. + +```js +assert($('p').length == 0); +``` + +The `figcaption` should be a child of the `figure` tag. + +```js +assert($('figure').children('figcaption').length == 1); +``` + +Your `figure` element should have a closing tag. + +```js +assert( + code.match(/<\/figure>/g) && + code.match(/<\/figure>/g).length === code.match(/
/g).length +); +``` + +# --seed-- + +## --seed-contents-- ```html @@ -100,14 +117,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -148,5 +158,3 @@ tests:
© 2018 Camper Cat
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md index 895ae65a04..5a10645b57 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md @@ -6,12 +6,15 @@ videoUrl: 'https://scrimba.com/c/cGJMMAN' forumTopicId: 301016 --- -## Description -
+# --description-- + Improving accessibility with semantic HTML markup applies to using both appropriate tag names as well as attributes. The next several challenges cover some important scenarios using attributes in forms. -The label tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The for attribute on a label tag explicitly associates that label with the form control and is used by screen readers. -You learned about radio buttons and their labels in a lesson in the Basic HTML section. In that lesson, we wrapped the radio button input element inside a label element along with the label text in order to make the text clickable. Another way to achieve this is by using the for attribute as explained in this lesson. -The value of the for attribute must be the same as the value of the id attribute of the form control. Here's an example: + +The `label` tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The `for` attribute on a `label` tag explicitly associates that `label` with the form control and is used by screen readers. + +You learned about radio buttons and their labels in a lesson in the Basic HTML section. In that lesson, we wrapped the radio button input element inside a `label` element along with the label text in order to make the text clickable. Another way to achieve this is by using the `for` attribute as explained in this lesson. + +The value of the `for` attribute must be the same as the value of the `id` attribute of the form control. Here's an example: ```html
@@ -20,31 +23,27 @@ The value of the for attribute must be the same as the value of the
``` -
+# --instructions-- -## Instructions -
-Camper Cat expects a lot of interest in his thoughtful blog posts and wants to include an email sign up form. Add a for attribute on the email label that matches the id on its input field. -
+Camper Cat expects a lot of interest in his thoughtful blog posts and wants to include an email sign up form. Add a `for` attribute on the email `label` that matches the `id` on its `input` field. -## Tests -
+# --hints-- -```yml -tests: - - text: Your code should have a for attribute on the label tag that is not empty. - testString: assert($('label').attr('for')); - - text: Your for attribute value should match the id value on the email input. - testString: assert($('label').attr('for') == 'email'); +Your code should have a `for` attribute on the `label` tag that is not empty. +```js +assert($('label').attr('for')); ``` -
+Your `for` attribute value should match the `id` value on the email `input`. -## Challenge Seed -
+```js +assert($('label').attr('for') == 'email'); +``` -
+# --seed-- + +## --seed-contents-- ```html @@ -81,14 +80,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -124,5 +116,3 @@ tests:
© 2018 Camper Cat
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md index 52459961e3..6d412efb98 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md @@ -6,35 +6,33 @@ videoUrl: 'https://scrimba.com/c/cKb3nCq' forumTopicId: 301017 --- -## Description -
+# --description-- + Low contrast between the foreground and background colors can make text difficult to read. Sufficient contrast improves the readability of your content, but what exactly does "sufficient" mean? + The Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 contrast ratio for normal text. The ratio is calculated by comparing the relative luminance values of two colors. This ranges from 1:1 for the same color, or no contrast, to 21:1 for white against black, the strongest contrast. There are many contrast checking tools available online that calculate this ratio for you. -
-## Instructions -
-Camper Cat's choice of light gray text on a white background for his recent blog post has a 1.5:1 contrast ratio, making it hard to read. Change the color of the text from the current gray (#D3D3D3) to a darker gray (#636363) to improve the contrast ratio to 6:1. -
+# --instructions-- -## Tests -
+Camper Cat's choice of light gray text on a white background for his recent blog post has a 1.5:1 contrast ratio, making it hard to read. Change the `color` of the text from the current gray (`#D3D3D3`) to a darker gray (`#636363`) to improve the contrast ratio to 6:1. -```yml -tests: - - text: Your code should change the text color for the body to the darker gray. - testString: assert($('body').css('color') == 'rgb(99, 99, 99)'); - - text: Your code should not change the background-color for the body. - testString: assert($('body').css('background-color') == 'rgb(255, 255, 255)'); +# --hints-- +Your code should change the text `color` for the `body` to the darker gray. + +```js +assert($('body').css('color') == 'rgb(99, 99, 99)'); ``` -
+Your code should not change the `background-color` for the `body`. -## Challenge Seed -
+```js +assert($('body').css('background-color') == 'rgb(255, 255, 255)'); +``` -
+# --seed-- + +## --seed-contents-- ```html @@ -57,14 +55,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -86,5 +77,3 @@ tests: ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md index 5438dd2f88..58d5656a18 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md @@ -6,37 +6,37 @@ videoUrl: 'https://scrimba.com/c/cPp7zuE' forumTopicId: 301018 --- -## Description -
-HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include main, header, footer, nav, article, and section, among others. -By default, a browser renders these elements similarly to the humble div. However, using them where appropriate gives additional meaning in your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users. -The main element is used to wrap (you guessed it) the main content, and there should be only one per page. It's meant to surround the information that's related to the central topic of your page. It's not meant to include items that repeat across pages, like navigation links or banners. -The main tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you've ever seen a "Jump to Main Content" link at the top of a page, using a main tag automatically gives assistive devices that functionality. -
+# --description-- -## Instructions -
-Camper Cat has some big ideas for his ninja weapons page. Help him set up his markup by adding opening and closing main tags between the header and footer (covered in other challenges). Keep the main tags empty for now. -
+HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include `main`, `header`, `footer`, `nav`, `article`, and `section`, among others. -## Tests -
+By default, a browser renders these elements similarly to the humble `div`. However, using them where appropriate gives additional meaning in your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users. -```yml -tests: - - text: Your code should have one main tag. - testString: assert($('main').length == 1); - - text: The main tags should be between the closing header tag and the opening footer tag. - testString: assert(code.match(/<\/header>\s*?
\s*?<\/main>/gi)); +The `main` element is used to wrap (you guessed it) the main content, and there should be only one per page. It's meant to surround the information that's related to the central topic of your page. It's not meant to include items that repeat across pages, like navigation links or banners. +The `main` tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you've ever seen a "Jump to Main Content" link at the top of a page, using a main tag automatically gives assistive devices that functionality. + +# --instructions-- + +Camper Cat has some big ideas for his ninja weapons page. Help him set up his markup by adding opening and closing `main` tags between the `header` and `footer` (covered in other challenges). Keep the `main` tags empty for now. + +# --hints-- + +Your code should have one `main` tag. + +```js +assert($('main').length == 1); ``` -
+The `main` tags should be between the closing `header` tag and the opening `footer` tag. -## Challenge Seed -
+```js +assert(code.match(/<\/header>\s*?
\s*?<\/main>/gi)); +``` -
+# --seed-- + +## --seed-contents-- ```html
@@ -48,14 +48,7 @@ tests:
``` -
- - - -
- -## Solution -
+# --solutions-- ```html
@@ -66,5 +59,3 @@ tests:
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md index 45983d0e9d..f4d539b515 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md @@ -6,38 +6,39 @@ videoUrl: 'https://scrimba.com/c/cM9P4t2' forumTopicId: 301019 --- -## Description -
-In the last challenge, you learned that including an alt attribute when using img tags is mandatory. However, sometimes images are grouped with a caption already describing them, or are used for decoration only. In these cases alt text may seem redundant or unnecessary. -In situations when an image is already explained with text content, or does not add meaning to a page, the img still needs an alt attribute, but it can be set to an empty string. Here's an example: -<img src="visualDecoration.jpeg" alt=""> +# --description-- + +In the last challenge, you learned that including an `alt` attribute when using `img` tags is mandatory. However, sometimes images are grouped with a caption already describing them, or are used for decoration only. In these cases `alt` text may seem redundant or unnecessary. + +In situations when an image is already explained with text content, or does not add meaning to a page, the `img` still needs an `alt` attribute, but it can be set to an empty string. Here's an example: + +`` + Background images usually fall under the 'decorative' label as well. However, they are typically applied with CSS rules, and therefore not part of the markup screen readers process. -Note: For images with a caption, you may still want to include alt text, since it helps search engines catalog the content of the image. -
-## Instructions -
-Camper Cat has coded a skeleton page for the blog part of his website. He's planning to add a visual break between his two articles with a decorative image of a samurai sword. Add an alt attribute to the img tag and set it to an empty string. (Note that the image src doesn't link to an actual file - don't worry that there are no swords showing in the display.) -
+**Note:** For images with a caption, you may still want to include `alt` text, since it helps search engines catalog the content of the image. -## Tests -
+# --instructions-- -```yml -tests: - - text: Your img tag should have an alt attribute. - testString: assert(!($('img').attr('alt') == undefined)); - - text: The alt attribute should be set to an empty string. - testString: assert($('img').attr('alt') == ''); +Camper Cat has coded a skeleton page for the blog part of his website. He's planning to add a visual break between his two articles with a decorative image of a samurai sword. Add an `alt` attribute to the `img` tag and set it to an empty string. (Note that the image `src` doesn't link to an actual file - don't worry that there are no swords showing in the display.) +# --hints-- + +Your `img` tag should have an `alt` attribute. + +```js +assert(!($('img').attr('alt') == undefined)); ``` -
+The `alt` attribute should be set to an empty string. -## Challenge Seed -
+```js +assert($('img').attr('alt') == ''); +``` -
+# --seed-- + +## --seed-contents-- ```html

Deep Thoughts with Master Camper Cat

@@ -54,14 +55,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html

Deep Thoughts with Master Camper Cat

@@ -77,5 +71,3 @@ tests:

To Come...

``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md index ce899c3abe..8fc9ee5c5a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md @@ -6,10 +6,12 @@ videoUrl: 'https://scrimba.com/c/cJ8QGkhJ' forumTopicId: 301020 --- -## Description -
+# --description-- + Have you noticed that all of the applied accessibility challenges so far haven't used any CSS? This is to show the importance of a logical document outline, and using semantically meaningful tags around your content before introducing the visual design aspect. + However, CSS's magic can also improve accessibility on your page when you want to visually hide content meant only for screen readers. This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data. CSS is used to position the screen reader-only elements off the visual area of the browser window. + Here's an example of the CSS rules that accomplish this: ```css @@ -23,40 +25,46 @@ Here's an example of the CSS rules that accomplish this: } ``` -Note: The following CSS approaches will NOT do the same thing: +**Note:** The following CSS approaches will NOT do the same thing: +
  • display: none; or visibility: hidden; hides content for everyone, including screen reader users
  • Zero values for pixel sizes, such as width: 0px; height: 0px; removes that element from the flow of your document, meaning screen readers will ignore it
-
-## Instructions -
-Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an sr-only class, but the CSS rules aren't filled in yet. Give the position an absolute value, the left a -10000px value, and the width and height both 1px values. -
+# --instructions-- -## Tests -
+Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an `sr-only` class, but the CSS rules aren't filled in yet. Give the `position` an absolute value, the `left` a -10000px value, and the `width` and `height` both 1px values. -```yml -tests: - - text: Your code should set the position property of the sr-only class to a value of absolute. - testString: assert($('.sr-only').css('position') == 'absolute'); - - text: Your code should set the left property of the sr-only class to a value of -10000px. - testString: assert($('.sr-only').css('left') == '-10000px'); - - text: Your code should set the width property of the sr-only class to a value of 1 pixel. - testString: assert(code.match(/width:\s*?1px/gi)); - - text: Your code should set the height property of the sr-only class to a value of 1 pixel. - testString: assert(code.match(/height:\s*?1px/gi)); +# --hints-- +Your code should set the `position` property of the `sr-only` class to a value of absolute. + +```js +assert($('.sr-only').css('position') == 'absolute'); ``` -
+Your code should set the `left` property of the `sr-only` class to a value of -10000px. -## Challenge Seed -
+```js +assert($('.sr-only').css('left') == '-10000px'); +``` -
+Your code should set the `width` property of the `sr-only` class to a value of 1 pixel. + +```js +assert(code.match(/width:\s*?1px/gi)); +``` + +Your code should set the `height` property of the `sr-only` class to a value of 1 pixel. + +```js +assert(code.match(/height:\s*?1px/gi)); +``` + +# --seed-- + +## --seed-contents-- ```html @@ -145,14 +153,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -240,5 +241,3 @@ tests:
© 2018 Camper Cat
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md index ba4f2fb881..107cd15378 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md @@ -6,41 +6,49 @@ videoUrl: 'https://scrimba.com/c/cQvmaTp' forumTopicId: 301021 --- -## Description -
-HTML offers the accesskey attribute to specify a shortcut key to activate or bring focus to an element. This can make navigation more efficient for keyboard-only users. +# --description-- + +HTML offers the `accesskey` attribute to specify a shortcut key to activate or bring focus to an element. This can make navigation more efficient for keyboard-only users. + HTML5 allows this attribute to be used on any element, but it's particularly useful when it's used with interactive ones. This includes links, buttons, and form controls. + Here's an example: -<button accesskey="b">Important Button</button> -
-## Instructions -
-Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an accesskey attribute to both links and set the first one to "g" (for Garfield) and the second one to "c" (for Chuck Norris). -
+`` -## Tests -
+# --instructions-- -```yml -tests: - - text: Your code should add an accesskey attribute to the a tag with the id of "first". - testString: assert($('#first').attr('accesskey')); - - text: Your code should add an accesskey attribute to the a tag with the id of "second". - testString: assert($('#second').attr('accesskey')); - - text: Your code should set the accesskey attribute on the a tag with the id of "first" to "g". Note that case matters. - testString: assert($('#first').attr('accesskey') == 'g'); - - text: Your code should set the accesskey attribute on the a tag with the id of "second" to "c". Note that case matters. - testString: assert($('#second').attr('accesskey') == 'c'); +Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an `accesskey` attribute to both links and set the first one to "g" (for Garfield) and the second one to "c" (for Chuck Norris). +# --hints-- + +Your code should add an `accesskey` attribute to the `a` tag with the `id` of "first". + +```js +assert($('#first').attr('accesskey')); ``` -
+Your code should add an `accesskey` attribute to the `a` tag with the `id` of "second". -## Challenge Seed -
+```js +assert($('#second').attr('accesskey')); +``` -
+Your code should set the `accesskey` attribute on the `a` tag with the `id` of "first" to "g". Note that case matters. + +```js +assert($('#first').attr('accesskey') == 'g'); +``` + +Your code should set the `accesskey` attribute on the `a` tag with the `id` of "second" to "c". Note that case matters. + +```js +assert($('#second').attr('accesskey') == 'c'); +``` + +# --seed-- + +## --seed-contents-- ```html @@ -67,14 +75,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -100,5 +101,3 @@ tests:
© 2018 Camper Cat
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md index 4dad3c6498..caf359a82c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md @@ -6,36 +6,37 @@ videoUrl: 'https://scrimba.com/c/crVrDh8' forumTopicId: 301022 --- -## Description -
-Similar to header and nav, the footer element has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page. -
+# --description-- -## Instructions -
-Camper Cat's training page is making good progress. Change the div he used to wrap his copyright information at the bottom of the page to a footer element. -
+Similar to `header` and `nav`, the `footer` element has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page. -## Tests -
+# --instructions-- -```yml -tests: - - text: Your code should have one footer tag. - testString: assert($('footer').length == 1); - - text: Your code should not have any div tags. - testString: assert($('div').length == 0); - - text: Your code should have an opening and closing footer tag. - testString: assert(code.match(/
\s*© 2018 Camper Cat\s*<\/footer>/g)); +Camper Cat's training page is making good progress. Change the `div` he used to wrap his copyright information at the bottom of the page to a `footer` element. +# --hints-- + +Your code should have one `footer` tag. + +```js +assert($('footer').length == 1); ``` -
+Your code should not have any `div` tags. -## Challenge Seed -
+```js +assert($('div').length == 0); +``` -
+Your code should have an opening and closing `footer` tag. + +```js +assert(code.match(/
\s*© 2018 Camper Cat\s*<\/footer>/g)); +``` + +# --seed-- + +## --seed-contents-- ```html @@ -74,14 +75,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -119,5 +113,3 @@ tests: ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md index 18bc8de59d..1cf400a538 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md @@ -6,40 +6,50 @@ videoUrl: 'https://scrimba.com/c/cB76vtv' forumTopicId: 301023 --- -## Description -
-The next HTML5 element that adds semantic meaning and improves accessibility is the header tag. It's used to wrap introductory information or navigation links for its parent tag and works well around content that's repeated at the top on multiple pages. -header shares the embedded landmark feature you saw with main, allowing assistive technologies to quickly navigate to that content. -Note: The header is meant for use in the body tag of your HTML document. This is different than the head element, which contains the page's title, meta information, etc. -
+# --description-- -## Instructions -
-Camper Cat is writing some great articles about ninja training, and wants to add a page for them to his site. Change the top div that currently contains the h1 to a header tag instead. -
+The next HTML5 element that adds semantic meaning and improves accessibility is the `header` tag. It's used to wrap introductory information or navigation links for its parent tag and works well around content that's repeated at the top on multiple pages. -## Tests -
+`header` shares the embedded landmark feature you saw with `main`, allowing assistive technologies to quickly navigate to that content. -```yml -tests: - - text: Your code should have one header tag. - testString: assert($('header').length == 1); - - text: Your header tags should wrap around the h1. - testString: assert($('header').children('h1').length == 1); - - text: Your code should not have any div tags. - testString: assert($('div').length == 0); - - text: Your header element should have a closing tag. - testString: assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/
/g).length); +**Note:** The `header` is meant for use in the `body` tag of your HTML document. This is different than the `head` element, which contains the page's title, meta information, etc. +# --instructions-- + +Camper Cat is writing some great articles about ninja training, and wants to add a page for them to his site. Change the top `div` that currently contains the `h1` to a `header` tag instead. + +# --hints-- + +Your code should have one `header` tag. + +```js +assert($('header').length == 1); ``` -
+Your `header` tags should wrap around the `h1`. -## Challenge Seed -
+```js +assert($('header').children('h1').length == 1); +``` -
+Your code should not have any `div` tags. + +```js +assert($('div').length == 0); +``` + +Your `header` element should have a closing tag. + +```js +assert( + code.match(/<\/header>/g) && + code.match(/<\/header>/g).length === code.match(/
/g).length +); +``` + +# --seed-- + +## --seed-contents-- ```html @@ -69,14 +79,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -105,5 +108,3 @@ tests: ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md index d99b3a1629..4439594373 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md @@ -6,39 +6,48 @@ videoUrl: 'https://scrimba.com/c/czVwWSv' forumTopicId: 301024 --- -## Description -
-The nav element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page. -If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a nav tag as well. Using a footer (covered in the next challenge) is sufficient. -
+# --description-- -## Instructions -
-Camper Cat included navigation links at the top of his training page, but wrapped them in a div. Change the div to a nav tag to improve the accessibility on his page. -
+The `nav` element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page. -## Tests -
+If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a `nav` tag as well. Using a `footer` (covered in the next challenge) is sufficient. -```yml -tests: - - text: Your code should have one nav tag. - testString: assert($('nav').length == 1); - - text: Your nav tags should wrap around the ul and its list items. - testString: assert($('nav').children('ul').length == 1); - - text: Your code should not have any div tags. - testString: assert($('div').length == 0); - - text: Your nav element should have a closing tag. - testString: assert(code.match(/<\/nav>/g) && code.match(/<\/nav>/g).length === code.match(/
+Your `nav` tags should wrap around the `ul` and its list items. -## Challenge Seed -
+```js +assert($('nav').children('ul').length == 1); +``` -
+Your code should not have any `div` tags. + +```js +assert($('div').length == 0); +``` + +Your `nav` element should have a closing tag. + +```js +assert( + code.match(/<\/nav>/g) && + code.match(/<\/nav>/g).length === code.match(/
- - - -
- -## Solution -
+# --solutions-- ```html @@ -116,5 +118,3 @@ tests: ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md index 8644b41b8e..a301791361 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md @@ -6,39 +6,61 @@ videoUrl: 'https://scrimba.com/c/cmzMgtz' forumTopicId: 301025 --- -## Description -
-Continuing with the date theme, HTML5 also introduced the time element along with a datetime attribute to standardize times. This is an inline element that can wrap a date or time on a page. A valid format of that date is held by the datetime attribute. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's written in an informal or colloquial manner in the text. +# --description-- + +Continuing with the date theme, HTML5 also introduced the `time` element along with a `datetime` attribute to standardize times. This is an inline element that can wrap a date or time on a page. A valid format of that date is held by the `datetime` attribute. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's written in an informal or colloquial manner in the text. + Here's an example: -<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p> -
-## Instructions -
-Camper Cat's Mortal Kombat survey results are in! Wrap a time tag around the text "Thursday, September 15<sup>th</sup>" and add a datetime attribute to it set to "2016-09-15". -
+`

Master Camper Cat officiated the cage match between Goro and Scorpion , which ended in a draw.

` -## Tests -
+# --instructions-- -```yml -tests: - - text: Your code should have a p element which includes the text Thank you to everyone for responding to Master Camper Cat's survey. and include a time element. - testString: assert(timeElement.length); - - text: Your added time tags should wrap around the text Thursday, September 15<sup>th</sup>. - testString: assert(timeElement.length && $(timeElement).html().trim() === "Thursday, September 15th"); - - text: Your added time tag should have a datetime attribute that is not empty. - testString: assert(datetimeAttr && datetimeAttr.length); - - text: Your added datetime attribute should be set to a value of 2016-09-15. - testString: assert(datetimeAttr === "2016-09-15"); +Camper Cat's Mortal Kombat survey results are in! Wrap a `time` tag around the text "Thursday, September 15<sup>th</sup>" and add a `datetime` attribute to it set to "2016-09-15". + +# --hints-- + +Your code should have a `p` element which includes the text `Thank you to everyone for responding to Master Camper Cat's survey.` and include a `time` element. + +```js +assert(timeElement.length); ``` -
+Your added `time` tags should wrap around the text `Thursday, September 15th`. -## Challenge Seed -
+```js +assert( + timeElement.length && + $(timeElement).html().trim() === 'Thursday, September 15th' +); +``` -
+Your added `time` tag should have a `datetime` attribute that is not empty. + +```js +assert(datetimeAttr && datetimeAttr.length); +``` + +Your added `datetime` attribute should be set to a value of `2016-09-15`. + +```js +assert(datetimeAttr === '2016-09-15'); +``` + +# --seed-- + +## --after-user-code-- + +```html + +``` + +## --seed-contents-- ```html @@ -74,25 +96,7 @@ tests: ``` -
- -
- -```html - -``` - -
- -
- -## Solution -
+# --solutions-- ```html @@ -123,5 +127,3 @@ const datetimeAttr = $(timeElement).attr("datetime");
© 2018 Camper Cat
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md index f293236ecb..0049b76786 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md @@ -6,42 +6,53 @@ videoUrl: 'https://scrimba.com/c/cqVEktm' forumTopicId: 301026 --- -## Description -
-Headings (h1 through h6 elements) are workhorse tags that help provide structure and labeling to your content. Screen readers can be set to read only the headings on a page so the user gets a summary. This means it is important for the heading tags in your markup to have semantic meaning and relate to each other, not be picked merely for their size values. -Semantic meaning means that the tag you use around content indicates the type of information it contains. +# --description-- + +Headings (`h1` through `h6` elements) are workhorse tags that help provide structure and labeling to your content. Screen readers can be set to read only the headings on a page so the user gets a summary. This means it is important for the heading tags in your markup to have semantic meaning and relate to each other, not be picked merely for their size values. + +*Semantic meaning* means that the tag you use around content indicates the type of information it contains. + If you were writing a paper with an introduction, a body, and a conclusion, it wouldn't make much sense to put the conclusion as a subsection of the body in your outline. It should be its own section. Similarly, the heading tags in a webpage need to go in order and indicate the hierarchical relationships of your content. + Headings with equal (or higher) rank start new implied sections, headings with lower rank start subsections of the previous one. -As an example, a page with an h2 element followed by several subsections labeled with h4 tags would confuse a screen reader user. With six choices, it's tempting to use a tag because it looks better in a browser, but you can use CSS to edit the relative sizing. -One final point, each page should always have one (and only one) h1 element, which is the main subject of your content. This and the other headings are used in part by search engines to understand the topic of the page. -
-## Instructions -
-Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix the headings so his markup gives semantic meaning to the content, and shows the proper parent-child relationships of his sections. Change all the h5 tags to the proper heading level to indicate they are subsections of the h2 ones. Use h3 tags for the purpose. -
+As an example, a page with an `h2` element followed by several subsections labeled with `h4` tags would confuse a screen reader user. With six choices, it's tempting to use a tag because it looks better in a browser, but you can use CSS to edit the relative sizing. -## Tests -
+One final point, each page should always have one (and only one) `h1` element, which is the main subject of your content. This and the other headings are used in part by search engines to understand the topic of the page. -```yml -tests: - - text: Your code should have 6 h3 tags. - testString: assert($("h3").length === 6); - - text: Your code should have 6 h3 closing tags. - testString: assert((code.match(/\/h3/g) || []).length===6); - - text: Your code should not have any h5 tags. - testString: assert($("h5").length === 0); - - text: Your code should not have any h5 closing tags. - testString: assert(/\/h5/.test(code)===false); +# --instructions-- + +Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix the headings so his markup gives semantic meaning to the content, and shows the proper parent-child relationships of his sections. Change all the `h5` tags to the proper heading level to indicate they are subsections of the `h2` ones. Use `h3` tags for the purpose. + +# --hints-- + +Your code should have 6 `h3` tags. + +```js +assert($('h3').length === 6); ``` -
+Your code should have 6 `h3` closing tags. -## Challenge Seed -
+```js +assert((code.match(/\/h3/g) || []).length === 6); +``` -
+Your code should not have any `h5` tags. + +```js +assert($('h5').length === 0); +``` + +Your code should not have any `h5` closing tags. + +```js +assert(/\/h5/.test(code) === false); +``` + +# --seed-- + +## --seed-contents-- ```html

How to Become a Ninja

@@ -60,14 +71,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html

How to Become a Ninja

@@ -85,5 +89,3 @@ tests:

How to Simplify your Life

``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md index d2c721debd..a36c059836 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md @@ -6,37 +6,37 @@ videoUrl: 'https://scrimba.com/c/cmzMDHW' forumTopicId: 301027 --- -## Description -
-The HTML tabindex attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior. -Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as div, span, and p, by placing a tabindex="0" attribute on them. Here's an example: -<div tabindex="0">I need keyboard focus!</div> -Note: A negative tabindex value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a div used for a pop-up window is activated), and is beyond the scope of these challenges. -
+# --description-- -## Instructions -
-Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a tabindex attribute to the p tag and set its value to "0". Bonus - using tabindex also enables the CSS pseudo-class :focus to work on the p tag. -
+The HTML `tabindex` attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior. -## Tests -
+Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as `div`, `span`, and `p`, by placing a `tabindex="0"` attribute on them. Here's an example: -```yml -tests: - - text: Your code should add a tabindex attribute to the p tag that holds the form instructions. - testString: assert($('p').attr('tabindex')); - - text: Your code should set the tabindex attribute on the p tag to a value of 0. - testString: assert($('p').attr('tabindex') == '0'); +`
I need keyboard focus!
` +**Note:** A negative `tabindex` value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a `div` used for a pop-up window is activated), and is beyond the scope of these challenges. + +# --instructions-- + +Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a `tabindex` attribute to the `p` tag and set its value to `"0"`. Bonus - using `tabindex` also enables the CSS pseudo-class `:focus` to work on the `p` tag. + +# --hints-- + +Your code should add a `tabindex` attribute to the `p` tag that holds the form instructions. + +```js +assert($('p').attr('tabindex')); ``` -
+Your code should set the `tabindex` attribute on the `p` tag to a value of 0. -## Challenge Seed -
+```js +assert($('p').attr('tabindex') == '0'); +``` -
+# --seed-- + +## --seed-contents-- ```html @@ -88,14 +88,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -146,5 +139,3 @@ tests:
© 2018 Camper Cat
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md index 734fca9a9e..1a5c40025c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md @@ -6,43 +6,53 @@ videoUrl: 'https://scrimba.com/c/cmzRRcb' forumTopicId: 301028 --- -## Description -
-The tabindex attribute also specifies the exact tab order of elements. This is achieved when the value of the attribute is set to a positive number of 1 or higher. -Setting a tabindex="1" will bring keyboard focus to that element first. Then it cycles through the sequence of specified tabindex values (2, 3, etc.), before moving to default and tabindex="0" items. +# --description-- + +The `tabindex` attribute also specifies the exact tab order of elements. This is achieved when the value of the attribute is set to a positive number of 1 or higher. + +Setting a `tabindex="1"` will bring keyboard focus to that element first. Then it cycles through the sequence of specified `tabindex` values (2, 3, etc.), before moving to default and `tabindex="0"` items. + It's important to note that when the tab order is set this way, it overrides the default order (which uses the HTML source). This may confuse users who are expecting to start navigation from the top of the page. This technique may be necessary in some circumstances, but in terms of accessibility, take care before applying it. + Here's an example: -<div tabindex="1">I get keyboard focus, and I get it first!</div> -<div tabindex="2">I get keyboard focus, and I get it second!</div> -
-## Instructions -
-Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search input and submit input form controls to be the first two items in the tab order. Add a tabindex attribute set to "1" to the search input, and a tabindex attribute set to "2" to the submit input. -
+`
I get keyboard focus, and I get it first!
` -## Tests -
+`
I get keyboard focus, and I get it second!
` -```yml -tests: - - text: Your code should add a tabindex attribute to the search input tag. - testString: assert($('#search').attr('tabindex')); - - text: Your code should add a tabindex attribute to the submit input tag. - testString: assert($('#submit').attr('tabindex')); - - text: Your code should set the tabindex attribute on the search input tag to a value of 1. - testString: assert($('#search').attr('tabindex') == '1'); - - text: Your code should set the tabindex attribute on the submit input tag to a value of 2. - testString: assert($('#submit').attr('tabindex') == '2'); +# --instructions-- +Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search `input` and submit `input` form controls to be the first two items in the tab order. Add a `tabindex` attribute set to `"1"` to the search `input`, and a `tabindex` attribute set to `"2"` to the submit `input`. + +# --hints-- + +Your code should add a `tabindex` attribute to the search `input` tag. + +```js +assert($('#search').attr('tabindex')); ``` -
+Your code should add a `tabindex` attribute to the submit `input` tag. -## Challenge Seed -
+```js +assert($('#submit').attr('tabindex')); +``` -
+Your code should set the `tabindex` attribute on the search `input` tag to a value of 1. + +```js +assert($('#search').attr('tabindex') == '1'); +``` + +Your code should set the `tabindex` attribute on the submit `input` tag to a value of 2. + +```js +assert($('#submit').attr('tabindex') == '2'); +``` + +# --seed-- + +## --seed-contents-- ```html @@ -78,14 +88,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -120,5 +123,3 @@ tests:
© 2018 Camper Cat
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md index a31045de81..baf00be313 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md @@ -6,12 +6,16 @@ videoUrl: 'https://scrimba.com/c/cPp79S3' forumTopicId: 301029 --- -## Description -
-article is another one of the new HTML5 elements that adds semantic meaning to your markup. article is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles. +# --description-- + +`article` is another one of the new HTML5 elements that adds semantic meaning to your markup. `article` is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles. + Determining whether content can stand alone is usually a judgement call, but there are a couple simple tests you can use. Ask yourself if you removed all surrounding context, would that content still make sense? Similarly for text, would the content hold up if it were in an RSS feed? + Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work. -Note about section and div
The section element is also new with HTML5, and has a slightly different semantic meaning than article. An article is for standalone content, and a section is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the article, then each chapter is a section. When there's no relationship between groups of content, then use a div. + +**Note about `section` and `div`** +The `section` element is also new with HTML5, and has a slightly different semantic meaning than `article`. An `article` is for standalone content, and a `section` is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the `article`, then each chapter is a `section`. When there's no relationship between groups of content, then use a `div`. ```html
- groups content @@ -19,31 +23,27 @@ Remember that folks using assistive technologies rely on organized, semantically
- groups independent, self-contained content ``` -
+# --instructions-- -## Instructions -
-Camper Cat used article tags to wrap the posts on his blog page, but he forgot to use them around the top one. Change the div tag to use an article tag instead. -
+Camper Cat used `article` tags to wrap the posts on his blog page, but he forgot to use them around the top one. Change the `div` tag to use an `article` tag instead. -## Tests -
+# --hints-- -```yml -tests: - - text: Your code should have three article tags. - testString: assert($('article').length == 3); - - text: Your code should not have any div tags. - testString: assert($('div').length == 0); +Your code should have three `article` tags. +```js +assert($('article').length == 3); ``` -
+Your code should not have any `div` tags. -## Challenge Seed -
+```js +assert($('div').length == 0); +``` -
+# --seed-- + +## --seed-contents-- ```html

Deep Thoughts with Master Camper Cat

@@ -69,14 +69,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html

Deep Thoughts with Master Camper Cat

@@ -101,5 +94,3 @@ tests: ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md index 651042e5c3..f95d0d9ede 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md @@ -6,11 +6,14 @@ videoUrl: 'https://scrimba.com/c/cVJVefw' forumTopicId: 301030 --- -## Description -
-The next form topic covers accessibility of radio buttons. Each choice is given a label with a for attribute tying to the id of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set. -The fieldset tag surrounds the entire grouping of radio buttons to achieve this. It often uses a legend tag to provide a description for the grouping, which is read by screen readers for each choice in the fieldset element. -The fieldset wrapper and legend tag are not necessary when the choices are self-explanatory, like a gender selection. Using a label with the for attribute for each radio button is sufficient. +# --description-- + +The next form topic covers accessibility of radio buttons. Each choice is given a `label` with a `for` attribute tying to the `id` of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set. + +The `fieldset` tag surrounds the entire grouping of radio buttons to achieve this. It often uses a `legend` tag to provide a description for the grouping, which is read by screen readers for each choice in the `fieldset` element. + +The `fieldset` wrapper and `legend` tag are not necessary when the choices are self-explanatory, like a gender selection. Using a `label` with the `for` attribute for each radio button is sufficient. + Here's an example: ```html @@ -27,37 +30,48 @@ Here's an example: ``` -
+# --instructions-- -## Instructions -
-Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons and learned from our last lesson to use label tags with for attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the div tag surrounding the radio buttons to a fieldset tag, and change the p tag inside it to a legend. -
+Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons and learned from our last lesson to use label tags with `for` attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the `div` tag surrounding the radio buttons to a `fieldset` tag, and change the `p` tag inside it to a `legend`. -## Tests -
+# --hints-- -```yml -tests: - - text: Your code should have a fieldset tag around the radio button set. - testString: assert($('fieldset').length == 1); - - text: The fieldset element should have a closing tag. - testString: assert(code.match(/<\/fieldset>/g) && code.match(/<\/fieldset>/g).length === code.match(/
/g).length); - - text: Your code should have a legend tag around the text asking what level ninja a user is. - testString: assert($('legend').length == 1); - - text: Your code should not have any div tags. - testString: assert($('div').length == 0); - - text: Your code should no longer have a p tag around the text asking what level ninja a user is. - testString: assert($('p').length == 4); +Your code should have a `fieldset` tag around the radio button set. +```js +assert($('fieldset').length == 1); ``` -
+The `fieldset` element should have a closing tag. -## Challenge Seed -
+```js +assert( + code.match(/<\/fieldset>/g) && + code.match(/<\/fieldset>/g).length === code.match(/
/g).length +); +``` -
+Your code should have a `legend` tag around the text asking what level ninja a user is. + +```js +assert($('legend').length == 1); +``` + +Your code should not have any `div` tags. + +```js +assert($('div').length == 0); +``` + +Your code should no longer have a `p` tag around the text asking what level ninja a user is. + +```js +assert($('p').length == 4); +``` + +# --seed-- + +## --seed-contents-- ```html @@ -105,14 +119,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -155,5 +162,3 @@ tests:
© 2018 Camper Cat
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md index 6fa234d64a..8973ddfb68 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md @@ -6,10 +6,12 @@ videoUrl: 'https://scrimba.com/c/cvVZdUd' forumTopicId: 301031 --- -## Description -
-The box-shadow property applies one or more shadows to an element. -The box-shadow property takes values for +# --description-- + +The `box-shadow` property applies one or more shadows to an element. + +The `box-shadow` property takes values for +
  • offset-x (how far to push the shadow horizontally from the element),
  • offset-y (how far to push the shadow vertically from the element),
    • @@ -17,39 +19,42 @@ The box-shadow property takes values for
  • spread-radius and
  • color, in that order.
-The blur-radius and spread-radius values are optional. -Multiple box-shadows can be created by using commas to separate properties of each box-shadow element. + +The `blur-radius` and `spread-radius` values are optional. + +Multiple box-shadows can be created by using commas to separate properties of each `box-shadow` element. + Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors: ```css box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); ``` -
+# --instructions-- -## Instructions -
-The element now has an id of thumbnail. With this selector, use the example CSS values above to place a box-shadow on the card. -
+The element now has an id of `thumbnail`. With this selector, use the example CSS values above to place a `box-shadow` on the card. -## Tests -
+# --hints-- -```yml -tests: - - text: Your code should add a box-shadow property for the thumbnail id. - testString: assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g)); - - text: You should use the given CSS for the box-shadow value. - testString: assert(code.match(/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi)); +Your code should add a `box-shadow` property for the `thumbnail` id. +```js +assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g)); ``` -
+You should use the given CSS for the `box-shadow` value. -## Challenge Seed -
+```js +assert( + code.match( + /box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi + ) +); +``` -
+# --seed-- + +## --seed-contents-- ```html CatPhotoApp ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md index 7fa0c9c62a..951bdd930e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md @@ -6,47 +6,65 @@ videoUrl: 'https://scrimba.com/c/cPp38TZ' forumTopicId: 301036 --- -## Description -
-Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the hsl() property as an alternative way to pick a color by directly stating these characteristics. -Hue is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In hsl(), hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360. -Saturation is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated. -Lightness is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color. -Here are a few examples of using hsl() with fully-saturated, normal lightness colors: -
ColorHSL
redhsl(0, 100%, 50%)
yellowhsl(60, 100%, 50%)
greenhsl(120, 100%, 50%)
cyanhsl(180, 100%, 50%)
bluehsl(240, 100%, 50%)
magentahsl(300, 100%, 50%)
-
+# --description-- -## Instructions -
-Change the background-color of each div element based on the class names (green, cyan, or blue) using hsl(). All three should have full saturation and normal lightness. -
+Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the `hsl()` property as an alternative way to pick a color by directly stating these characteristics. -## Tests -
+**Hue** is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In `hsl()`, hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360. -```yml -tests: - - text: Your code should use the hsl() property to declare the color green. - testString: assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi)); - - text: Your code should use the hsl() property to declare the color cyan. - testString: assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi)); - - text: Your code should use the hsl() property to declare the color blue. - testString: assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi)); - - text: The div element with class green should have a background-color of green. - testString: assert($('.green').css('background-color') == 'rgb(0, 255, 0)'); - - text: The div element with class cyan should have a background-color of cyan. - testString: assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)'); - - text: The div element with class blue should have a background-color of blue. - testString: assert($('.blue').css('background-color') == 'rgb(0, 0, 255)'); +**Saturation** is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated. +**Lightness** is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color. + +Here are a few examples of using `hsl()` with fully-saturated, normal lightness colors: + +
ColorHSL
redhsl(0, 100%, 50%)
yellowhsl(60, 100%, 50%)
greenhsl(120, 100%, 50%)
cyanhsl(180, 100%, 50%)
bluehsl(240, 100%, 50%)
magentahsl(300, 100%, 50%)
+ +# --instructions-- + +Change the `background-color` of each `div` element based on the class names (`green`, `cyan`, or `blue`) using `hsl()`. All three should have full saturation and normal lightness. + +# --hints-- + +Your code should use the `hsl()` property to declare the color green. + +```js +assert(code.match(/\.green\s*?{\s*?background-color:\s*?hsl/gi)); ``` -
+Your code should use the `hsl()` property to declare the color cyan. -## Challenge Seed -
+```js +assert(code.match(/\.cyan\s*?{\s*?background-color:\s*?hsl/gi)); +``` -
+Your code should use the `hsl()` property to declare the color blue. + +```js +assert(code.match(/\.blue\s*?{\s*?background-color:\s*?hsl/gi)); +``` + +The `div` element with class `green` should have a `background-color` of green. + +```js +assert($('.green').css('background-color') == 'rgb(0, 255, 0)'); +``` + +The `div` element with class `cyan` should have a `background-color` of cyan. + +```js +assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)'); +``` + +The `div` element with class `blue` should have a `background-color` of blue. + +```js +assert($('.blue').css('background-color') == 'rgb(0, 0, 255)'); +``` + +# --seed-- + +## --seed-contents-- ```html
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md index ee33ddb4ff..f2c34e4f13 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md @@ -6,37 +6,39 @@ videoUrl: 'https://scrimba.com/c/cnpWZc9' forumTopicId: 301042 --- -## Description -
-In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes rules. You can achieve the same goal by manipulating the animation-duration of multiple elements. -In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the animation-duration property to different values for each element. -
+# --description-- -## Instructions -
-Set the animation-duration of the elements with the classes star-1, star-2, and star-3 to 1s, 0.9s, and 1.1s, respectively. -
+In the previous challenge, you changed the animation rates for two similarly animated elements by altering their `@keyframes` rules. You can achieve the same goal by manipulating the `animation-duration` of multiple elements. -## Tests -
+In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the `animation-duration` property to different values for each element. -```yml -tests: - - text: The animation-duration property for the star with class star-1 should remain at 1s. - testString: assert($('.star-1').css('animation-duration') == '1s'); - - text: The animation-duration property for the star with class star-2 should be 0.9s. - testString: assert($('.star-2').css('animation-duration') == '0.9s'); - - text: The animation-duration property for the star with class star-3 should be 1.1s. - testString: assert($('.star-3').css('animation-duration') == '1.1s'); +# --instructions-- +Set the `animation-duration` of the elements with the classes `star-1`, `star-2`, and `star-3` to 1s, 0.9s, and 1.1s, respectively. + +# --hints-- + +The `animation-duration` property for the star with class `star-1` should remain at 1s. + +```js +assert($('.star-1').css('animation-duration') == '1s'); ``` -
+The `animation-duration` property for the star with class `star-2` should be 0.9s. -## Challenge Seed -
+```js +assert($('.star-2').css('animation-duration') == '0.9s'); +``` -
+The `animation-duration` property for the star with class `star-3` should be 1.1s. + +```js +assert($('.star-3').css('animation-duration') == '1.1s'); +``` + +# --seed-- + +## --seed-contents-- ```html
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md index 73d3f7e2d2..a7e6a78a5f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/czVmMtZ' forumTopicId: 301044 --- -## Description -
+# --description-- + CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the normal flow of a document, but CSS offers the position property to override it. -When the position of an element is set to relative, it allows you to specify how CSS should move it relative to its current position in the normal flow of the page. It pairs with the CSS offset properties of left or right, and top or bottom. These say how many pixels, percentages, or ems to move the item away from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom: + +When the position of an element is set to `relative`, it allows you to specify how CSS should move it *relative* to its current position in the normal flow of the page. It pairs with the CSS offset properties of `left` or `right`, and `top` or `bottom`. These say how many pixels, percentages, or ems to move the item *away* from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom: ```css p { @@ -18,33 +19,29 @@ p { } ``` -Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position. -Note: Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content. -
+Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position. **Note:** Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content. -## Instructions -
-Change the position of the h2 to relative, and use a CSS offset to move it 15 pixels away from the top of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements. -
+# --instructions-- -## Tests -
+Change the `position` of the `h2` to `relative`, and use a CSS offset to move it 15 pixels away from the `top` of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements. -```yml -tests: - - text: The h2 element should have a position property set to relative. - testString: assert($('h2').css('position') == 'relative'); - - text: Your code should use a CSS offset to relatively position the h2 15px away from the top of where it normally sits. - testString: assert($('h2').css('top') == '15px'); +# --hints-- +The `h2` element should have a `position` property set to `relative`. + +```js +assert($('h2').css('position') == 'relative'); ``` -
+Your code should use a CSS offset to relatively position the `h2` 15px away from the `top` of where it normally sits. -## Challenge Seed -
+```js +assert($('h2').css('top') == '15px'); +``` -
+# --seed-- + +## --seed-contents-- ```html
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md index 568c5f20c4..3e89a2fbb9 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md @@ -6,39 +6,45 @@ videoUrl: 'https://scrimba.com/c/cEDWPs6' forumTopicId: 301048 --- -## Description -
-By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the box-shadow property that sets the shadow of an element, along with the border-radius property that controls the roundness of the element's corners. +# --description-- + +By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the `box-shadow` property that sets the shadow of an element, along with the `border-radius` property that controls the roundness of the element's corners. + You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see. -In order to create a round object, the border-radius property should be set to a value of 50%. -You may recall from an earlier challenge that the box-shadow property takes values for offset-x, offset-y, blur-radius, spread-radius and a color value in that order. The blur-radius and spread-radius values are optional. -
-## Instructions -
-Manipulate the square element in the editor to create the moon shape. First, change the background-color to transparent, then set the border-radius property to 50% to make the circular shape. Finally, change the box-shadow property to set the offset-x to 25px, the offset-y to 10px, blur-radius to 0, spread-radius to 0, and color to blue. -
+In order to create a round object, the `border-radius` property should be set to a value of 50%. -## Tests -
+You may recall from an earlier challenge that the `box-shadow` property takes values for `offset-x`, `offset-y`, `blur-radius`, `spread-radius` and a color value in that order. The `blur-radius` and `spread-radius` values are optional. -```yml -tests: - - text: The value of the background-color property should be set to transparent. - testString: assert(code.match(/background-color:\s*?transparent;/gi)); - - text: The value of the border-radius property should be set to 50%. - testString: assert(code.match(/border-radius:\s*?50%;/gi)); - - text: The value of the box-shadow property should be set to 25px for offset-x, 10px for offset-y, 0 for blur-radius, 0 for spread-radius, and finally blue for the color. - testString: assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi)); +# --instructions-- +Manipulate the square element in the editor to create the moon shape. First, change the `background-color` to transparent, then set the `border-radius` property to 50% to make the circular shape. Finally, change the `box-shadow` property to set the `offset-x` to 25px, the `offset-y` to 10px, `blur-radius` to 0, `spread-radius` to 0, and color to blue. + +# --hints-- + +The value of the `background-color` property should be set to `transparent`. + +```js +assert(code.match(/background-color:\s*?transparent;/gi)); ``` -
+The value of the `border-radius` property should be set to `50%`. -## Challenge Seed -
+```js +assert(code.match(/border-radius:\s*?50%;/gi)); +``` -
+The value of the `box-shadow` property should be set to 25px for `offset-x`, 10px for `offset-y`, 0 for `blur-radius`, 0 for `spread-radius`, and finally blue for the color. + +```js +assert( + code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi) +); +``` + +# --seed-- + +## --seed-contents-- ```html
- ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md index 7105013bcb..d834206069 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md @@ -6,35 +6,33 @@ videoUrl: 'https://scrimba.com/c/c3bR8t7' forumTopicId: 301049 --- -## Description -
-You can use the hr tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content. -
+# --description-- -## Instructions -
-Add an hr tag underneath the h4 which contains the card title. -Note: In HTML, hr is a self-closing tag, and therefore doesn't need a separate closing tag. -
+You can use the `hr` tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content. -## Tests -
+# --instructions-- -```yml -tests: - - text: Your code should add an hr tag to the markup. - testString: assert($('hr').length == 1); - - text: The hr tag should come between the title and the paragraph. - testString: assert(code.match(/<\/h4>\s*?|\s*?\/>)\s*?

/gi)); +Add an `hr` tag underneath the `h4` which contains the card title. +**Note:** In HTML, `hr` is a self-closing tag, and therefore doesn't need a separate closing tag. + +# --hints-- + +Your code should add an `hr` tag to the markup. + +```js +assert($('hr').length == 1); ``` -

+The `hr` tag should come between the title and the paragraph. -## Challenge Seed -
+```js +assert(code.match(/<\/h4>\s*?|\s*?\/>)\s*?

/gi)); +``` -

+# --seed-- + +## --seed-contents-- ```html
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md index 11a018cd92..c99300dec3 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/c7amZfW' forumTopicId: 301051 --- -## Description -
-When elements have a specified position, such as fixed or relative, the CSS offset properties right, left, top, and bottom can be used in animation rules to create movement. -As shown in the example below, you can push the item downwards then upwards by setting the top property of the 50% keyframe to 50px, but having it set to 0px for the first (0%) and the last (100%) keyframe. +# --description-- + +When elements have a specified `position`, such as `fixed` or `relative`, the CSS offset properties `right`, `left`, `top`, and `bottom` can be used in animation rules to create movement. + +As shown in the example below, you can push the item downwards then upwards by setting the `top` property of the `50%` keyframe to 50px, but having it set to 0px for the first (`0%`) and the last (`100%`) keyframe. ```css @keyframes rainbow { @@ -28,33 +29,33 @@ As shown in the example below, you can push the item downwards then upwards by s } ``` -
+# --instructions-- -## Instructions -
-Add a horizontal motion to the div animation. Using the left offset property, add to the @keyframes rule so rainbow starts at 0 pixels at 0%, moves to 25 pixels at 50%, and ends at -25 pixels at 100%. Don't replace the top property in the editor - the animation should have both vertical and horizontal motion. -
+Add a horizontal motion to the `div` animation. Using the `left` offset property, add to the `@keyframes` rule so rainbow starts at 0 pixels at `0%`, moves to 25 pixels at `50%`, and ends at -25 pixels at `100%`. Don't replace the `top` property in the editor - the animation should have both vertical and horizontal motion. -## Tests -
+# --hints-- -```yml -tests: - - text: The @keyframes rule for 0% should use the left offset of 0px. - testString: assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi)); - - text: The @keyframes rule for 50% should use the left offset of 25px. - testString: assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi)); - - text: The @keyframes rule for 100% should use the left offset of -25px. - testString: assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi)); +The `@keyframes` rule for `0%` should use the `left` offset of 0px. +```js +assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi)); ``` -
+The `@keyframes` rule for `50%` should use the `left` offset of 25px. -## Challenge Seed -
+```js +assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi)); +``` -
+The `@keyframes` rule for `100%` should use the `left` offset of -25px. + +```js +assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi)); +``` + +# --seed-- + +## --seed-contents-- ```html
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md index 50fea7a19d..ff72291152 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md @@ -6,32 +6,29 @@ videoUrl: 'https://scrimba.com/c/cQdwJC8' forumTopicId: 301052 --- -## Description -
-One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The background property supports the url() function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses. -
+# --description-- -## Instructions -
-Using the url of https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png, set the background of the whole page with the body selector. -
+One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The `background` property supports the `url()` function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses. -## Tests -
+# --instructions-- -```yml -tests: - - text: Your body element should have a background property set to a url() with the given link. - testString: assert(code.match(/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi)); +Using the url of `https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png`, set the `background` of the whole page with the `body` selector. +# --hints-- + +Your `body` element should have a `background` property set to a `url()` with the given link. + +```js +assert( + code.match( + /background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi + ) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` -
- - - -
- -## Solution -
+# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md index 78513b2a02..6c572b5022 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md @@ -6,39 +6,41 @@ videoUrl: 'https://scrimba.com/c/c3b4EAp' forumTopicId: 301053 --- -## Description -
+# --description-- + This section of the curriculum focuses on Applied Visual Design. The first group of challenges build on the given card layout to show a number of core principles. -Text is often a large part of web content. CSS has several options for how to align it with the text-align property. -text-align: justify; causes all lines of text except the last line to meet the left and right edges of the line box. -text-align: center; centers the text -text-align: right; right-aligns the text -And text-align: left; (the default) left-aligns the text. -
-## Instructions -
-Align the h4 tag's text, which says "Google", to the center. Then justify the paragraph tag which contains information about how Google was founded. -
+Text is often a large part of web content. CSS has several options for how to align it with the `text-align` property. -## Tests -
+`text-align: justify;` causes all lines of text except the last line to meet the left and right edges of the line box. -```yml -tests: - - text: Your code should use the text-align property on the h4 tag to set it to center. - testString: assert($('h4').css('text-align') == 'center'); - - text: Your code should use the text-align property on the p tag to set it to justify. - testString: assert($('p').css('text-align') == 'justify'); +`text-align: center;` centers the text +`text-align: right;` right-aligns the text + +And `text-align: left;` (the default) left-aligns the text. + +# --instructions-- + +Align the `h4` tag's text, which says "Google", to the center. Then justify the paragraph tag which contains information about how Google was founded. + +# --hints-- + +Your code should use the text-align property on the `h4` tag to set it to center. + +```js +assert($('h4').css('text-align') == 'center'); ``` -
+Your code should use the text-align property on the `p` tag to set it to justify. -## Challenge Seed -
+```js +assert($('p').css('text-align') == 'justify'); +``` -
+# --seed-- + +## --seed-contents-- ```html
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md index 018998639b..398aaa6ec6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md @@ -6,34 +6,33 @@ videoUrl: 'https://scrimba.com/c/c7aKqu4' forumTopicId: 301055 --- -## Description -
-The opacity property in CSS is used to adjust the opacity, or conversely, the transparency for an item. +# --description-- + +The `opacity` property in CSS is used to adjust the opacity, or conversely, the transparency for an item. +
A value of 1 is opaque, which isn't transparent at all.
A value of 0.5 is half see-through.
A value of 0 is completely transparent.
+ The value given will apply to the entire element, whether that's an image with some transparency, or the foreground and background colors for a block of text. -
-## Instructions -
-Set the opacity of the anchor tags to 0.7 using links class to select them. -
+# --instructions-- -## Tests -
+Set the `opacity` of the anchor tags to 0.7 using `links` class to select them. -```yml -tests: - - text: Your code should set the opacity property to 0.7 on the anchor tags by selecting the class of links. - testString: assert(/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test($('style').text())); +# --hints-- +Your code should set the `opacity` property to 0.7 on the anchor tags by selecting the class of `links`. + +```js +assert( + /\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test( + $('style').text() + ) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md index 441f068dcd..1a29dfb5bc 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md @@ -6,37 +6,39 @@ videoUrl: 'https://scrimba.com/c/cyLJ7c3' forumTopicId: 301060 --- -## Description -
-The next option for the CSS position property is absolute, which locks the element in place relative to its parent container. Unlike the relative position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position. -One nuance with absolute positioning is that it will be locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (this is typically done using position: relative;), the browser will keep looking up the chain and ultimately default to the body tag. -
+# --description-- -## Instructions -
-Lock the #searchbar element to the top-right of its section parent by declaring its position as absolute. Give it top and right offsets of 50 pixels each. -
+The next option for the CSS `position` property is `absolute`, which locks the element in place relative to its parent container. Unlike the `relative` position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position. -## Tests -
+One nuance with absolute positioning is that it will be locked relative to its closest *positioned* ancestor. If you forget to add a position rule to the parent item, (this is typically done using `position: relative;`), the browser will keep looking up the chain and ultimately default to the body tag. -```yml -tests: - - text: The #searchbar element should have a position set to absolute. - testString: assert($('#searchbar').css('position') == 'absolute'); - - text: Your code should use the top CSS offset of 50 pixels on the #searchbar element. - testString: assert($('#searchbar').css('top') == '50px'); - - text: Your code should use the right CSS offset of 50 pixels on the #searchbar element. - testString: assert($('#searchbar').css('right') == '50px'); +# --instructions-- +Lock the `#searchbar` element to the top-right of its `section` parent by declaring its `position` as `absolute`. Give it `top` and `right` offsets of 50 pixels each. + +# --hints-- + +The `#searchbar` element should have a `position` set to `absolute`. + +```js +assert($('#searchbar').css('position') == 'absolute'); ``` -
+Your code should use the `top` CSS offset of 50 pixels on the `#searchbar` element. -## Challenge Seed -
+```js +assert($('#searchbar').css('top') == '50px'); +``` -
+Your code should use the `right` CSS offset of 50 pixels on the `#searchbar` element. + +```js +assert($('#searchbar').css('right') == '50px'); +``` + +# --seed-- + +## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md index a3b077bdd6..ef0679833d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md @@ -6,35 +6,33 @@ videoUrl: 'https://scrimba.com/c/c9bQEA4' forumTopicId: 301065 --- -## Description -
-The CSS offsets of top or bottom, and left or right tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the top offset moved the h2 downwards. Likewise, using a left offset moves an item to the right. - -
+# --description-- -## Instructions -
-Use CSS offsets to move the h2 15 pixels to the right and 10 pixels up. -
+The CSS offsets of `top` or `bottom`, and `left` or `right` tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the top offset moved the `h2` downwards. Likewise, using a left offset moves an item to the right. -## Tests -
+ -```yml -tests: - - text: Your code should use a CSS offset to relatively position the h2 10px upwards. In other words, move it 10px away from the bottom of where it normally sits. - testString: assert($('h2').css('bottom') == '10px'); - - text: Your code should use a CSS offset to relatively position the h2 15px towards the right. In other words, move it 15px away from the left of where it normally sits. - testString: assert($('h2').css('left') == '15px'); +# --instructions-- +Use CSS offsets to move the `h2` 15 pixels to the right and 10 pixels up. + +# --hints-- + +Your code should use a CSS offset to relatively position the `h2` 10px upwards. In other words, move it 10px away from the `bottom` of where it normally sits. + +```js +assert($('h2').css('bottom') == '10px'); ``` -
+Your code should use a CSS offset to relatively position the `h2` 15px towards the right. In other words, move it 15px away from the `left` of where it normally sits. -## Challenge Seed -
+```js +assert($('h2').css('left') == '15px'); +``` -
+# --seed-- + +## --seed-contents-- ```html @@ -53,14 +51,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -78,5 +69,3 @@ tests:

I still think the h2 is where it normally sits.

``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md index 1b021a5789..6e37fd9c6b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md @@ -6,34 +6,31 @@ videoUrl: 'https://scrimba.com/c/c2MDqu2' forumTopicId: 301066 --- -## Description -
-The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires. -
+# --description-- -## Instructions -
-The given markup would work well as a two-column layout, with the section and aside elements next to each other. Give the #left item a float of left and the #right item a float of right. -
+The next positioning tool does not actually use `position`, but sets the `float` property of an element. Floating elements are removed from the normal flow of a document and pushed to either the `left` or `right` of their containing parent element. It's commonly used with the `width` property to specify how much horizontal space the floated element requires. -## Tests -
+# --instructions-- -```yml -tests: - - text: The element with id left should have a float value of left. - testString: assert($('#left').css('float') == 'left'); - - text: The element with id right should have a float value of right. - testString: assert($('#right').css('float') == 'right'); +The given markup would work well as a two-column layout, with the `section` and `aside` elements next to each other. Give the `#left` item a `float` of `left` and the `#right` item a `float` of `right`. +# --hints-- + +The element with id `left` should have a `float` value of `left`. + +```js +assert($('#left').css('float') == 'left'); ``` -
+The element with id `right` should have a `float` value of `right`. -## Challenge Seed -
+```js +assert($('#right').css('float') == 'right'); +``` -
+# --seed-- + +## --seed-contents-- ```html @@ -67,14 +64,7 @@ tests: ``` -
- - - -
- -## Solution -
+# --solutions-- ```html @@ -107,5 +97,3 @@ tests: ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md index db65762b31..605028841c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md @@ -6,14 +6,14 @@ videoUrl: 'https://scrimba.com/c/cPpQNT3' forumTopicId: 301067 --- -## Description -
-The font-size property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all h1 through h6 tags to balance the heading sizes. -
+# --description-- + +The `font-size` property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all `h1` through `h6` tags to balance the heading sizes. + +# --instructions-- -## Instructions -

In the style tags, set the font-size of the:

+
  • h1 tag to 68px.
  • h2 tag to 52px.
    • @@ -22,34 +22,49 @@ The font-size property is used to specify how large the text is in
  • h5 tag to 21px.
  • h6 tag to 14px.
-
-## Tests -
+# --hints-- -```yml -tests: - - text: Your code should set the font-size property for the h1 tag to 68 pixels. - testString: assert($('h1').css('font-size') == '68px'); - - text: Your code should set the font-size property for the h2 tag to 52 pixels. - testString: assert($('h2').css('font-size') == '52px'); - - text: Your code should set the font-size property for the h3 tag to 40 pixels. - testString: assert($('h3').css('font-size') == '40px'); - - text: Your code should set the font-size property for the h4 tag to 32 pixels. - testString: assert($('h4').css('font-size') == '32px'); - - text: Your code should set the font-size property for the h5 tag to 21 pixels. - testString: assert($('h5').css('font-size') == '21px'); - - text: Your code should set the font-size property for the h6 tag to 14 pixels. - testString: const regex = /h6\s*\{\s*font-size\s*:\s*14px\s*(;\s*\}|\})/i; assert.strictEqual(true, regex.test(code)); +Your code should set the `font-size` property for the `h1` tag to 68 pixels. +```js +assert($('h1').css('font-size') == '68px'); ``` -
+Your code should set the `font-size` property for the `h2` tag to 52 pixels. -## Challenge Seed -
+```js +assert($('h2').css('font-size') == '52px'); +``` -
+Your code should set the `font-size` property for the `h3` tag to 40 pixels. + +```js +assert($('h3').css('font-size') == '40px'); +``` + +Your code should set the `font-size` property for the `h4` tag to 32 pixels. + +```js +assert($('h4').css('font-size') == '32px'); +``` + +Your code should set the `font-size` property for the `h5` tag to 21 pixels. + +```js +assert($('h5').css('font-size') == '21px'); +``` + +Your code should set the `font-size` property for the `h6` tag to 14 pixels. + +```js +const regex = /h6\s*\{\s*font-size\s*:\s*14px\s*(;\s*\}|\})/i; +assert.strictEqual(true, regex.test(code)); +``` + +# --seed-- + +## --seed-contents-- ```html
``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md index 64520650c7..21771668f5 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md @@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cg4vZAa' forumTopicId: 301073 --- -## Description -
-You can use CSS @keyframes to change the color of a button in its hover state. +# --description-- + +You can use CSS `@keyframes` to change the color of a button in its hover state. + Here's an example of changing the width of an image on hover: ```html @@ -28,32 +29,29 @@ Here's an example of changing the width of an image on hover: Google's Logo ``` -
+# --instructions-- -## Instructions -
-Note that ms stands for milliseconds, where 1000ms is equal to 1s. -Use CSS @keyframes to change the background-color of the button element so it becomes #4791d0 when a user hovers over it. The @keyframes rule should only have an entry for 100%. -
+Note that `ms` stands for milliseconds, where 1000ms is equal to 1s. -## Tests -
+Use CSS `@keyframes` to change the `background-color` of the `button` element so it becomes `#4791d0` when a user hovers over it. The `@keyframes` rule should only have an entry for `100%`. -```yml -tests: - - text: The @keyframes rule should use the animation-name background-color. - testString: assert(code.match(/@keyframes\s+?background-color\s*?{/g)); - - text: There should be one rule under @keyframes that changes the background-color to #4791d0 at 100%. - testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi)); +# --hints-- +The @keyframes rule should use the `animation-name` background-color. + +```js +assert(code.match(/@keyframes\s+?background-color\s*?{/g)); ``` -
+There should be one rule under `@keyframes` that changes the `background-color` to `#4791d0` at 100%. -## Challenge Seed -
+```js +assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi)); +``` -
+# --seed-- + +## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.md index ccf6c94bf9..d931ea4c91 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.md @@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cyLP8Sr' forumTopicId: 301074 --- -## Description -
-The next function of the transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree. +# --description-- + +The next function of the `transform` property is `skewX()`, which skews the selected element along its X (horizontal) axis by a given degree. + The following code skews the paragraph element by -32 degrees along the X-axis. ```css @@ -17,29 +18,21 @@ p { } ``` -
+# --instructions-- -## Instructions -
-Skew the element with the id of bottom by 24 degrees along the X-axis by using the transform property. -
+Skew the element with the id of `bottom` by 24 degrees along the X-axis by using the `transform` property. -## Tests -
+# --hints-- -```yml -tests: - - text: The element with id bottom should be skewed by 24 degrees along its X-axis. - testString: assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g)); +The element with id `bottom` should be skewed by 24 degrees along its X-axis. +```js +assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g)); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html
- ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.md index ab48b0778f..638b68eb39 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.md @@ -6,34 +6,31 @@ videoUrl: 'https://scrimba.com/c/cVJRBtp' forumTopicId: 301078 --- -## Description -
-To emphasize text, you can use the em tag. This displays text as italicized, as the browser applies the CSS of font-style: italic; to the element. -
+# --description-- -## Instructions -
-Wrap an em tag around the contents of the paragraph tag to give it emphasis. -
+To emphasize text, you can use the `em` tag. This displays text as italicized, as the browser applies the CSS of `font-style: italic;` to the element. -## Tests -
+# --instructions-- -```yml -tests: - - text: Your code should add an em tag to the markup. - testString: assert($('em').length == 1); - - text: The em tag should wrap around the contents of the p tag but not the p tag itself. - testString: assert($('p').children().length == 1 && $('em').children().length == 2); +Wrap an `em` tag around the contents of the paragraph tag to give it emphasis. +# --hints-- + +Your code should add an `em` tag to the markup. + +```js +assert($('em').length == 1); ``` -
+The `em` tag should wrap around the contents of the `p` tag but not the `p` tag itself. -## Challenge Seed -
+```js +assert($('p').children().length == 1 && $('em').children().length == 2); +``` -
+# --seed-- + +## --seed-contents-- ```html - --fcc-editable-region-- +--fcc-editable-region--
@@ -61,6 +53,3 @@ tests: ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-013.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-013.md index bc05783b27..9b2caadeaf 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-013.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-013.md @@ -4,29 +4,21 @@ title: Part 13 challengeType: 0 --- -## Description -
+# --description-- In the previous step, you used a type selector to style the `h1` element. Go ahead and center the `h2` and `p` elements with a new type selector for each one. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -34,13 +26,13 @@ tests: Camper Cafe Menu - --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region--
@@ -56,6 +48,3 @@ tests: ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md index 122994ffc6..6c48a2e8bc 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-014.md @@ -4,8 +4,7 @@ title: Part 14 challengeType: 0 --- -## Description -
+# --description-- You now have three type selectors with the exact same styling. You can add the same group of styles to many elements by separating the selectors with commas like this: @@ -17,24 +16,17 @@ selector1, selector2 { Use a single type selector to center the `h1`, `h2` and `p` elements at the same time. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -42,7 +34,7 @@ tests: Camper Cafe Menu - --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region--
@@ -70,6 +62,3 @@ tests: ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md index 7143526473..f61d43e1e0 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-015.md @@ -4,29 +4,21 @@ title: Part 15 challengeType: 0 --- -## Description -
+# --description-- -You have styled three elements by writing CSS inside the `style` tags. This works, but since there will many more styles, it's best to put all the styles in a separate file and link to it. Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags. +You have styled three elements by writing CSS inside the `style` tags. This works, but since there will many more styles, it's best to put all the styles in a separate file and link to it. Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -54,16 +46,9 @@ tests: ``` -
- -
- ```css --fcc-editable-region-- --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-016.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-016.md index 44f2fc4cb0..b6a5ed1248 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-016.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-016.md @@ -4,34 +4,26 @@ title: Part 16 challengeType: 0 --- -## Description -
+# --description-- Now that you have the CSS in the `styles.css` file, go ahead and remove the `style` element and all its content. Once it is removed, the text that as centered, will shift back to the left. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html - --fcc-editable-region-- +--fcc-editable-region-- Camper Cafe Menu @@ -41,7 +33,7 @@ tests: } - --fcc-editable-region-- +--fcc-editable-region--

CAMPER CAFE

@@ -56,16 +48,9 @@ tests: ``` -
- -
- ```css h1, h2, p { text-align: center; } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md index cf1713591e..18c2d48117 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-017.md @@ -4,39 +4,31 @@ title: Part 17 challengeType: 0 --- -## Description -
+# --description-- Now you need to link the `styles.css` file so the styles will be applied again. Next a self-closing `link` element in the `head` element. Give it a `rel` attribute value `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html - --fcc-editable-region-- +--fcc-editable-region-- Camper Cafe Menu - --fcc-editable-region-- +--fcc-editable-region--

CAMPER CAFE

@@ -51,16 +43,9 @@ tests: ``` -
- -
- ```css h1, h2, p { text-align: center; } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-018.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-018.md index 72bc1ce3f2..a6ce32a73f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-018.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-018.md @@ -4,8 +4,7 @@ title: Part 18 challengeType: 0 --- -## Description -
+# --description-- So the styling of the page looks similar on mobile as it does on a desktop or laptop, you need to add a `meta` element with a special `content` attribute. @@ -15,35 +14,28 @@ Add the following within the `head` element: ``` -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html - --fcc-editable-region-- +--fcc-editable-region-- Camper Cafe Menu - --fcc-editable-region-- +--fcc-editable-region--

CAMPER CAFE

@@ -58,16 +50,9 @@ tests: ``` -
- -
- ```css h1, h2, p { text-align: center; } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md index a712976f79..8fd6eb43de 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-019.md @@ -4,29 +4,21 @@ title: Part 19 challengeType: 0 --- -## Description -
+# --description-- The text is centered again so the link to the CSS file is working. Add another style to the file that changes the `background-color` property to `brown` for the `body` element. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -51,10 +43,6 @@ tests: ``` -
- -
- ```css --fcc-editable-region-- h1, h2, p { @@ -63,6 +51,3 @@ h1, h2, p { --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md index 6a22cb36c8..2ab85c865e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-020.md @@ -4,29 +4,21 @@ title: Part 20 challengeType: 0 --- -## Description -
+# --description-- That brown background makes it hard to read the text. Change the `body` element's background color to be `burlywood` so it has some color but you are still be able to read the text. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -51,10 +43,6 @@ tests: ``` -
- -
- ```css --fcc-editable-region-- body { @@ -66,6 +54,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md index cc53428d5e..a6d5bcd965 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-021.md @@ -4,29 +4,21 @@ title: Part 21 challengeType: 0 --- -## Description -
+# --description-- -The `div` element is used mainly for design layout purposes unlike the other content elements you have used so far. Add a `div` element inside the `body` element and then move all the other elements inside the new `div`. +The `div` element is used mainly for design layout purposes unlike the other content elements you have used so far. Add a `div` element inside the `body` element and then move all the other elements inside the new `div`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -37,7 +29,7 @@ tests: Camper Cafe Menu - --fcc-editable-region-- +--fcc-editable-region--

CAMPER CAFE

@@ -49,14 +41,10 @@ tests:
- --fcc-editable-region-- +--fcc-editable-region-- ``` -
- -
- ```css body { background-color: burlywood; @@ -67,6 +55,3 @@ h1, h2, p { } ``` -
- - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md index 34aefbd458..0a1fa44894 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-022.md @@ -4,29 +4,21 @@ title: Part 22 challengeType: 0 --- -## Description -
+# --description-- The goal now is to make the `div` not take up the entire width of the page. The CSS `width` property is perfect for this. Create a new type selector in the style sheet that gives your `div` element a width of `300px`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -53,10 +45,6 @@ tests: ``` -
- -
- ```css --fcc-editable-region-- body { @@ -69,6 +57,3 @@ h1, h2, p { --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md index b29626e847..6597104065 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-023.md @@ -4,8 +4,7 @@ title: Part 23 challengeType: 0 --- -## Description -
+# --description-- Comments in CSS look like this: @@ -15,24 +14,17 @@ Comments in CSS look like this: In your style sheet, comment out the the line containing the `background-color` property and value, so you can see the effect of only styling `div` element. This will make the background white again. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -59,15 +51,11 @@ tests: ``` -
- -
- ```css body { - --fcc-editable-region-- +--fcc-editable-region-- background-color: burlywood; - --fcc-editable-region-- +--fcc-editable-region-- } h1, h2, p { @@ -79,6 +67,3 @@ div { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-024.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-024.md index 024fc6a3d7..b56be60367 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-024.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-024.md @@ -4,29 +4,21 @@ title: Part 24 challengeType: 0 --- -## Description -
+# --description-- Now make the background color of the `div` element to be `burlywood`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -53,10 +45,6 @@ tests: ``` -
- -
- ```css body { /* @@ -75,6 +63,3 @@ div { --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md index 5f2a33f3ab..4ee0492ac9 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-025.md @@ -4,29 +4,21 @@ title: Part 25 challengeType: 0 --- -## Description -
+# --description-- Now it's easy to see that the text is centered inside the `div` element. Currently, the width of the `div` element is specified in pixels (`px`). Change the `width` property's value to be `80%`, to make it is 80% the width of its parent element (`body`). -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -53,10 +45,6 @@ tests: ``` -
- -
- ```css body { /* @@ -75,6 +63,3 @@ div { --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md index 8ea4ee88c7..d8f665d6ea 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-026.md @@ -4,29 +4,21 @@ title: Part 26 challengeType: 0 --- -## Description -
+# --description-- Next, you want to center the `div` horizontally. You can do this by setting its `margin-left` and `margin-right` properties to `auto`. Think of the margin as invisible space around an element. Using these two margin properties, center the `div` element within the `body` element. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -53,10 +45,6 @@ tests: ``` -
- -
- ```css body { /* @@ -76,6 +64,3 @@ div { --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md index 571c8661ec..faac9b2648 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-027.md @@ -4,10 +4,9 @@ title: Part 27 challengeType: 0 --- -## Description -
+# --description-- -So far you have been using type selectors to style elements. A class selector is defined by a name with a dot directly in front it, like this: +So far you have been using type selectors to style elements. A class selector is defined by a name with a dot directly in front it, like this: ```css .class-name { @@ -17,24 +16,17 @@ So far you have been using type selectors to style elements. A class selec Change the existing `div` selector into a class selector by replacing `div` with a class named `menu`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -61,10 +53,6 @@ tests: ``` -
- -
- ```css body { /* @@ -86,6 +74,3 @@ div { --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-028.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-028.md index 5a3c3779df..8434d4656f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-028.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-028.md @@ -4,29 +4,21 @@ title: Part 28 challengeType: 0 --- -## Description -
+# --description-- To apply the class's styling to the `div` element, add a `class` attribute to the `div` element's opening tag and set its value to `menu`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -38,9 +30,9 @@ tests: - --fcc-editable-region-- +--fcc-editable-region--
- --fcc-editable-region-- +--fcc-editable-region--

CAMPER CAFE

Est. 2020

@@ -55,10 +47,6 @@ tests: ``` -
- -
- ```css body { /* @@ -78,6 +66,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-029.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-029.md index 413dbc2f8b..a068fe7095 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-029.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-029.md @@ -4,31 +4,23 @@ title: Part 29 challengeType: 0 --- -## Description -
+# --description-- Since the cafe's main product for sale is coffee, you could use an image of coffee beans for the background of the page. Delete the comment and its contents inside the `body` type selector. Now add a `background-image` property and set its value to `url(https://tinyurl.com/coffee-beans-fcc)`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -55,17 +47,13 @@ tests: ``` -
- -
- ```css body { - --fcc-editable-region-- +--fcc-editable-region-- /* background-color: burlywood; */ - --fcc-editable-region-- +--fcc-editable-region-- } h1, h2, p { @@ -80,6 +68,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md index 7cedd750dd..152a0a48c2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-030.md @@ -4,29 +4,21 @@ title: Part 30 challengeType: 0 --- -## Description -
+# --description-- It’s looking good. Time to start adding some menu items. Add an empty `article` element under the `Coffees` heading. It will contain a flavor and price of each coffee you currently offer. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -45,9 +37,9 @@ tests:
- --fcc-editable-region-- +--fcc-editable-region--

Coffees

- --fcc-editable-region-- +--fcc-editable-region--
@@ -55,10 +47,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -76,6 +64,3 @@ h1, h2, p { } ``` -
- - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md index a8ca036e07..660efede5a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-031.md @@ -4,29 +4,21 @@ title: Part 31 challengeType: 0 --- -## Description -
+# --description-- `article` elements commonly contain multiple elements that have related information. In this case, it will contain a coffee flavor and a price for that flavor. Nest two `p` elements inside your `article` element. The first one's text should be `French Vanilla`, and the second's text `3.00`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -46,10 +38,10 @@ tests:

Coffees

- --fcc-editable-region-- +--fcc-editable-region--
- --fcc-editable-region-- +--fcc-editable-region--
@@ -57,10 +49,6 @@ tests: ``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -78,6 +66,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-032.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-032.md index 3e0ab9d895..d1328133e3 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-032.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-032.md @@ -4,8 +4,7 @@ title: Part 32 challengeType: 0 --- -## Description -
+# --description-- Starting below the existing coffee/price pair, add the following coffees and prices using an `article` element with two nested `p` elements inside each. As before, the first `p` element's text should contain the coffee flavor and the second `p` element's text should contain the price. @@ -16,24 +15,17 @@ Hazelnut 4.00 Mocah 4.50 ``` -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -53,12 +45,12 @@ tests:

Coffees

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

French Vanilla

3.00

- --fcc-editable-region-- +--fcc-editable-region--
@@ -66,10 +58,6 @@ tests: ``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -87,6 +75,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md index fe38743152..28cd44ced5 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-033.md @@ -4,31 +4,23 @@ title: Part 33 challengeType: 0 --- -## Description -
+# --description-- The flavors and prices are currently stacked on top of each other and centered with their respectable `p` elements. It would be nice if the flavor was on the left and the price was on the right. Add the class name `flavor` to the `French Vanilla` `p` element. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -49,10 +41,10 @@ tests:

Coffees

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

French Vanilla

3.00

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

Carmel Macchiato

@@ -77,10 +69,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -98,6 +86,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-034.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-034.md index 16a0408c46..8d2c320317 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-034.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-034.md @@ -4,29 +4,21 @@ title: Part 34 challengeType: 0 --- -## Description -
+# --description-- Using your new `flavor` class as a selector, set the `text-align` property's value to `left`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -73,10 +65,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -98,6 +86,3 @@ h1, h2, p { --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md index b5b768d3f0..0c97c02e81 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-035.md @@ -4,29 +4,21 @@ title: Part 35 challengeType: 0 --- -## Description -
+# --description-- Next, you want to align the price to the right. Add a class named `price` to your `p` element that has `3.00` as its text. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -48,9 +40,9 @@ tests:

Coffees

French Vanilla

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

3.00

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

Carmel Macchiato

@@ -75,10 +67,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -100,6 +88,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md index b32a7771d5..8a10870eda 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-036.md @@ -4,29 +4,21 @@ title: Part 36 challengeType: 0 --- -## Description -
+# --description-- Now align the text to the `right` for the elements with the `price` class. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -73,10 +65,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -102,6 +90,3 @@ h1, h2, p { --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md index b570b2ce8a..b965d0d832 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-037.md @@ -4,31 +4,23 @@ title: Part 37 challengeType: 0 --- -## Description -
+# --description-- -That is kind of what you want, but now it would be nice if the flavor and price were on the same line. `p` elements are block-level elements, so they take up the entire width of their parent element. +That is kind of what you want, but now it would be nice if the flavor and price were on the same line. `p` elements are block-level elements, so they take up the entire width of their parent element. -To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Add a `class` attribute with the value `item` to first `article` element under the `Coffees` heading. +To get them on the same line, you need to apply some styling to the `p` elements, so they behave more like `inline` elements. Add a `class` attribute with the value `item` to first `article` element under the `Coffees` heading. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -47,13 +39,13 @@ tests:
- --fcc-editable-region-- +--fcc-editable-region--

Coffees

French Vanilla

3.00

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

Carmel Macchiato

3.75

@@ -77,10 +69,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -104,9 +92,5 @@ h1, h2, p { .price { text-align: right; } - ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md index f7563cceef..2d7dcd23e1 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-038.md @@ -4,10 +4,9 @@ title: Part 38 challengeType: 0 --- -## Description -
+# --description-- -The `p` elements are nested in an `article` elements with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` like this: +The `p` elements are nested in an `article` elements with the class attribute of `item`. You can style all the `p` elements nested anywhere in elements with a class named `item` like this: ```css .item p { } @@ -15,24 +14,17 @@ The `p` elements are nested in an `article` elements with the class attribute of Using the above selector, add a `display` property with value `inline-block` so the `p` elements behave more like `inline` elements. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -79,10 +71,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -110,9 +98,5 @@ h1, h2, p { .price { text-align: right; } - ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md index c33eb40e48..5581f3714c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-039.md @@ -4,29 +4,21 @@ title: Part 39 challengeType: 0 --- -## Description -
+# --description-- That's closer, but the price didn't stay over on the right. This is because `inline-block` elements only take up the width of their content. To spread them out, add a `width` property to the `flavor` and `price` class selectors that have a value of `50%` each. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -73,10 +65,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -108,6 +96,3 @@ h1, h2, p { --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-040.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-040.md index 4784c2afba..582ab5b381 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-040.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-040.md @@ -4,31 +4,23 @@ title: Part 40 challengeType: 0 --- -## Description -
+# --description-- Well that did not work. Styling the `p` elements as `inline-block` and placing them on a separate lines in the code, creates an extra space to the right of the first `p` element, causing the second one to shift to the next line. One way to fix this is to make each `p`'s width a little less than `50%`. Change the `width` value to `49%` for each class to see what happens. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -75,10 +67,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -112,6 +100,3 @@ h1, h2, p { --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md index 88f348e535..cf6824fa44 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-041.md @@ -4,31 +4,23 @@ title: Part 41 challengeType: 0 --- -## Description -
+# --description-- -That worked, but there is still a little space on the right of the price. +That worked, but there is still a little space on the right of the price. -You could keep trying various percentages for the widths. Instead, simply move the price `p` element to be on the same line and make sure there is no space between them. +You could keep trying various percentages for the widths. Instead, simply move the price `p` element to be on the same line and make sure there is no space between them. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -49,10 +41,10 @@ tests:

Coffees

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

French Vanilla

3.00

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

Carmel Macchiato

@@ -77,10 +69,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -112,6 +100,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md index 91785a1f1c..e0d38170c9 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-042.md @@ -4,29 +4,21 @@ title: Part 42 challengeType: 0 --- -## Description -
+# --description-- Now go ahead and change both the `flavor` and `price` class' widths to be `50%` again. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -72,10 +64,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -109,6 +97,3 @@ h1, h2, p { --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md index e48722bef0..1b3af26d3b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-043.md @@ -4,29 +4,21 @@ title: Part 43 challengeType: 0 --- -## Description -
+# --description-- -Now that you know it works, you can change the remaining `article` and `p` elements to match the first set. Start by adding the class `item` to the other `article` elements. +Now that you know it works, you can change the remaining `article` and `p` elements to match the first set. Start by adding the class `item` to the other `article` elements. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -49,7 +41,7 @@ tests:

French Vanilla

3.00

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

Carmel Macchiato

3.75

@@ -66,7 +58,7 @@ tests:

Mocha

4.50

- --fcc-editable-region-- +--fcc-editable-region--
@@ -74,10 +66,6 @@ tests: ``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -109,6 +97,3 @@ h1, h2, p { } ``` -
- - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-044.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-044.md index ebf0533b31..fa78cd738d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-044.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-044.md @@ -4,29 +4,21 @@ title: Part 44 challengeType: 0 --- -## Description -
+# --description-- Next, position the other `p` elements to be on the same line with no space between them. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -49,7 +41,7 @@ tests:

French Vanilla

3.00

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

Carmel Macchiato

3.75

@@ -66,7 +58,7 @@ tests:

Mocha

4.50

- --fcc-editable-region-- +--fcc-editable-region--
@@ -74,10 +66,6 @@ tests: ``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -109,6 +97,3 @@ h1, h2, p { } ``` -
- - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md index a0891c0796..1103653019 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-045.md @@ -4,29 +4,21 @@ title: Part 45 challengeType: 0 --- -## Description -
+# --description-- To complete the styling, add the applicable class names `flavor` and `price` to all the remaining `p` elements. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -49,7 +41,7 @@ tests:

French Vanilla

3.00

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

Carmel Macchiato

3.75

@@ -62,7 +54,7 @@ tests:

Mocha

4.50

- --fcc-editable-region-- +--fcc-editable-region--
@@ -70,10 +62,6 @@ tests: ``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -105,6 +93,3 @@ h1, h2, p { } ``` -
- - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md index 4e3a14f43a..5c8e228a47 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-046.md @@ -4,31 +4,23 @@ title: Part 46 challengeType: 0 --- -## Description -
+# --description-- -If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the `p` elements on the left side can only take up `50%` of the space. +If you make the width of the page preview smaller, you will notice at some point, some of the text on the left starts wrapping around to the next line. This is because the width of the `p` elements on the left side can only take up `50%` of the space. Since you know the prices on the right have significantly fewer characters, change the `flavor` class `width` value to be `75%` and then `dessert` class `width` value to be `25%`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -70,10 +62,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -107,6 +95,3 @@ h1, h2, p { --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md index 146f4ba022..1585259f03 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-047.md @@ -4,29 +4,21 @@ title: Part 47 challengeType: 0 --- -## Description -
+# --description-- You will come back to the styling the menu in a few steps, but for now, go ahead add a second `section` element below the first for displaying the desserts offered by the cafe. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -44,7 +36,7 @@ tests:

Est. 2020

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

Coffees

@@ -63,17 +55,13 @@ tests:

Mocha

4.50

- --fcc-editable-region-- +--fcc-editable-region--
``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -105,6 +93,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md index 215e109518..d26ea0ff0c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-048.md @@ -4,29 +4,21 @@ title: Part 48 challengeType: 0 --- -## Description -
+# --description-- Add an `h2` element in the new section add give it the text `Desserts`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -62,20 +54,16 @@ tests:

Mocha

4.50

- --fcc-editable-region-- +--fcc-editable-region--
- --fcc-editable-region-- +--fcc-editable-region-- ``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -107,6 +95,3 @@ h1, h2, p { } ``` -
- - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-049.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-049.md index 022c0e1e2d..557c187d76 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-049.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-049.md @@ -4,29 +4,21 @@ title: Part 49 challengeType: 0 --- -## Description -
+# --description-- Add an empty `article` element under the `Desserts` heading. Give it a `class` attribute with the value `item`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -63,9 +55,9 @@ tests:
- --fcc-editable-region-- +--fcc-editable-region--

Desserts

- --fcc-editable-region-- +--fcc-editable-region--
@@ -73,10 +65,6 @@ tests: ``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -108,6 +96,3 @@ h1, h2, p { } ``` -
- - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md index 57e898bdae..c52b41394e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-050.md @@ -4,29 +4,21 @@ title: Part 50 challengeType: 0 --- -## Description -
+# --description-- Nest two `p` elements inside your `article` element. The first one's text should be `Donut`, and the second's text `1.50`. Put both of them on the same line making sure there is no space between them. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -64,10 +56,10 @@ tests:

Desserts

- --fcc-editable-region-- +--fcc-editable-region--
- --fcc-editable-region-- +--fcc-editable-region--
@@ -75,10 +67,6 @@ tests: ``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -110,6 +98,3 @@ h1, h2, p { } ``` -
- - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md index b1150f2169..0fcb7046dd 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-051.md @@ -4,29 +4,21 @@ title: Part 51 challengeType: 0 --- -## Description -
+# --description-- For the two `p` elements you just added, add `dessert` as the value of the first `p` element's `class` attribute and the value `price` as the second `p` elements `class` attribute. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -65,9 +57,9 @@ tests:

Desserts

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

Donut

1.50

- --fcc-editable-region-- +--fcc-editable-region--
@@ -76,10 +68,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -111,6 +99,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md index 259aa68cba..92051899f2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-052.md @@ -4,31 +4,23 @@ title: Part 52 challengeType: 0 --- -## Description -
+# --description-- Something does not look right. You added the correct `class` attribute value to the `p` element with `Donunt` as its text, but you have not defined a selector for it. Since the `flavor` class selector already has the properties you want, just add the `dessert` class name to it. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -76,10 +68,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -113,6 +101,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md index dea095609a..39b215631f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-053.md @@ -4,8 +4,7 @@ title: Part 53 challengeType: 0 --- -## Description -
+# --description-- Below the dessert you just added, add the rest of the desserts and prices using three more `article` elements, each with two nested `p` elements. Each element should have the correct dessert and price text, and all of them should have the correct classes. @@ -15,24 +14,17 @@ Cheesecake 3.00 Cinammon Roll 2.50 ``` -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -70,11 +62,11 @@ tests:

Desserts

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

Donut

1.50

- --fcc-editable-region-- +--fcc-editable-region--
@@ -82,10 +74,6 @@ tests: ``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -117,6 +105,3 @@ h1, h2, p { } ``` -
- - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md index 0720085ced..d0cc8cfd3f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-054.md @@ -4,31 +4,23 @@ title: Part 54 challengeType: 0 --- -## Description -
+# --description-- Something does not look right. You added the correct `class` attribute to the `p` elements with dessert names, but you have not defined a selector for it. Since the `flavor` class selector already has the properties you want, just add the `dessert` class to it. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -85,10 +77,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -122,6 +110,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-055.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-055.md index 7630e5ea56..1468d366df 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-055.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-055.md @@ -4,31 +4,23 @@ title: Part 55 challengeType: 0 --- -## Description -
+# --description-- You can give your menu some space between the content and the sides with various `padding` properties. Give the `menu` class a `padding-left` and a `padding-right` with the same value `20px`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -85,10 +77,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -122,6 +110,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md index 7a468bca1f..0e63ec8fd1 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-056.md @@ -4,29 +4,21 @@ title: Part 56 challengeType: 0 --- -## Description -
+# --description-- That looks better. Now try to add the same `20px` padding to the top and bottom of the menu. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -83,10 +75,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -122,6 +110,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md index 29e1f0aa5f..1cca83befb 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-057.md @@ -4,29 +4,21 @@ title: Part 57 challengeType: 0 --- -## Description -
+# --description-- Since all 4 sides of the menu have the same internal spacing, go ahead and delete the four properties and use a single `padding` property with the value `20px`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -83,10 +75,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -124,6 +112,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-058.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-058.md index ac8a8d58ff..48cb8b058b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-058.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-058.md @@ -4,31 +4,23 @@ title: Part 58 challengeType: 0 --- -## Description -
+# --description-- The current width of the menu will always take of 80% of the `body` element's width. On a very wide screen, the coffee and dessert appear far apart from their prices. Add a `max-width` property to the `menu` class with a value of `500px` to prevent it from growing too wide. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -85,10 +77,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -123,6 +111,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-059.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-059.md index ab41b61c26..b58b28c06c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-059.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-059.md @@ -4,31 +4,23 @@ title: Part 59 challengeType: 0 --- -## Description -
+# --description-- You can change the `font-family` of text, to make it look different the the default font of your browser. Each browser has some common fonts available to it. -Change all the text in your `body`, by adding a `font-family` property with the value `sans-serif`. This is a fairly common font that is very readable. +Change all the text in your `body`, by adding a `font-family` property with the value `sans-serif`. This is a fairly common font that is very readable. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -85,10 +77,6 @@ tests: ``` -
- -
- ```css --fcc-editable-region-- body { @@ -124,6 +112,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md index 436cf32bdd..bd4594c036 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-060.md @@ -4,31 +4,23 @@ title: Part 60 challengeType: 0 --- -## Description -
+# --description-- It is a bit boring for all the text to have the same `font-family`. You can still have the majority of the text `sans-serif` and make just the `h1` and `h2` elements different using a different selector. Style both the `h1` and the `h2` elements so that only these elements' text use `Impact` font. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -85,10 +77,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -127,6 +115,3 @@ h1, h2, p { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md index 996f1fa327..58af113c0c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-061.md @@ -4,31 +4,23 @@ title: Part 61 challengeType: 0 --- -## Description -
+# --description-- -You can add a fallback value for the font-family by adding another font name separated by a comma. This second font would be used in case the browser does not have the font built-in to it. +You can add a fallback value for the font-family by adding another font name separated by a comma. This second font would be used in case the browser does not have the font built-in to it. -Add the fallback font `serif` after the `Impact` font. +Add the fallback font `serif` after the `Impact` font. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -85,10 +77,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -129,6 +117,3 @@ h1, h2 { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md index de652a533c..7795b28445 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-062.md @@ -4,29 +4,21 @@ title: Part 62 challengeType: 0 --- -## Description -
+# --description-- Make the `Est. 2020` text italicized by creating an `established` class selector and giving it the `font-style` property with the value `italic`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -83,10 +75,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -129,6 +117,3 @@ h1, h2 { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md index a9b28bc442..9cff6a2286 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-063.md @@ -4,29 +4,21 @@ title: Part 63 challengeType: 0 --- -## Description -
+# --description-- Now apply the `established` class to the `Est. 2020` text. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -39,12 +31,12 @@ tests:
- --fcc-editable-region-- +--fcc-editable-region--

CAMPER CAFE

Est. 2020

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

Coffees

@@ -85,10 +77,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -131,6 +119,3 @@ h1, h2 { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md index b5673bf2d3..9292f31199 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-064.md @@ -4,31 +4,23 @@ title: Part 64 challengeType: 0 --- -## Description -
+# --description-- The `h1` and `h2` elements' text are set by default values of the user's browser. -Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`. +Add two new type selectors (`h1` and `h2`). Use the `font-size` property for both, but use the value `40px` for the `h1` and `30px` for the `h2`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -85,10 +77,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -135,6 +123,3 @@ h1, h2 { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md index 56c931006b..0c7920d146 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-065.md @@ -4,29 +4,21 @@ title: Part 65 challengeType: 0 --- -## Description -
+# --description-- Add a `footer` element below the `main` element, where you can some additional information. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -43,7 +35,7 @@ tests:

CAMPER CAFE

Est. 2020

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

Coffees

@@ -79,16 +71,12 @@ tests:
- --fcc-editable-region-- +--fcc-editable-region--
``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -139,6 +127,3 @@ h1, h2 { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md index ffe8088038..b438bff76d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-066.md @@ -4,30 +4,21 @@ title: Part 66 challengeType: 0 --- -## Description -
+# --description-- Inside the `footer`, add a `p` element. Then, nest an anchor (`a`) element in the `p` that links to `https://www.freecodecamp.org` and has the text `Visit our website`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- - -
+## --seed-contents-- ```html @@ -79,19 +70,15 @@ tests:
- --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region-- ``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -142,6 +129,3 @@ h1, h2 { } ``` -
- - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md index 2e22f1242b..7b5c554f28 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-067.md @@ -4,29 +4,21 @@ title: Part 67 challengeType: 0 --- -## Description -
+# --description-- Add a second `p` element below the one with the link and give it the text `123 freeCodeCamp Drive`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -79,21 +71,17 @@ tests:
``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -144,6 +132,3 @@ h1, h2 { } ``` -
- - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md index 1f0589acec..b9b385398c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-068.md @@ -4,31 +4,23 @@ title: Part 68 challengeType: 0 --- -## Description -
+# --description-- You can use an `hr` element to display a divider between sections of different content. First, add an `hr` element between the first `header` element and the `main` element. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -41,7 +33,7 @@ tests:
- --fcc-editable-region-- +--fcc-editable-region--

CAMPER CAFE

Est. 2020

@@ -81,7 +73,7 @@ tests:
- --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region-- ``` - - -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -152,6 +140,3 @@ h1, h2 { } ``` -
- - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md index 5ea060ac63..f942d640ef 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-074.md @@ -4,29 +4,21 @@ title: Part 74 challengeType: 0 --- -## Description -
+# --description-- To create a little more room around the menu, add `20px` of space on the inside of the `body` element by using the `padding` property. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -91,10 +83,6 @@ tests: ``` -
- -
- ```css --fcc-editable-region-- body { @@ -153,6 +141,3 @@ h1, h2 { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md index c3d8cf8078..92007c94d8 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-075.md @@ -4,31 +4,23 @@ title: Part 75 challengeType: 0 --- -## Description -
+# --description-- Focusing on the menu items and prices, there is a fairly large gap between each line. Target all the `p` elements nested in elements with the `class` named `item` and set their top and bottom margin to be `5px`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -93,10 +85,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -156,6 +144,3 @@ h1, h2 { --fcc-editable-region-- ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md index 55c018acb2..d8e292bd08 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-076.md @@ -4,29 +4,21 @@ title: Part 76 challengeType: 0 --- -## Description -
+# --description-- Using the same style selector in the previous step, make the font size of the items and prices larger by using a value of `18px`. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -91,10 +83,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -156,6 +144,3 @@ h1, h2 { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md index f30fa3bb1c..cf0e81ebbc 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-077.md @@ -4,31 +4,23 @@ title: Part 77 challengeType: 0 --- -## Description -
+# --description-- Changing the `bottom-margin` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffees` heading. Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -93,10 +85,6 @@ tests: ``` -
- -
- ```css body { background-image: url(https://tinyurl.com/coffee-beans-fcc); @@ -161,6 +149,3 @@ h1, h2 { } ``` -
- -
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md index 08269a219d..02725ef54d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css-cafe-menu/part-078.md @@ -4,29 +4,21 @@ title: Part 78 challengeType: 0 --- -## Description -
+# --description-- Now add the `bottom-line` class to the second `hr` element so the styling is applied. -
+# --hints-- -## Tests -
+Test 1 -```yml -tests: - - text: Test 1 - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html @@ -79,9 +71,9 @@ tests:
- --fcc-editable-region-- +--fcc-editable-region--
- --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region-- ``` - - diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-065.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-065.md index 15a4866e8a..6ceee3dec0 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-065.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-065.md @@ -4,46 +4,49 @@ title: Part 65 challengeType: 0 --- -## Description -
+# --description-- The `title` element determines what browsers show in the title bar or tab for the page. Add a `title` element within the `head` element. Its text should be `CatPhotoApp`. -
+# --hints-- -## Tests -
- -```yml -tests: - - text: You have either deleted the `head` element or it is missing an opening tag or closing tag. - testString: assert( code.match(/\/) && code.match(/\<\/head\>/) ); - - text: Your `title` element should be nested in the `head` element. Make sure to added an opening tag and closing tag for the `title` element. - testString: | - const noSpaces = code.replace(/\s/g, ''); - assert( noSpaces.match(/\\.*\<\/title\>\<\/head\>/) ); - - text: Your `title` element should have a closing tag. Closing tags have a `/` just after the `<` character. - testString: | - assert( code.match(/\<\/title\>/) ); - - text: Your `title` element's text should be `CatPhotoApp`. You have either omitted the text or have a typo. - testString: assert( document.title && document.title.toLowerCase() === 'catphotoapp' ); +You have either deleted the `head` element or it is missing an opening tag or closing tag. +```js +assert(code.match(/\/) && code.match(/\<\/head\>/)); ``` -
+Your `title` element should be nested in the `head` element. Make sure to added an opening tag and closing tag for the `title` element. -## Challenge Seed -
-
+```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(/\\.*\<\/title\>\<\/head\>/)); +``` + +Your `title` element should have a closing tag. Closing tags have a `/` just after the `<` character. + +```js +assert(code.match(/\<\/title\>/)); +``` + +Your `title` element's text should be `CatPhotoApp`. You have either omitted the text or have a typo. + +```js +assert(document.title && document.title.toLowerCase() === 'catphotoapp'); +``` + +# --seed-- + +## --seed-contents-- ```html - --fcc-editable-region-- +--fcc-editable-region-- - --fcc-editable-region-- +--fcc-editable-region--

CatPhotoApp

@@ -104,5 +107,3 @@ tests: ``` -
-
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-066.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-066.md index c92070105a..f184e2ea88 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-066.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-066.md @@ -4,36 +4,36 @@ title: Part 66 challengeType: 0 --- -## Description -
+# --description-- Notice that the entire contents of the page are nested within an `html` element. All other elements must be descendants of this `html` element. Add the `lang` attribute with the value `en` to the opening `html` tag to specify that the language of the page is English. -
+# --hints-- -## Tests -
- -```yml -tests: - - text: You have either deleted the `html` element or it is missing an opening tag or closing tag. - testString: assert( code.match(/\/) && code.match(/\<\/html\>/) ); - - text: Your `html` element should have a `lang` attribute with the value `en`. You may have omitted the attribute/value, or have a typo. - testString: | - const extraSpacesRemoved = code.replace(/\s+/g, ' '); - assert( extraSpacesRemoved.match(/\/) ); - - text: Although you have set the `html` element's `lang` attribute to `en`, it is recommended to always surround the value of an attribute with quotation marks. - testString: assert( !/\<\s*html\s+lang\s*=en/i.test(code) ); +You have either deleted the `html` element or it is missing an opening tag or closing tag. +```js +assert(code.match(/\/) && code.match(/\<\/html\>/)); ``` -
+Your `html` element should have a `lang` attribute with the value `en`. You may have omitted the attribute/value, or have a typo. -## Challenge Seed -
-
+```js +const extraSpacesRemoved = code.replace(/\s+/g, ' '); +assert(extraSpacesRemoved.match(/\/)); +``` + +Although you have set the `html` element's `lang` attribute to `en`, it is recommended to always surround the value of an attribute with quotation marks. + +```js +assert(!/\<\s*html\s+lang\s*=en/i.test(code)); +``` + +# --seed-- + +## --seed-contents-- ```html --fcc-editable-region-- @@ -102,5 +102,3 @@ tests: ``` -
-
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-067.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-067.md index caf68cc39f..fc670b963c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-067.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-067.md @@ -4,34 +4,30 @@ title: Part 67 challengeType: 0 --- -## Description -
+# --description-- All pages should begin with ``. This special string is known as a declaration and ensures the browser tries to meet industry-wide specifications. To complete this project, add this declaration as the first line of the code. -
+# --hints-- -## Tests -
- -```yml -tests: - - text: Your code should begin with the declaration ``. You may have omitted the declaration, have a typo, or it is not the first line of code. - testString: assert( code.match(/\<\s*!DOCTYPE\s+html\s*\>/) ); - - text: Your `` must be located at the top of the document. - testString: | - const noSpaces = code.replace(/\s/g, ''); - assert( noSpaces.match(/^\<\!DOCTYPEhtml\>\`. You may have omitted the declaration, have a typo, or it is not the first line of code. +```js +assert(code.match(/\<\s*!DOCTYPE\s+html\s*\>/)); ``` -
+Your `` must be located at the top of the document. -## Challenge Seed -
-
+```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\ ``` -
-
- -## Solution -
+# --solutions-- ```html @@ -171,5 +163,3 @@ tests: ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md index bb99a8c204..c0dae78d20 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md @@ -6,45 +6,63 @@ videoUrl: 'https://scrimba.com/p/pVaDAv/c9W7MhM' forumTopicId: 301100 --- -## Description -
-To the right is the tweet embed that will be used as the practical example. Some of the elements would look better with a different layout. The last challenge demonstrated display: flex. Here you'll add it to several components in the tweet embed to start adjusting their positioning. -
+# --description-- -## Instructions -
-Add the CSS property display: flex to all of the following items - note that the selectors are already set up in the CSS: -header, the header's .profile-name, the header's .follow-btn, the header's h3 and h4, the footer, and the footer's .stats. -
+To the right is the tweet embed that will be used as the practical example. Some of the elements would look better with a different layout. The last challenge demonstrated `display: flex`. Here you'll add it to several components in the tweet embed to start adjusting their positioning. -## Tests -
+# --instructions-- -```yml -tests: - - text: Your header should have a display property set to flex. - testString: assert($('header').css('display') == 'flex'); - - text: Your footer should have a display property set to flex. - testString: assert($('footer').css('display') == 'flex'); - - text: Your h3 should have a display property set to flex. - testString: assert($('h3').css('display') == 'flex'); - - text: Your h4 should have a display property set to flex. - testString: assert($('h4').css('display') == 'flex'); - - text: Your .profile-name should have a display property set to flex. - testString: assert($('.profile-name').css('display') == 'flex'); - - text: Your .follow-btn should have a display property set to flex. - testString: assert($('.follow-btn').css('display') == 'flex'); - - text: Your .stats should have a display property set to flex. - testString: assert($('.stats').css('display') == 'flex'); +Add the CSS property `display: flex` to all of the following items - note that the selectors are already set up in the CSS: +`header`, the header's `.profile-name`, the header's `.follow-btn`, the header's `h3` and `h4`, the `footer`, and the footer's `.stats`. + +# --hints-- + +Your `header` should have a `display` property set to `flex`. + +```js +assert($('header').css('display') == 'flex'); ``` -
+Your `footer` should have a `display` property set to `flex`. -## Challenge Seed -
+```js +assert($('footer').css('display') == 'flex'); +``` -
+Your `h3` should have a `display` property set to `flex`. + +```js +assert($('h3').css('display') == 'flex'); +``` + +Your `h4` should have a `display` property set to `flex`. + +```js +assert($('h4').css('display') == 'flex'); +``` + +Your `.profile-name` should have a `display` property set to `flex`. + +```js +assert($('.profile-name').css('display') == 'flex'); +``` + +Your `.follow-btn` should have a `display` property set to `flex`. + +```js +assert($('.follow-btn').css('display') == 'flex'); +``` + +Your `.stats` should have a `display` property set to `flex`. + +```js +assert($('.stats').css('display') == 'flex'); +``` + +# --seed-- + +## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md index 00c8a9bf49..ec67d916c6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md @@ -6,32 +6,29 @@ videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv' forumTopicId: 301118 --- -## Description -
-grid-gap is a shorthand property for grid-row-gap and grid-column-gap from the previous two challenges that's more convenient to use. If grid-gap has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns. -
+# --description-- -## Instructions -
-Use grid-gap to introduce a 10px gap between the rows and 20px gap between the columns. -
+`grid-gap` is a shorthand property for `grid-row-gap` and `grid-column-gap` from the previous two challenges that's more convenient to use. If `grid-gap` has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns. -## Tests -
+# --instructions-- -```yml -tests: - - text: container class should have a grid-gap property that introduces 10px gap between the rows and 20px gap between the columns. - testString: assert(code.match(/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi)); +Use `grid-gap` to introduce a `10px` gap between the rows and `20px` gap between the columns. +# --hints-- + +`container` class should have a `grid-gap` property that introduces `10px` gap between the rows and `20px` gap between the columns. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi + ) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md index e8f9993bdc..3cb6763068 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md @@ -6,32 +6,29 @@ videoUrl: 'https://scrimba.com/p/pByETK/cbp9Pua' forumTopicId: 301119 --- -## Description -
-The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the grid-template-rows property in the same way you used grid-template-columns in previous challenge. -
+# --description-- -## Instructions -
-Add two rows to the grid that are 50px tall each. -
+The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the `grid-template-rows` property in the same way you used `grid-template-columns` in previous challenge. -## Tests -
+# --instructions-- -```yml -tests: - - text: container class should have a grid-template-rows property with two units of 50px. - testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi)); +Add two rows to the grid that are `50px` tall each. +# --hints-- + +`container` class should have a `grid-template-rows` property with two units of `50px`. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi + ) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md index f4245979c9..9ba38bb937 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md @@ -6,32 +6,29 @@ videoUrl: 'https://scrimba.com/p/pByETK/cJbpECn' forumTopicId: 301120 --- -## Description -
-Sometimes you want all the items in your CSS Grid to share the same alignment. You can use the previously learned properties and align them individually, or you can align them all at once horizontally by using justify-items on your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will move all the items in our grid to the desired alignment. -
+# --description-- + +Sometimes you want all the items in your CSS Grid to share the same alignment. You can use the previously learned properties and align them individually, or you can align them all at once horizontally by using `justify-items` on your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will move **all** the items in our grid to the desired alignment. + +# --instructions-- -## Instructions -
Use this property to center all our items horizontally. -
-## Tests -
+# --hints-- -```yml -tests: - - text: container class should have a justify-items property that has the value of center. - testString: assert(code.match(/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi)); +`container` class should have a `justify-items` property that has the value of `center`. +```js +assert( + code.match( + /.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi + ) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md index 23197a18f9..c346c5dec4 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md @@ -6,32 +6,27 @@ videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv' forumTopicId: 301121 --- -## Description -
-Using the align-items property on a grid container will set the vertical alignment for all the items in our grid. -
+# --description-- + +Using the `align-items` property on a grid container will set the vertical alignment for all the items in our grid. + +# --instructions-- -## Instructions -
Use it now to move all the items to the end of each cell. -
-## Tests -
+# --hints-- -```yml -tests: - - text: container class should have a align-items property that has the value of end. - testString: assert(code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi)); +`container` class should have a `align-items` property that has the value of `end`. +```js +assert( + code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md index 3edeeb6794..1842b32b38 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md @@ -6,35 +6,33 @@ videoUrl: 'https://scrimba.com/p/pByETK/cJbpKHq' forumTopicId: 301122 --- -## Description -
-In CSS Grid, the content of each item is located in a box which is referred to as a cell. You can align the content's position within its cell horizontally using the justify-self property on a grid item. By default, this property has a value of stretch, which will make the content fill the whole width of the cell. This CSS Grid property accepts other values as well: -start: aligns the content at the left of the cell, -center: aligns the content in the center of the cell, -end: aligns the content at the right of the cell. -
+# --description-- -## Instructions -
-Use the justify-self property to center the item with the class item2. -
+In CSS Grid, the content of each item is located in a box which is referred to as a cell. You can align the content's position within its cell horizontally using the `justify-self` property on a grid item. By default, this property has a value of `stretch`, which will make the content fill the whole width of the cell. This CSS Grid property accepts other values as well: -## Tests -
+`start`: aligns the content at the left of the cell, -```yml -tests: - - text: item2 class should have a justify-self property that has the value of center. - testString: assert(code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi)); +`center`: aligns the content in the center of the cell, +`end`: aligns the content at the right of the cell. + +# --instructions-- + +Use the `justify-self` property to center the item with the class `item2`. + +# --hints-- + +`item2` class should have a `justify-self` property that has the value of `center`. + +```js +assert( + code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md index 713a8ccc6a..d006df2caf 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md @@ -6,32 +6,25 @@ videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz' forumTopicId: 301123 --- -## Description -
-Just as you can align an item horizontally, there's a way to align an item vertically as well. To do this, you use the align-self property on an item. This property accepts all of the same values as justify-self from the last challenge. -
+# --description-- -## Instructions -
-Align the item with the class item3 vertically at the end. -
+Just as you can align an item horizontally, there's a way to align an item vertically as well. To do this, you use the `align-self` property on an item. This property accepts all of the same values as `justify-self` from the last challenge. -## Tests -
+# --instructions-- -```yml -tests: - - text: item3 class should have a align-self property that has the value of end. - testString: assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi)); +Align the item with the class `item3` vertically at the `end`. +# --hints-- + +`item3` class should have a `align-self` property that has the value of `end`. + +```js +assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi)); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md index c31d9b1f05..06298ca562 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md @@ -6,38 +6,35 @@ videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD' forumTopicId: 301124 --- -## Description -
-So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a gap in between the columns. To add a gap between the columns, use the grid-column-gap property like this: +# --description-- + +So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a gap in between the columns. To add a gap between the columns, use the `grid-column-gap` property like this: ```css grid-column-gap: 10px; ``` This creates 10px of empty space between all of our columns. -
-## Instructions -
-Give the columns in the grid a 20px gap. -
+# --instructions-- -## Tests -
+Give the columns in the grid a `20px` gap. -```yml -tests: - - text: container class should have a grid-column-gap property that has the value of 20px. - testString: assert(code.match(/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi)); +# --hints-- +`container` class should have a `grid-column-gap` property that has the value of `20px`. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi + ) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md index 2b88c19550..133593374c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md @@ -6,32 +6,27 @@ videoUrl: 'https://scrimba.com/p/pByETK/cPbJ2Cv' forumTopicId: 301125 --- -## Description -
-You can add a gap in between the rows of a grid using grid-row-gap in the same way that you added a gap in between columns in the previous challenge. -
+# --description-- -## Instructions -
-Create a gap for the rows that is 5px tall. -
+You can add a gap in between the rows of a grid using `grid-row-gap` in the same way that you added a gap in between columns in the previous challenge. -## Tests -
+# --instructions-- -```yml -tests: - - text: container class should have a grid-row-gap property that has the value of 5px. - testString: assert(code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi)); +Create a gap for the rows that is `5px` tall. +# --hints-- + +`container` class should have a `grid-row-gap` property that has the value of `5px`. + +```js +assert( + code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md index c22f9e24a2..06e3812191 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md @@ -6,39 +6,35 @@ videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW' forumTopicId: 301126 --- -## Description -
-The repeat function comes with an option called auto-fill. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining auto-fill with minmax, like this: +# --description-- + +The repeat function comes with an option called auto-fill. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining `auto-fill` with `minmax`, like this: ```css repeat(auto-fill, minmax(60px, 1fr)); ``` -When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one. -Note: If your container can't fit all your items on one row, it will move them down to a new one. -
+When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one. **Note:** If your container can't fit all your items on one row, it will move them down to a new one. -## Instructions -
-In the first grid, use auto-fill with repeat to fill the grid with columns that have a minimum width of 60px and maximum of 1fr. Then resize the preview to see auto-fill in action. -
+# --instructions-- -## Tests -
+In the first grid, use `auto-fill` with `repeat` to fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. Then resize the preview to see auto-fill in action. -```yml -tests: - - text: container class should have a grid-template-columns property with repeat and auto-fill that will fill the grid with columns that have a minimum width of 60px and maximum of 1fr. - testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi)); +# --hints-- +`container` class should have a `grid-template-columns` property with `repeat` and `auto-fill` that will fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi + ) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.md index b2c5ea66a1..39656e2f36 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-grids-within-grids.md @@ -5,35 +5,37 @@ challengeType: 0 forumTopicId: 301128 --- -## Description -
-Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you have a grid within a grid. -For example, by setting the display and grid-template-columns properties of the element with the item3 class, you create a grid within your grid. -
+# --description-- -## Instructions -
-Turn the element with the item3 class into a grid with two columns with a width of auto and 1fr using display and grid-template-columns. -
+Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you have a grid within a grid. -## Tests -
+For example, by setting the `display` and `grid-template-columns` properties of the element with the `item3` class, you create a grid within your grid. -```yml -tests: - - text: item3 class should have a grid-template-columns property with auto and 1fr as values. - testString: assert(code.match(/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi)); - - text: item3 class should have a display property with the value of grid. - testString: assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi)); +# --instructions-- +Turn the element with the `item3` class into a grid with two columns with a width of `auto` and `1fr` using `display` and `grid-template-columns`. + +# --hints-- + +`item3` class should have a `grid-template-columns` property with `auto` and `1fr` as values. + +```js +assert( + code.match( + /.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi + ) +); ``` -
+`item3` class should have a `display` property with the value of `grid`. -## Challenge Seed -
+```js +assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi)); +``` -
+# --seed-- + +## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.md index 44bb1b5cac..51f0b54d35 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.md @@ -6,33 +6,27 @@ videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4' forumTopicId: 301129 --- -## Description -
-Turn any HTML element into a grid container by setting its display property to grid. This gives you the ability to use all the other properties associated with CSS Grid. -Note: In CSS Grid, the parent element is referred to as the container and its children are called items. -
+# --description-- -## Instructions -
-Change the display of the div with the container class to grid. -
+Turn any HTML element into a grid container by setting its `display` property to `grid`. This gives you the ability to use all the other properties associated with CSS Grid. -## Tests -
+**Note:** In CSS Grid, the parent element is referred to as the container and its children are called items. -```yml -tests: - - text: container class should have a display property with a value of grid. - testString: assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi)); +# --instructions-- +Change the display of the div with the `container` class to `grid`. + +# --hints-- + +`container` class should have a `display` property with a value of `grid`. + +```js +assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi)); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md index f8a7127713..cf17cdc93b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md @@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy' forumTopicId: 301130 --- -## Description -
-You can group cells of your grid together into an area and give the area a custom name. Do this by using grid-template-areas on the container like this: +# --description-- + +You can group cells of your grid together into an area and give the area a custom name. Do this by using `grid-template-areas` on the container like this: ```css grid-template-areas: @@ -17,32 +17,29 @@ grid-template-areas: "footer footer footer"; ``` -The code above merges the top three cells together into an area named header, the bottom three cells into a footer area, and it makes two areas in the middle row; advert and content. -Note: Every word in the code represents a cell and every pair of quotation marks represent a row. -In addition to custom labels, you can use a period (.) to designate an empty cell in the grid. -
+The code above merges the top three cells together into an area named `header`, the bottom three cells into a `footer` area, and it makes two areas in the middle row; `advert` and `content`. **Note:** Every word in the code represents a cell and every pair of quotation marks represent a row. In addition to custom labels, you can use a period (`.`) to designate an empty cell in the grid. -## Instructions -
-Place the area template so that the cell labeled advert becomes an empty cell. -
+# --instructions-- -## Tests -
+Place the area template so that the cell labeled `advert` becomes an empty cell. -```yml -tests: - - text: container class should have a grid-template-areas property similar to the preview but has . instead of the advert area. - testString: assert(__helpers.removeCssComments(code).match(/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi)); +# --hints-- +`container` class should have a `grid-template-areas` property similar to the preview but has `.` instead of the `advert` area. + +```js +assert( + __helpers + .removeCssComments(code) + .match( + /.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?.\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi + ) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md index 60be806fca..4ef887b9a7 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md @@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV' forumTopicId: 301132 --- -## Description -
-After creating an area's template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the grid-area property on an item like this: +# --description-- + +After creating an area's template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the `grid-area` property on an item like this: ```css .item1 { @@ -16,30 +16,27 @@ After creating an area's template for your grid container, as shown in the previ } ``` -This lets the grid know that you want the item1 class to go in the area named header. In this case, the item will use the entire top row because that whole row is named as the header area. -
+This lets the grid know that you want the `item1` class to go in the area named `header`. In this case, the item will use the entire top row because that whole row is named as the header area. -## Instructions -
-Place an element with the item5 class in the footer area using the grid-area property. -
+# --instructions-- -## Tests -
+Place an element with the `item5` class in the `footer` area using the `grid-area` property. -```yml -tests: - - text: item5 class should have a grid-area property that has the value of footer. - testString: assert(__helpers.removeCssComments(code).match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi)); +# --hints-- +`item5` class should have a `grid-area` property that has the value of `footer`. + +```js +assert( + __helpers + .removeCssComments(code) + .match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md index d1c7eef61d..cc61b7f348 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md @@ -6,10 +6,12 @@ videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR' forumTopicId: 301133 --- -## Description -
-When you used grid-template-columns and grid-template-rows to define the structure of a grid, you entered a value for each row or column you created. -Let's say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the repeat function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat. +# --description-- + +When you used `grid-template-columns` and `grid-template-rows` to define the structure of a grid, you entered a value for each row or column you created. + +Let's say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the `repeat` function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat. + Here's an example that would create the 100 row grid, each row at 50px tall. ```css @@ -28,30 +30,27 @@ This translates to: grid-template-columns: 1fr 50px 1fr 50px 20px; ``` -Note: The 1fr 50px is repeated twice followed by 20px. -
+**Note:** The `1fr 50px` is repeated twice followed by 20px. -## Instructions -
-Use repeat to remove repetition from the grid-template-columns property. -
+# --instructions-- -## Tests -
+Use `repeat` to remove repetition from the `grid-template-columns` property. -```yml -tests: - - text: container class should have a grid-template-columns property that is set to repeat 3 columns with the width of 1fr. - testString: assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi)); +# --hints-- +`container` class should have a `grid-template-columns` property that is set to repeat 3 columns with the width of `1fr`. + +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi + ) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md index 0e4b23a71c..ca115a3968 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md @@ -6,12 +6,16 @@ videoUrl: 'https://scrimba.com/p/pByETK/cvE8phd' forumTopicId: 301134 --- -## Description -
-You can use absolute and relative units like px and em in CSS Grid to define the size of rows and columns. You can use these as well: -fr: sets the column or row to a fraction of the available space, -auto: sets the column or row to the width or height of its content automatically, -%: adjusts the column or row to the percent width of its container. +# --description-- + +You can use absolute and relative units like `px` and `em` in CSS Grid to define the size of rows and columns. You can use these as well: + +`fr`: sets the column or row to a fraction of the available space, + +`auto`: sets the column or row to the width or height of its content automatically, + +`%`: adjusts the column or row to the percent width of its container. + Here's the code that generates the output in the preview: ```css @@ -19,29 +23,26 @@ grid-template-columns: auto 50px 10% 2fr 1fr; ``` This snippet creates five columns. The first column is as wide as its content, the second column is 50px, the third column is 10% of its container, and for the last two columns; the remaining space is divided into three sections, two are allocated for the fourth column, and one for the fifth. -
-## Instructions -
+# --instructions-- + Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr. -
-## Tests -
+# --hints-- -```yml -tests: - - text: 'container class should have a grid-template-columns property that has three columns with the following widths: 1fr, 100px, and 2fr.' - testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi));' +`container` class should have a `grid-template-columns` property that has three columns with the following widths: `1fr, 100px, and 2fr`. +```js +assert( + code.match( + /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi + ) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md index 63426e603e..b1fef82f74 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md @@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK' forumTopicId: 301135 --- -## Description -
-The grid-area property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this: +# --description-- + +The `grid-area` property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this: ```css item1 { grid-area: 1/1/2/4; } @@ -21,29 +21,26 @@ grid-area: horizontal line to start at / vertical line to start at / horizontal ``` So the item in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4. -
-## Instructions -
-Using the grid-area property, place the element with item5 class between the third and fourth horizontal lines and between the first and fourth vertical lines. -
+# --instructions-- -## Tests -
+Using the `grid-area` property, place the element with `item5` class between the third and fourth horizontal lines and between the first and fourth vertical lines. -```yml -tests: - - text: The item5 class should have a grid-area property to make it fill the whole area between the third and fourth horizontal lines, and first and fourth vertical lines. - testString: assert(code.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi)); +# --hints-- +The `item5` class should have a `grid-area` property to make it fill the whole area between the third and fourth horizontal lines, and first and fourth vertical lines. + +```js +assert( + code.match( + /.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi + ) +); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```html ``` - -
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md index 865ec3d707..de585244ea 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md @@ -6,13 +6,18 @@ videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr' forumTopicId: 301136 --- -## Description -
-Up to this point, all the properties that have been discussed are for grid containers. The grid-column property is the first one for use on the grid items themselves. +# --description-- + +Up to this point, all the properties that have been discussed are for grid containers. The `grid-column` property is the first one for use on the grid items themselves. + The hypothetical horizontal and vertical lines that create the grid are referred to as lines. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward. -This is what the lines look like for a 3x3 grid: -

column lines

1

2

3

4

row lines

1

2

3

4

-To control the amount of columns an item will consume, you can use the grid-column property in conjunction with the line numbers you want the item to start and stop at. + +This is what the lines look like for a 3x3 grid: + +

column lines

1

2

3

4

row lines

1

2

3

4

+ +To control the amount of columns an item will consume, you can use the `grid-column` property in conjunction with the line numbers you want the item to start and stop at. + Here's an example: ```css @@ -20,37 +25,46 @@ grid-column: 1 / 3; ``` This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns. -
-## Instructions -
-Make the item with the class item5 consume the last two columns of the grid. -
+# --instructions-- -## Tests -
+Make the item with the class `item5` consume the last two columns of the grid. -```yml -tests: - - text: item5 class should have a grid-column property. - testString: assert(__helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-column:.*}/g)); - - text: item5 class should have a grid-column property which results in it consuming the last two columns of the grid. - testString: " - const colStart = getComputedStyle($('.item5')[0]).gridColumnStart; - const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd; - const result = colStart.toString() + colEnd.toString(); - const correctResults = ['24', '2-1', '2span 2', '2span2', 'span 2-1', '-12', 'span 2span 2', 'span 2auto', 'autospan 2']; - assert(correctResults.includes(result)); - " +# --hints-- +`item5` class should have a `grid-column` property. + +```js +assert( + __helpers + .removeWhiteSpace($('style').text()) + .match(/\.item5{.*grid-column:.*}/g) +); ``` -
+`item5` class should have a `grid-column` property which results in it consuming the last two columns of the grid. -## Challenge Seed -
+```js +const colStart = getComputedStyle($('.item5')[0]).gridColumnStart; +const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd; +const result = colStart.toString() + colEnd.toString(); +const correctResults = [ + '24', + '2-1', + '2span 2', + '2span2', + 'span 2-1', + '-12', + 'span 2span 2', + 'span 2auto', + 'autospan 2' +]; +assert(correctResults.includes(result)); +``` -
+# --seed-- + +## --seed-contents-- ```html + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-029.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-029.md index 542adecad8..c7025f880f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-029.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-029.md @@ -4,8 +4,7 @@ title: Part 29 challengeType: 0 --- -## Description -
+# --description-- Arrays can store any data type, including objects. Objects are similar to arrays, except that instead of using indexes to access and modify their data, you access the data in objects through what are called properties. @@ -13,29 +12,90 @@ Inside the `locations` array add an empty object using curly braces. Here is an example of an array named `arr` with an empty object inside: `const arr = [{}];` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert.deepStrictEqual(JSON.stringify(locations), `[{}]`); +See description above for instructions. +```js +assert.deepStrictEqual(JSON.stringify(locations), `[{}]`); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-030.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-030.md index 30acc1099c..435e8d7a8d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-030.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-030.md @@ -4,8 +4,7 @@ title: Part 30 challengeType: 0 --- -## Description -
+# --description-- Inside the object you just added, create a property called `name` with the value of "town square". @@ -19,29 +18,90 @@ const arr = [ ] ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(locations[0].name === 'town square'); +See description above for instructions. +```js +assert(locations[0].name === 'town square'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-031.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-031.md index da536421c4..48015cb4b0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-031.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-031.md @@ -4,8 +4,7 @@ title: Part 31 challengeType: 0 --- -## Description -
+# --description-- After the `name` property put a comma. On the next line add a property named `"button text"` that has a value of an empty array. Since the property name has more than one word, there must be quotes around it. @@ -20,29 +19,90 @@ const arr = [ ] ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert.deepStrictEqual(locations[0]['button text'], []); +See description above for instructions. +```js +assert.deepStrictEqual(locations[0]['button text'], []); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-032.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-032.md index 3cb012542c..dfe9bf3182 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-032.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-032.md @@ -4,36 +4,100 @@ title: Part 32 challengeType: 0 --- -## Description -
+# --description-- -Inside the `"button text"` array, add three string elements. Use the three stings assigned to the buttons inside the `goTown` function. +Inside the `"button text"` array, add three string elements. Use the three stings assigned to the buttons inside the `goTown` function. Here is an example array with three strings: `const arr = ["one", "two", "three"];`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert.deepStrictEqual(locations[0]['button text'], ["Go to store","Go to cave","Fight dragon"]); +See description above for instructions. +```js +assert.deepStrictEqual(locations[0]['button text'], [ + 'Go to store', + 'Go to cave', + 'Fight dragon' +]); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-033.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-033.md index e42e5a56b4..db881e5871 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-033.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-033.md @@ -4,34 +4,98 @@ title: Part 33 challengeType: 0 --- -## Description -
+# --description-- Add another property in the object with the name `"button functions"`. The value should be an array containing the three `onclick` functions from the `goTown` function. It should look like this: `[goStore, goCave, fightDragon]` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert.deepStrictEqual(locations[0]['button functions'], [goStore, goCave, fightDragon]); +See description above for instructions. +```js +assert.deepStrictEqual(locations[0]['button functions'], [ + goStore, + goCave, + fightDragon +]); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-034.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-034.md index d16b0ba894..6735624eb8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-034.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-034.md @@ -4,34 +4,97 @@ title: Part 34 challengeType: 0 --- -## Description -
+# --description-- Add one final property to the object named `text`. The value should be the final text from the `goTown` function. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(locations[0].text === "You are in the town square. You see a sign that says \"Store.\""); +See description above for instructions. +```js +assert( + locations[0].text === + 'You are in the town square. You see a sign that says "Store."' +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-035.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-035.md index 602409a620..d88d0d0795 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-035.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-035.md @@ -4,35 +4,103 @@ title: Part 35 challengeType: 0 --- -## Description -
+# --description-- The `locations` array currently has one element which is an object. Within the array, and after the object's final curly brace, add a comma. On the next line within the array, add another object with all the same properties as the first object. Keep the property names the same on the second object, but change all the property values to the information from the `goStore` function. Also, set the `name` property to `store`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - assert.deepStrictEqual(locations[1], { name: "store", "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], "button functions": [buyHealth, buyWeapon, goTown], text: "You enter the store." }); +See description above for instructions. +```js +assert.deepStrictEqual(locations[1], { + name: 'store', + 'button text': [ + 'Buy 10 health (10 gold)', + 'Buy weapon (30 gold)', + 'Go to town square' + ], + 'button functions': [buyHealth, buyWeapon, goTown], + text: 'You enter the store.' +}); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-036.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-036.md index c4fb187782..b1e33332a8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-036.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-036.md @@ -4,35 +4,110 @@ title: Part 36 challengeType: 0 --- -## Description -
+# --description-- Now we are can consolidate the code inside the `goTown` and `goStore` functions. Copy the code inside the `goTown` function and paste it in the `update` function. Then delete all the code inside the `goTown` and `goStore` functions. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - # testString: assert(goTown.toString() === "function goTown() {}" && goStore.toString() === "function goStore() {}" && update.toString().match(/button1\.innerText\s*\=\s*[\'\"\`]Go to store[\'\"\`]/) && update.toString().match(/button2\.innerText\s*\=\s*[\'\"\`]Go to cave[\'\"\`]/) && update.toString().match(/button3\.innerText\s*\=\s*[\'\"\`]Fight dragon\.?[\'\"\`]/) && update.toString().match(/button1\.onclick\s*\=\s*goStore\;?/) && update.toString().match(/button2\.onclick\s*\=\s*goCave\;?/) && update.toString().match(/button3\.onclick\s*\=\s*fightDragon\;?/) && update.toString().match(/text\.innerText\s*\=\s*[\'\"\`]You are in the town square\. You see a sign that says \\\"[sS]tore\\\"\.?[\'\"\`]/)); - testString: assert((() => { update(); return goTown.toString() === "function goTown() {}" && goStore.toString() === "function goStore() {}" && button1.innerText === "Go to store" && button2.innerText === "Go to cave" && button3.innerText === "Fight dragon" && text.innerText === "You are in the town square. You see a sign that says \"Store\"." && update.toString().match(/button1\.onclick\s*\=\s*goStore\;?/) && update.toString().match(/button2\.onclick\s*\=\s*goCave\;?/) && update.toString().match(/button3\.onclick\s*\=\s*fightDragon\;?/)})()); +See description above for instructions. +```js +assert( + (() => { + update(); + return ( + goTown.toString() === 'function goTown() {}' && + goStore.toString() === 'function goStore() {}' && + button1.innerText === 'Go to store' && + button2.innerText === 'Go to cave' && + button3.innerText === 'Fight dragon' && + text.innerText === + 'You are in the town square. You see a sign that says "Store".' && + update.toString().match(/button1\.onclick\s*\=\s*goStore\;?/) && + update.toString().match(/button2\.onclick\s*\=\s*goCave\;?/) && + update.toString().match(/button3\.onclick\s*\=\s*fightDragon\;?/) + ); + })() +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-037.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-037.md index dcb63cf53f..c101fec18d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-037.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-037.md @@ -4,36 +4,96 @@ title: Part 37 challengeType: 0 --- -## Description -
+# --description-- Instead of assigning the `innerText` and `onClick` properties to specific strings and functions like it does now, the `update` function will use data from the `location` that is passed into it. First, data needs to be passed into the `update` function. Inside the `goTown` function, call the `update` function. Here is how you would call a function named `exampleFunction`: `exampleFunction();` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(goTown.toString().match(/update\(\)/)); +See description above for instructions. +```js +assert(goTown.toString().match(/update\(\)/)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-038.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-038.md index 53e52250aa..ec738afb37 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-038.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-038.md @@ -4,36 +4,96 @@ title: Part 38 challengeType: 0 --- -## Description -
+# --description-- Now change the code you just wrote to call the `update` function so the `locations` array is passed in as an argument. Here is how you would call a function named `exampleFunction` with an argument called `arg`: `exampleFunction(arg);` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(goTown.toString().match(/update\(locations\)/)); +See description above for instructions. +```js +assert(goTown.toString().match(/update\(locations\)/)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-039.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-039.md index 820d3e3c57..f3400fed7f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-039.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-039.md @@ -4,34 +4,94 @@ title: Part 39 challengeType: 0 --- -## Description -
+# --description-- The `locations` array contains two locations: the town square and store. Currently the entire array with both locations is being passed in to the update function. Pass in only the first element of the locations array by adding `[0]` at the end of the name of the array. For example, `exampleFunction(arg[0]);` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(goTown.toString().match(/update\(locations\[0\]\)/)); +See description above for instructions. +```js +assert(goTown.toString().match(/update\(locations\[0\]\)/)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-040.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-040.md index 25992e65f0..865f5b0d81 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-040.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-040.md @@ -4,36 +4,100 @@ title: Part 40 challengeType: 0 --- -## Description -
+# --description-- Now that the `goTown` function calls the `update` function with the first element of the `locations` array, it is time to use that location information to update the `innerText` and `onclick` properties. -Inside the `update` function, change `button1.innerText` to equal `location["button text"]`. That line gets the `"button text"` property of the `location` that was passed into the `update` function`. +Inside the `update` function, change `button1.innerText` to equal `location["button text"]`. That line gets the `"button text"` property of the `location` that was passed into the `update` function\`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(update.toString().match(/button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]/)); +See description above for instructions. +```js +assert( + update + .toString() + .match(/button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]/) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-041.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-041.md index e4ebe018ac..86befa0e04 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-041.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-041.md @@ -4,34 +4,100 @@ title: Part 41 challengeType: 0 --- -## Description -
+# --description-- `location["button text"]` is an array with three elements. Use only the first element of the array by adding `[0]` at the end. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(update.toString().match(/button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[0\]/)); +See description above for instructions. +```js +assert( + update + .toString() + .match( + /button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[0\]/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-042.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-042.md index 632b77c795..963b267e3e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-042.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-042.md @@ -4,34 +4,105 @@ title: Part 42 challengeType: 0 --- -## Description -
+# --description-- Now update the `innerText` of the other two buttons. They should be set to equal the same thing as the first button, except the number inside the brackets should be 1 for the second button and 2 for the third button. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(update.toString().match(/button2\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[1\]/) && update.toString().match(/button3\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[2\]/)); +See description above for instructions. +```js +assert( + update + .toString() + .match( + /button2\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[1\]/ + ) && + update + .toString() + .match( + /button3\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[2\]/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-043.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-043.md index ec9b3530f2..bbc59ef8e3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-043.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-043.md @@ -4,34 +4,110 @@ title: Part 43 challengeType: 0 --- -## Description -
+# --description-- Now update the three `onclick` properties. These will look very similar to the `innerText` properties, except instead of using the `"button text"` part of the `location`, use `"button functions"`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(update.toString().match(/button1\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[0\]/) && update.toString().match(/button2\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[1\]/) && update.toString().match(/button3\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[2\]/)); +See description above for instructions. +```js +assert( + update + .toString() + .match( + /button1\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[0\]/ + ) && + update + .toString() + .match( + /button2\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[1\]/ + ) && + update + .toString() + .match( + /button3\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[2\]/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-044.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-044.md index 5f638d6b87..cfc4d94858 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-044.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-044.md @@ -4,36 +4,96 @@ title: Part 44 challengeType: 0 --- -## Description -
+# --description-- -Finally, update `text.innerText` to equal the `text` from the location object. +Finally, update `text.innerText` to equal the `text` from the location object. So far we have been accessing properties of the location object using bracket notation. This time use dot notation. Here is how to access a `name` property of an object called `obj` using dot notation: `obj.name`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(update.toString().match(/text\.innerText\s*\=\s*location\.text\;?/)); +See description above for instructions. +```js +assert(update.toString().match(/text\.innerText\s*\=\s*location\.text\;?/)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-045.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-045.md index bd0dca2d29..5d9726bd60 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-045.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-045.md @@ -4,34 +4,94 @@ title: Part 45 challengeType: 0 --- -## Description -
+# --description-- Now update the `goStore` function. The code should look just like the code inside the `goTown` function, except the number 0 should be changed to 1. After this step would be a good time to try out the game so far. You should be able to move between the store and the town square. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(goStore.toString().match(/update\(locations\[1\]\)/)); +See description above for instructions. +```js +assert(goStore.toString().match(/update\(locations\[1\]\)/)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-046.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-046.md index c8918a90ae..bc91de7459 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-046.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-046.md @@ -4,37 +4,106 @@ title: Part 46 challengeType: 0 --- -## Description -
+# --description-- -Add a third object in the `locations` array with the same properties as the other two objects. +Add a third object in the `locations` array with the same properties as the other two objects. -Set `name` to "cave". Set the elements in the `"button text"` array to ["Fight slime", "Fight fanged beast", and "Go to town square". Set te elements in the `"button functions"` array to be "fightSlime", "fightBeast", and "goTown". Set the value of the `text` property to "You enter the cave. You see some monsters.". +Set `name` to "cave". Set the elements in the `"button text"` array to \["Fight slime", "Fight fanged beast", and "Go to town square". Set te elements in the `"button functions"` array to be "fightSlime", "fightBeast", and "goTown". Set the value of the `text` property to "You enter the cave. You see some monsters.". -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - assert.deepStrictEqual(locations[2], { name: "cave", "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], "button functions": [fightSlime, fightBeast, goTown], text: "You enter the cave. You see some monsters." }); +See description above for instructions. +```js +assert.deepStrictEqual(locations[2], { + name: 'cave', + 'button text': ['Fight slime', 'Fight fanged beast', 'Go to town square'], + 'button functions': [fightSlime, fightBeast, goTown], + text: 'You enter the cave. You see some monsters.' +}); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-047.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-047.md index c7ccf46b86..b8e67f59e7 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-047.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-047.md @@ -4,34 +4,99 @@ title: Part 47 challengeType: 0 --- -## Description -
+# --description-- Now update the `goCave` function using the pattern from `goTown` and `goCave`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(goCave.toString().match(/update\(locations\[2\]\)\;?/)); +See description above for instructions. +```js +assert(goCave.toString().match(/update\(locations\[2\]\)\;?/)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-048.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-048.md index b3041eb8bd..7edbf5b308 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-048.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-048.md @@ -4,34 +4,94 @@ title: Part 48 challengeType: 0 --- -## Description -
+# --description-- Create two more empty functions: `fightSlime` and `fightBeast`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(typeof fightSlime === 'function' && typeof fightBeast === 'function'); +See description above for instructions. +```js +assert(typeof fightSlime === 'function' && typeof fightBeast === 'function'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-049.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-049.md index f6c1105856..4680824697 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-049.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-049.md @@ -4,37 +4,96 @@ title: Part 49 challengeType: 0 --- -## Description -
+# --description-- -Now that the store and cave locations are complete, we'll code the actions at those locations. Inside the `buyHealth` function, set `gold` to equal `gold` minus 10. +Now that the store and cave locations are complete, we'll code the actions at those locations. Inside the `buyHealth` function, set `gold` to equal `gold` minus 10. -For example here is how you would set set `num` to equal 5 less than `num`: `num = num - 5;`. +For example here is how you would set set `num` to equal 5 less than `num`: `num = num - 5;`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - # testString: assert((() => { buyHealth(); return gold === 40; })()); - testString: buyHealth(), assert(gold === 40); +See description above for instructions. +```js +buyHealth(), assert(gold === 40); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-050.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-050.md index f67c4ef761..68828647a0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-050.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-050.md @@ -4,35 +4,94 @@ title: Part 50 challengeType: 0 --- -## Description -
+# --description-- After gold is subtracted, add ten to health. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - # testString: assert((() => { buyHealth(); return gold === 40 && health === 110 })()); - testString: buyHealth(), assert(gold === 40 && health === 110); +See description above for instructions. +```js +buyHealth(), assert(gold === 40 && health === 110); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-051.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-051.md index 7786be2e58..2b5eb2c8bf 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-051.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-051.md @@ -4,36 +4,99 @@ title: Part 51 challengeType: 0 --- -## Description -
+# --description-- -There is a shorthand way to add or subtract from a variable called compound assignment. The long way to add to a variable is `num = num + 5`. The shorthand way is `num += 5`. It works the same way with subtraction. +There is a shorthand way to add or subtract from a variable called compound assignment. The long way to add to a variable is `num = num + 5`. The shorthand way is `num += 5`. It works the same way with subtraction. Update both lines inside the `buyHealth` function to use compound assignment. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) && buyHealth.toString().match(/health\s*\+\=\s*10\;?/)); +See description above for instructions. +```js +assert( + buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) && + buyHealth.toString().match(/health\s*\+\=\s*10\;?/) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-052.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-052.md index 5a2fa42861..49c19aa985 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-052.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-052.md @@ -4,35 +4,97 @@ title: Part 52 challengeType: 0 --- -## Description -
+# --description-- Now that the gold and health variables have been updated, we need to update the values displayed on the screen. Inside the `buyHealth` function, add the line `goldText.innerText = gold;`. Then use the same pattern to update `healthText`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) && buyHealth.toString().match(/healthText.innerText\s*\=\s*health\;?/)); - # testString: assert((() => { buyHealth(); return goldText.innerText === '40' && healthText.innerText === '110'; })()); +See description above for instructions. +```js +assert( + buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) && + buyHealth.toString().match(/healthText.innerText\s*\=\s*health\;?/) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-053.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-053.md index 76e7661f77..551654fee1 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-053.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-053.md @@ -4,8 +4,7 @@ title: Part 53 challengeType: 0 --- -## Description -
+# --description-- What if the player doesn't have enough gold to buy health? Put all the code in the `buyHealth` function inside an `if` statement. Here is an example of an `if` statement inside a function: @@ -19,30 +18,100 @@ function checkMoney() { Note: For now you should use the word "condition" inside the `if` statement but we'll be changing that next. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - # testString: assert(buyHealth.toString().match(/if\s*\(\s*condition\s*\)\s*\{\s*gold\s*\-\=\s*10\;?\s*health\s*\+\=\s*10\;?\s*goldText\.innerText\s*\=\s*gold\;?\s*healthText\.innerText\s*\=\s*health\;?\s*\}\s*\}/)); - testString: assert(buyHealth.toString().match(/if\s*\(\s*condition\s*\)\s*\{\s*(gold|health|goldText|healthText)/) && buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) && buyHealth.toString().match(/health\s*\+\=\s*10\;?/) && buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) && buyHealth.toString().match(/healthText\.innerText\s*\=\s*health\;?/)); +See description above for instructions. +```js +assert( + buyHealth + .toString() + .match( + /if\s*\(\s*condition\s*\)\s*\{\s*(gold|health|goldText|healthText)/ + ) && + buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) && + buyHealth.toString().match(/health\s*\+\=\s*10\;?/) && + buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) && + buyHealth.toString().match(/healthText\.innerText\s*\=\s*health\;?/) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-054.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-054.md index 06f5b91979..2f2f1660f6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-054.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-054.md @@ -4,10 +4,9 @@ title: Part 54 challengeType: 0 --- -## Description -
+# --description-- -The word "condition" inside the if statement is just a placeholder. Change the condition to check if the amount of gold the player has is greater than or equal to 10. +The word "condition" inside the if statement is just a placeholder. Change the condition to check if the amount of gold the player has is greater than or equal to 10. Here is an `if` statement that checks if `num` is greater than or equal to 5: @@ -17,29 +16,90 @@ if (num >= 5) { } ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(buyHealth.toString().match(/if\s*\(\s*gold\s*\>\=\s*10\s*\)/)); +See description above for instructions. +```js +assert(buyHealth.toString().match(/if\s*\(\s*gold\s*\>\=\s*10\s*\)/)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-055.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-055.md index 0db3480674..2f0d774f0a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-055.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-055.md @@ -4,10 +4,9 @@ title: Part 55 challengeType: 0 --- -## Description -
+# --description-- -Now when a player tries to buy health it will only work if they have enough money. If the player does not have enough money, nothing will happen. Add an `else` statement where you can put code to run if a player dees not have enough money. +Now when a player tries to buy health it will only work if they have enough money. If the player does not have enough money, nothing will happen. Add an `else` statement where you can put code to run if a player dees not have enough money. Here is an example of an empty `else` statement: @@ -18,29 +17,90 @@ if (num >= 5) { } ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(buyHealth.toString().match(/\}\s*else\s*\{\s*\}/)); +See description above for instructions. +```js +assert(buyHealth.toString().match(/\}\s*else\s*\{\s*\}/)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-056.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-056.md index 3372346a87..87d078967d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-056.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-056.md @@ -4,36 +4,96 @@ title: Part 56 challengeType: 0 --- -## Description -
+# --description-- Inside the `else` statement, set `text.innerText` to equal "You do not have enough gold to buy health." -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - # testString: assert(buyHealth.toString().match(/\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy health\.?[\'\"\`]\;?\s*\}/)); - # testString: assert((() => { gold = 5; buyHealth(); return text.innerText === "You do not have enough gold to buy health."; })()); - testString: gold = 5, buyHealth(), assert(text.innerText === "You do not have enough gold to buy health."); +See description above for instructions. +```js +(gold = 5), + buyHealth(), + assert(text.innerText === 'You do not have enough gold to buy health.'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-057.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-057.md index 3b6a0ee2af..1fe72909bf 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-057.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-057.md @@ -4,34 +4,94 @@ title: Part 57 challengeType: 0 --- -## Description -
+# --description-- Before we write the code for the `buyWeapon` function, use `const` to create a `weapons` variable right above the `locations` array. Set it to equal an empty array. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert.deepStrictEqual(weapons, []); +See description above for instructions. +```js +assert.deepStrictEqual(weapons, []); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-058.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-058.md index f0d260b2c4..36296075cc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-058.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-058.md @@ -4,35 +4,99 @@ title: Part 58 challengeType: 0 --- -## Description -
+# --description-- Just like in the `locations` array, all the elements in `weapons` will be objects. Add four objects to the `weapons` array, each with two properties: `name` and `power`. The first should be the `name` "stick" with `power` set to 5. Then, "dagger" with set `power` to 30. Next, "claw hammer" with a `power` of 50. Finally, "sword" with a `power` of 100. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - assert.deepStrictEqual(weapons, [{name: "stick",power: 5},{name: "dagger",power: 30},{name: "claw hammer",power: 50},{name: "sword",power: 100}]); +See description above for instructions. +```js +assert.deepStrictEqual(weapons, [ + { name: 'stick', power: 5 }, + { name: 'dagger', power: 30 }, + { name: 'claw hammer', power: 50 }, + { name: 'sword', power: 100 } +]); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-059.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-059.md index 985a87fa52..d316dfb010 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-059.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-059.md @@ -4,34 +4,94 @@ title: Part 59 challengeType: 0 --- -## Description -
+# --description-- Inside the `buyWeapon` function, add an `if` statement to check if gold is greater than or equal to 30. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(buyWeapon.toString().match(/if\s*\(\s*gold\s*\>\=\s*30\)\s*\{\s*\}/)); +See description above for instructions. +```js +assert(buyWeapon.toString().match(/if\s*\(\s*gold\s*\>\=\s*30\)\s*\{\s*\}/)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-060.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-060.md index c17f51581b..22da83a0b9 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-060.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-060.md @@ -4,35 +4,94 @@ title: Part 60 challengeType: 0 --- -## Description -
+# --description-- Similar to in the `buyHealth` function, set `gold` to equal 30 less than its current value. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - # testString: assert((() => { gold = 50; buyWeapon(); return gold === 20; })()); - testString: gold = 50, buyWeapon(), assert(gold === 20); +See description above for instructions. +```js +(gold = 50), buyWeapon(), assert(gold === 20); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-061.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-061.md index 6ace885e07..6dd6b3ab37 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-061.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-061.md @@ -4,35 +4,94 @@ title: Part 61 challengeType: 0 --- -## Description -
+# --description-- The value of `currentWeapon` 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` since the user is buying the next weapon in the `weapons` array. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - # testString: assert((() => { currentWeapon = 0; buyWeapon(); return currentWeapon === 1; })()); - testString: currentWeapon = 0, buyWeapon(), assert(currentWeapon === 1); +See description above for instructions. +```js +(currentWeapon = 0), buyWeapon(), assert(currentWeapon === 1); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-062.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-062.md index 07ceb1c92f..efd1bc5015 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-062.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-062.md @@ -4,8 +4,7 @@ title: Part 62 challengeType: 0 --- -## Description -
+# --description-- You can easily increment or add one to a variable with the `++` operator. All three of these statements add one to a number: @@ -17,29 +16,90 @@ num++; Change the line `currentWeapon += 1;` to use the `++` operator. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(buyWeapon.toString().match(/currentWeapon\s*\+\+\;?/)); +See description above for instructions. +```js +assert(buyWeapon.toString().match(/currentWeapon\s*\+\+\;?/)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-063.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-063.md index 894d7a5899..67eb8c7482 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-063.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-063.md @@ -4,36 +4,98 @@ title: Part 63 challengeType: 0 --- -## Description -
+# --description-- Now update the `innerText` property of `goldText` and `text`. `text` should equal "You now have a new weapon.". -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - # testString: assert(buyWeapon.toString().match(/goldText\.innerText\s*\=\s*gold\;/) && buyWeapon.toString().match(/text\.innerText\s*\=\s*[\'\"\`]You now have a new weapon\.?[\'\"\`]\;?/)); - # testString: assert((() => { buyWeapon(); return goldText.innerText === '20' && text.innerText === 'You now have a new weapon.' })()); - testString: buyWeapon(), assert(goldText.innerText === '20' && text.innerText === 'You now have a new weapon.'); +See description above for instructions. +```js +buyWeapon(), + assert( + goldText.innerText === '20' && + text.innerText === 'You now have a new weapon.' + ); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-064.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-064.md index 96c0fbbf23..35a164631e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-064.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-064.md @@ -4,34 +4,94 @@ title: Part 64 challengeType: 0 --- -## Description -
+# --description-- Let's 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 `newWeapon` to equal `weapons`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(/let\s*newWeapon\s*\=\s*weapons\;?/.test(code)); +See description above for instructions. +```js +assert(/let\s*newWeapon\s*\=\s*weapons\;?/.test(code)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-065.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-065.md index b017565c7a..e963708f03 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-065.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-065.md @@ -4,34 +4,94 @@ title: Part 65 challengeType: 0 --- -## Description -
+# --description-- Right after the word `weapons` (with no space between), add brackets `[]`. In between the brackets put `currentWeapon`, which is the index number of the weapon the player just bought. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(/let\s*newWeapon\s*\=\s*weapons\s?\[currentWeapon\]\;?/.test(code)); +See description above for instructions. +```js +assert(/let\s*newWeapon\s*\=\s*weapons\s?\[currentWeapon\]\;?/.test(code)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-066.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-066.md index 7446c70602..3791f39f42 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-066.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-066.md @@ -4,34 +4,96 @@ title: Part 66 challengeType: 0 --- -## Description -
+# --description-- Get just the name property of the current weapon by adding `.name` at the end of `weapons[currentWeapon]` (don't use a space). -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(/let\s*newWeapon\s*\=\s*weapons\s?\[currentWeapon\]\.name\;?/.test(code)); +See description above for instructions. +```js +assert( + /let\s*newWeapon\s*\=\s*weapons\s?\[currentWeapon\]\.name\;?/.test(code) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-067.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-067.md index 8e1bf2336d..8a17fef7db 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-067.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-067.md @@ -4,10 +4,9 @@ title: Part 67 challengeType: 0 --- -## Description -
+# --description-- -You can insert variables into a string with the concatenation (`+`) operator. Update the "You now have a new weapon." string so it says "You now have a " and then lists the name of the new weapon. Make sure to add a period at the end of the sentence. +You can insert variables into a string with the concatenation (`+`) operator. Update the "You now have a new weapon." string so it says "You now have a " and then lists the name of the new weapon. Make sure to add a period at the end of the sentence. Here is an example that creates the string "Hello, our name is freeCodeCamp.": @@ -16,29 +15,94 @@ let ourName = "freeCodeCamp"; let ourStr = "Hello, our name is " + ourName + "."; ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(buyWeapon.toString().match(/[\'\"\`]You now have a [\'\"\`]\s*\+\s*newWeapon\;?/)); +See description above for instructions. +```js +assert( + buyWeapon + .toString() + .match(/[\'\"\`]You now have a [\'\"\`]\s*\+\s*newWeapon\;?/) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-068.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-068.md index acd95ed40a..06fa1a9d48 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-068.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-068.md @@ -4,8 +4,7 @@ title: Part 68 challengeType: 0 --- -## Description -
+# --description-- Way back at the beginning you created the `inventory` array. Push the `newWeapon` onto the end of the `inventory` array. Here is an example of pushing onto an array: @@ -16,30 +15,90 @@ arr.push(next); // arr now equals ["first", "second"] ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - # testString: assert(buyWeapon.toString().match(/inventory\.push\(\s*newWeapon\s*\)\;?/)); - testString: buyWeapon(), assert.deepStrictEqual(inventory, ['stick', 'dagger']); +See description above for instructions. +```js +buyWeapon(), assert.deepStrictEqual(inventory, ['stick', 'dagger']); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-069.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-069.md index fae62441d9..c668be4919 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-069.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-069.md @@ -4,35 +4,100 @@ title: Part 69 challengeType: 0 --- -## Description -
+# --description-- Up to this point, anytime `text.innerText` was updated, the old text was erased. This time, use the `+=` operator instead of 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 end). -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - assert(buyWeapon.toString().match(/text\.innerText\s*\+\=\s*[\'\"\`] In your inventory you have\: [\'\"\`]\;?/)); +See description above for instructions. +```js +assert( + buyWeapon + .toString() + .match( + /text\.innerText\s*\+\=\s*[\'\"\`] In your inventory you have\: [\'\"\`]\;?/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-070.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-070.md index bc14fad19d..ca8081102a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-070.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-070.md @@ -4,35 +4,100 @@ title: Part 70 challengeType: 0 --- -## Description -
+# --description-- At the end of the string you just added after the ending quote mark, add `+ inventory` to add the contents of the inventory to the end of the string. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - assert(buyWeapon.toString().match(/text\.innerText\s*\+\=\s*[\'\"\`] In your inventory you have\: [\'\"\`]\s*\+\s*inventory\;?/)); +See description above for instructions. +```js +assert( + buyWeapon + .toString() + .match( + /text\.innerText\s*\+\=\s*[\'\"\`] In your inventory you have\: [\'\"\`]\s*\+\s*inventory\;?/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-071.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-071.md index 312d14b9da..c02dd5d5aa 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-071.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-071.md @@ -4,34 +4,100 @@ title: Part 71 challengeType: 0 --- -## Description -
+# --description-- At the end of the `if` statement inside the `buyWeapon` function, add an `else` statement. Inside the `else` statement, set `text.innerText` to equal "You do not have enough gold to buy a weapon.". -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(buyWeapon.toString().match(/\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}/)); +See description above for instructions. +```js +assert( + buyWeapon + .toString() + .match( + /\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-072.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-072.md index 1717408805..197c480a20 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-072.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-072.md @@ -4,34 +4,105 @@ title: Part 72 challengeType: 0 --- -## Description -
+# --description-- -Once a player has the best weapon, they can't buy another one. Wrap all the code in the `buyWeapon` function inside another `if` statement. The condition should check if `currentWeapon` is less than 3 (the index of the last weapon). +Once a player has the best weapon, they can't buy another one. Wrap all the code in the `buyWeapon` function inside another `if` statement. The condition should check if `currentWeapon` is less than 3 (the index of the last weapon). -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(buyWeapon.toString().match(/if\s*\(\s*currentWeapon\s*\<\s*3\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/) && buyWeapon.toString().match(/\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}\s*\}/)); +See description above for instructions. +```js +assert( + buyWeapon + .toString() + .match( + /if\s*\(\s*currentWeapon\s*\<\s*3\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/ + ) && + buyWeapon + .toString() + .match( + /\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}\s*\}/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-073.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-073.md index 3e6a73a35f..87b069fb1f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-073.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-073.md @@ -4,34 +4,100 @@ title: Part 73 challengeType: 0 --- -## Description -
+# --description-- At some point in the future, you may want to add more weapons. Instead of checking if `currentWeapon` is less than three, check if `currentWeapon` is less than the length of the `weapons` array. For example, here is how you would get the length of an array called `arr`: `arr.length`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(buyWeapon.toString().match(/if\s*\(\s*currentWeapon\s*\<\s*weapons\.length\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/)); +See description above for instructions. +```js +assert( + buyWeapon + .toString() + .match( + /if\s*\(\s*currentWeapon\s*\<\s*weapons\.length\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-074.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-074.md index e5ce77a789..20f9cc6277 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-074.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-074.md @@ -4,34 +4,100 @@ title: Part 74 challengeType: 0 --- -## Description -
+# --description-- We have to fix an error. The `currentWeapon` variable is the array index. Array indexing starts at zero. The index of the last element in an array is one less than the length of the array. In the `if` condition you are working on, change `weapons.length` to `weapons.length - 1`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(buyWeapon.toString().match(/if\s*\(\s*currentWeapon\s*\<\s*weapons\.length\s*\-\s*1\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/)); +See description above for instructions. +```js +assert( + buyWeapon + .toString() + .match( + /if\s*\(\s*currentWeapon\s*\<\s*weapons\.length\s*\-\s*1\s*\)\s*\{\s*if\s*\(\s*gold\s*\>\=\s*30\s*\)\s*\{/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-075.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-075.md index 6657c911d2..859d35e071 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-075.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-075.md @@ -4,34 +4,100 @@ title: Part 75 challengeType: 0 --- -## Description -
+# --description-- Add an `else` statement on the end of the outer `if` statement. Inside the `else` statement, set `text.innerText` to "You already have the most powerful weapon!". -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(buyWeapon.toString().match(/\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}\s*\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You already have the most powerful weapon\![\'\"\`]\;?\s*\}/)); +See description above for instructions. +```js +assert( + buyWeapon + .toString() + .match( + /\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy a weapon\.?[\'\"\`]\;?\s*\}\s*\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You already have the most powerful weapon\![\'\"\`]\;?\s*\}/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-076.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-076.md index e6fb3b11bc..9d21f9c173 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-076.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-076.md @@ -4,34 +4,100 @@ title: Part 76 challengeType: 0 --- -## Description -
+# --description-- Once a player has the most powerful weapon, we'll give them the ability to sell their older weapons back. In the else statement, set `button2.innerText` to equal "Sell weapon for 15 gold". Also, set `button2.onclick` to the function name `sellWeapon`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(buyWeapon.toString().match(/else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You already have the most powerful weapon\![\'\"\`]\;?\s*button2\.innerText\s*\=\s*[\'\"\`]Sell weapon for 15 gold\.?[\'\"\`]\;?\s*button2\.onclick\s*\=\s*sellWeapon\;?\s*\}/)); +See description above for instructions. +```js +assert( + buyWeapon + .toString() + .match( + /else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You already have the most powerful weapon\![\'\"\`]\;?\s*button2\.innerText\s*\=\s*[\'\"\`]Sell weapon for 15 gold\.?[\'\"\`]\;?\s*button2\.onclick\s*\=\s*sellWeapon\;?\s*\}/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-077.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-077.md index 05d1ed97c6..62c42b451b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-077.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-077.md @@ -4,34 +4,94 @@ title: Part 77 challengeType: 0 --- -## Description -
+# --description-- After the `buyWeapon` function, create an empty function called `sellWeapon`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(typeof sellWeapon === 'function'); +See description above for instructions. +```js +assert(typeof sellWeapon === 'function'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-078.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-078.md index 4d30da2adf..ee3929e4ff 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-078.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-078.md @@ -4,34 +4,98 @@ title: Part 78 challengeType: 0 --- -## Description -
+# --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 one. +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 one. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(sellWeapon.toString().match(/if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*\}/)); +See description above for instructions. +```js +assert( + sellWeapon + .toString() + .match(/if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*\}/) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-079.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-079.md index 9f33579eb4..cb2bbbf408 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-079.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-079.md @@ -4,34 +4,107 @@ title: Part 79 challengeType: 0 --- -## Description -
+# --description-- Inside the `if` statement, set `gold` equal to 15 more than its current value. Also, update `goldText.innerText` to the new value. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert((() => { gold = 50; inventory = ['stick']; sellWeapon(); return gold === 50 && goldText.innerText === '50' })() && (() => { gold = 50; inventory = ['stick', 'dagger']; sellWeapon(); return gold === 65 && goldText.innerText === '65' })()); +See description above for instructions. +```js +assert( + (() => { + gold = 50; + inventory = ['stick']; + sellWeapon(); + return gold === 50 && goldText.innerText === '50'; + })() && + (() => { + gold = 50; + inventory = ['stick', 'dagger']; + sellWeapon(); + return gold === 65 && goldText.innerText === '65'; + })() +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-080.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-080.md index 4a5b1245fa..e009a3ff39 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-080.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-080.md @@ -4,34 +4,98 @@ title: Part 80 challengeType: 0 --- -## Description -
+# --description-- Use the `let` keyword to create a variable named `currentWeapon`. Don't set it equal to anything yet. Notice that we already have a `currentWeapon` variable from earlier. Since the `let` keyword is used instead of `var`, this new version of `currentWeapon` is scoped only to this `if` statement. At the close of the `if` statement, the old version of `currentWeapon` will be used again. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(code.match(/if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*(.\s*)*let\s*currentWeapon\;?/)); # match code as toString() changes let and const to var +See description above for instructions. +```js +assert( + code.match( + /if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*(.\s*)*let\s*currentWeapon\;?/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-081.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-081.md index 36a4038bbd..cd6105d661 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-081.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-081.md @@ -4,10 +4,9 @@ title: Part 81 challengeType: 0 --- -## Description -
+# --description-- -Use the `shift()` method on the `inventory` array to remove the first element and return that removed element. Set `currentWeapon` to equal returned element. +Use the `shift()` method on the `inventory` array to remove the first element and return that removed element. Set `currentWeapon` to equal returned element. Here is an example: @@ -17,29 +16,94 @@ let firstElement = arr.shift(); // arr now equals ["two", "three"] and firstElement now equals "one" ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(code.match(/if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*(.\s*)*let\s*currentWeapon\s*\=\s*inventory\.shift\(\s*\)\;?/)); +See description above for instructions. +```js +assert( + code.match( + /if\s*\(\s*inventory\.length\s*\>\s*1\s*\)\s*\{\s*(.\s*)*let\s*currentWeapon\s*\=\s*inventory\.shift\(\s*\)\;?/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-082.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-082.md index c02ace4419..648a7385e3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-082.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-082.md @@ -4,34 +4,96 @@ title: Part 82 challengeType: 0 --- -## Description -
+# --description-- After the line that creates the `currentWeapon` variable, set `text.innerText` to equal `"You sold a " + currentWeapon + "."` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: inventory = ['potato', 'carrot'], sellWeapon(), assert(text.innerText === 'You sold a potato.' && inventory[0] === 'carrot'); +See description above for instructions. +```js +(inventory = ['potato', 'carrot']), + sellWeapon(), + assert(text.innerText === 'You sold a potato.' && inventory[0] === 'carrot'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-083.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-083.md index 2c8c4446b1..9452f13e83 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-083.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-083.md @@ -4,35 +4,98 @@ title: Part 83 challengeType: 0 --- -## Description -
+# --description-- Now use the `+=` operator to add to `text.innerText`. Add the string " In your inventory you have: " (with spaces at the beginning and end). Then add the `inventory` variable to the end of the string. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - inventory = ['potato', 'carrot'], sellWeapon(), assert(text.innerText === 'You sold a potato. In your inventory you have: carrot'); +See description above for instructions. +```js +(inventory = ['potato', 'carrot']), + sellWeapon(), + assert( + text.innerText === 'You sold a potato. In your inventory you have: carrot' + ); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-084.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-084.md index b2245ec45b..65630515de 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-084.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-084.md @@ -4,34 +4,99 @@ title: Part 84 challengeType: 0 --- -## Description -
+# --description-- Add code so that if the length of the inventory is NOT more than one, then a text message appears that says "Don't sell your only weapon!". -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: inventory = ['potato'], sellWeapon(), assert(inventory[0] === 'potato' && text.innerText === "Don't sell your only weapon!"); +See description above for instructions. +```js +(inventory = ['potato']), + sellWeapon(), + assert( + inventory[0] === 'potato' && + text.innerText === "Don't sell your only weapon!" + ); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-085.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-085.md index 832ab39088..0b810f089f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-085.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-085.md @@ -4,37 +4,100 @@ title: Part 85 challengeType: 0 --- -## Description -
+# --description-- Now we'll start working on fighting monsters. Organize your code by moving the `fightDragon` function to the bottom of the code near the other fight functions. Below where the `weapons` array is defined, define a `monsters` array. Set the contents of the `monsters` array to: `{ name: "slime", level: 2, health: 15 }, {name: "fanged beast", level: 8, health: 60 }, { name: "dragon", level: 20, health: 300 }`. Space out the code similar to the `weapons` array so that it is easier to read. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - assert.deepStrictEqual(monsters, [{ name: "slime", level: 2, health: 15 }, {name: "fanged beast", level: 8, health: 60 }, { name: "dragon", level: 20, health: 300 }]); +See description above for instructions. +```js +assert.deepStrictEqual(monsters, [ + { name: 'slime', level: 2, health: 15 }, + { name: 'fanged beast', level: 8, health: 60 }, + { name: 'dragon', level: 20, health: 300 } +]); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-086.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-086.md index 5969a3aa38..592ac41123 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-086.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-086.md @@ -4,34 +4,94 @@ title: Part 86 challengeType: 0 --- -## Description -
+# --description-- Fighting each type of monster will be very similar so all three fighting functions will call a function named `goFight`. At the end of the code, add an empty function named `goFight`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(typeof goFight === 'function'); +See description above for instructions. +```js +assert(typeof goFight === 'function'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-087.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-087.md index fe5a195a5b..9cab8116c5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-087.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-087.md @@ -4,36 +4,96 @@ title: Part 87 challengeType: 0 --- -## Description -
+# --description-- Inside the `fightSlime` function, set `fighting` to equal 0 (which is the index of the slime in the `monsters` array). On the next line, call the `goFight` function. -As a reminder, here is how you would call a function named `myFunc`: `myFunc();`. +As a reminder, here is how you would call a function named `myFunc`: `myFunc();`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(fightSlime.toString().match(/fighting\s*\=\s*0\;?\s*goFight\(\s*\)\;?/)); +See description above for instructions. +```js +assert(fightSlime.toString().match(/fighting\s*\=\s*0\;?\s*goFight\(\s*\)\;?/)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-088.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-088.md index 6e5eb6858f..fa4308eac2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-088.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-088.md @@ -4,34 +4,97 @@ title: Part 88 challengeType: 0 --- -## Description -
+# --description-- Write the code for the `fightBeast` and `fightDragon` functions, using the `fightSlime` function as an example. Make sure to delete the line that is already in the `fightDragon` function. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(fightBeast.toString().match(/fighting\s*\=\s*1\;?\s*goFight\(\s*\)\;?/) && fightDragon.toString().match(/fighting\s*\=\s*2\;?\s*goFight\(\s*\)\;?/)); +See description above for instructions. +```js +assert( + fightBeast.toString().match(/fighting\s*\=\s*1\;?\s*goFight\(\s*\)\;?/) && + fightDragon.toString().match(/fighting\s*\=\s*2\;?\s*goFight\(\s*\)\;?/) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-089.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-089.md index 9dce1dbcbe..3846c18d15 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-089.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-089.md @@ -4,35 +4,104 @@ title: Part 89 challengeType: 0 --- -## Description -
+# --description-- Add a new object in the `locations` array with all the same properties as the other objects in the array. Set `name` to "fight". Set `"button text"` to `["Attack", "Dodge", "Run"]`. Set `"button functions"` to `[attack, dodge, goTown]`. And set `text` to "You are fighting a monster.". -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - assert.deepStrictEqual(locations[3], {name: "fight","button text": ["Attack", "Dodge", "Run"],"button functions": [attack, dodge, goTown],text: "You are fighting a monster."}); +See description above for instructions. +```js +assert.deepStrictEqual(locations[3], { + name: 'fight', + 'button text': ['Attack', 'Dodge', 'Run'], + 'button functions': [attack, dodge, goTown], + text: 'You are fighting a monster.' +}); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-090.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-090.md index be316ee5de..009659efc8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-090.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-090.md @@ -4,34 +4,94 @@ title: Part 90 challengeType: 0 --- -## Description -
+# --description-- At the end of the code create empty functions named `attack` and `dodge`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(typeof attack === 'function' && typeof dodge === 'function'); +See description above for instructions. +```js +assert(typeof attack === 'function' && typeof dodge === 'function'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-091.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-091.md index 66b2d1dbe7..3982138218 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-091.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-091.md @@ -4,34 +4,94 @@ title: Part 91 challengeType: 0 --- -## Description -
+# --description-- In the `goFight` function, call the `update` function and pass it `locations[3]`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(goFight.toString().match(/update\(\s*locations\[\s*3\s*\]\s*\)\;?/)); +See description above for instructions. +```js +assert(goFight.toString().match(/update\(\s*locations\[\s*3\s*\]\s*\)\;?/)); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-092.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-092.md index e85f287dc7..e56e0f94fc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-092.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-092.md @@ -4,34 +4,107 @@ title: Part 92 challengeType: 0 --- -## Description -
+# --description-- Next in the `goFight` function, set `monsterHealth` to equal the health of the current monster. You can get the health of the current monster with `monsters[fighting].health`. Try to understand that line before continuing. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert((() => { fightSlime(); return monsterHealth === 15 })() && (() => { fightBeast(); return monsterHealth === 60 })() && (() => { fightDragon(); return monsterHealth === 300 })()); +See description above for instructions. +```js +assert( + (() => { + fightSlime(); + return monsterHealth === 15; + })() && + (() => { + fightBeast(); + return monsterHealth === 60; + })() && + (() => { + fightDragon(); + return monsterHealth === 300; + })() +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-093.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-093.md index f4b2111f39..3ac09cd522 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-093.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-093.md @@ -4,36 +4,100 @@ title: Part 93 challengeType: 0 --- -## Description -
+# --description-- -The HTML that shows the monster stats that has been hidden using CSS. Display the `monsterStats` HTML element by updating its CSS `display` property to equal `block`. +The HTML that shows the monster stats that has been hidden using CSS. Display the `monsterStats` HTML element by updating its CSS `display` property to equal `block`. Here is an example of updating the `display` property of an element named `myElement`: `myElement.style.display = "block";` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(goFight.toString().match(/^\s*monsterStats\.style\.display\s*\=\s*[\'\"\`]block[\'\"\`]\;?/m)); +See description above for instructions. +```js +assert( + goFight + .toString() + .match(/^\s*monsterStats\.style\.display\s*\=\s*[\'\"\`]block[\'\"\`]\;?/m) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-094.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-094.md index 5126128077..a47f38f8aa 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-094.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-094.md @@ -4,34 +4,109 @@ title: Part 94 challengeType: 0 --- -## Description -
+# --description-- Now set the `innerText` property of `monsterNameText` to equal `monsters[fighting].name`. Also, set the `innerText` property of `monsterHealthText` to equal `monsterHealth`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert((() => { fightBeast(); return monsterNameText.innerText === 'fanged beast' && monsterHealthText.innerText === '60'})() && (() => { fightDragon(); return monsterNameText.innerText === 'dragon' && monsterHealthText.innerText === '300'})()); +See description above for instructions. +```js +assert( + (() => { + fightBeast(); + return ( + monsterNameText.innerText === 'fanged beast' && + monsterHealthText.innerText === '60' + ); + })() && + (() => { + fightDragon(); + return ( + monsterNameText.innerText === 'dragon' && + monsterHealthText.innerText === '300' + ); + })() +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-095.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-095.md index e3849adc30..0871f8ac43 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-095.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-095.md @@ -4,34 +4,94 @@ title: Part 95 challengeType: 0 --- -## Description -
+# --description-- -We'll build out the `attack` function now. For the first line in the function, update the text message to say "The [monster name] attacks." but replace "[monster name]" with the actual name of the monster. Remember, you can get the monster name with `monsters[fighting].name`. +We'll build out the `attack` function now. For the first line in the function, update the text message to say "The \[monster name] attacks." but replace "\[monster name]" with the actual name of the monster. Remember, you can get the monster name with `monsters[fighting].name`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: fightDragon(), attack(), assert(text.innerText === 'The dragon attacks.'); +See description above for instructions. +```js +fightDragon(), attack(), assert(text.innerText === 'The dragon attacks.'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-096.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-096.md index 004e5332eb..1bebe449c9 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-096.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-096.md @@ -4,34 +4,99 @@ title: Part 96 challengeType: 0 --- -## Description -
+# --description-- -Now use the `+=` operator to append more text to `text.innerText`. Add the text " You attack it with your [weapon name]." but replace "[weapon name]" with the actual weapon name. Remember, you can get the weapon name with `weapons[currentWeapon].name`. +Now use the `+=` operator to append more text to `text.innerText`. Add the text " You attack it with your \[weapon name]." but replace "\[weapon name]" with the actual weapon name. Remember, you can get the weapon name with `weapons[currentWeapon].name`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: currentWeapon = 3, fightDragon(), attack(), assert(text.innerText === 'The dragon attacks. You attack it with your sword.'); +See description above for instructions. +```js +(currentWeapon = 3), + fightDragon(), + attack(), + assert( + text.innerText === 'The dragon attacks. You attack it with your sword.' + ); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-097.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-097.md index cf72b1e421..4359dc7dd3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-097.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-097.md @@ -4,34 +4,94 @@ title: Part 97 challengeType: 0 --- -## Description -
+# --description-- Next, set `health` to equal `health` minus the monster's level. You can get the monster's level with `monsters[fighting].level`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: health = 50, fightDragon(), attack(), assert(health === 30); +See description above for instructions. +```js +(health = 50), fightDragon(), attack(), assert(health === 30); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-098.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-098.md index 9cdb504a6a..fe35c8c9ff 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-098.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-098.md @@ -4,34 +4,94 @@ title: Part 98 challengeType: 0 --- -## Description -
+# --description-- Set `monsterHealth` to `monsterHealth` minus the power of the current weapon (`weapons[currentWeapon].power`). -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: fightDragon(), monsterHealth = 20, attack(), assert(monsterHealth === 15); +See description above for instructions. +```js +fightDragon(), (monsterHealth = 20), attack(), assert(monsterHealth === 15); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-099.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-099.md index afeaa03e83..ca1f7a8bb0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-099.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-099.md @@ -4,36 +4,100 @@ title: Part 99 challengeType: 0 --- -## Description -
+# --description-- At the end of that line, add a random number between one and the value of `xp`. Here is the formula to get a random number between 1 and 5: `Math.floor(Math.random() * 5) + 1`. `Math.random()` returns a decimal or floating point number between 0 and 1, and `Math.floor()` rounds a given number down to the nearest integer. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: xp = 1, fightDragon(), monsterHealth = 20, attack(), assert(monsterHealth === 14); +See description above for instructions. +```js +(xp = 1), + fightDragon(), + (monsterHealth = 20), + attack(), + assert(monsterHealth === 14); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-100.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-100.md index 126f85abc7..0cdef500f2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-100.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-100.md @@ -4,34 +4,99 @@ title: Part 100 challengeType: 0 --- -## Description -
+# --description-- Update `healthText.innerText` and `monsterHealthText.innerText` to equal `health` and `monsterHealth`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: xp = 1, health = 50, fightDragon(), monsterHealth = 20, attack(), assert(monsterHealthText.innerText === '14' && healthText.innerText === '30'); +See description above for instructions. +```js +(xp = 1), + (health = 50), + fightDragon(), + (monsterHealth = 20), + attack(), + assert(monsterHealthText.innerText === '14' && healthText.innerText === '30'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-101.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-101.md index da7ca1bd08..a1d2ffd513 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-101.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-101.md @@ -4,34 +4,98 @@ title: Part 101 challengeType: 0 --- -## Description -
+# --description-- Check if health is less than or equal to zero. If it is, call the `lose()` function. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(attack.toString().match(/^\s*if\s*\(\s*health\s*\<\=\s*0\s*\)\s*\{\s*lose\(\s*\);?\s*\}/m)); +See description above for instructions. +```js +assert( + attack + .toString() + .match(/^\s*if\s*\(\s*health\s*\<\=\s*0\s*\)\s*\{\s*lose\(\s*\);?\s*\}/m) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-102.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-102.md index e654ccfe5b..96612bd30d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-102.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-102.md @@ -4,10 +4,9 @@ title: Part 102 challengeType: 0 --- -## Description -
+# --description-- -An `else` statement can be conditional with an `else if` statement. At the end of the `if` statement, add an `else if` statement to check if `monsterHealth` is less than or equal to zero. Inside the `else if` block, call the `defeatMonster()` function. +An `else` statement can be conditional with an `else if` statement. At the end of the `if` statement, add an `else if` statement to check if `monsterHealth` is less than or equal to zero. Inside the `else if` block, call the `defeatMonster()` function. Here is an example of an `if` statement with `else if` and `else`: @@ -21,29 +20,96 @@ if (num > 15) { } ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(attack.toString().match(/^\s*if\s*\(\s*health\s*\<\=\s*0\s*\)\s*\{\s*lose\(\s*\);?\s*\}\s*else if\s*\(\s*monsterHealth\s*\<\=\s*0\s*\)\s*\{\s*defeatMonster\(\s*\)\;?\s*\}/m)); +See description above for instructions. +```js +assert( + attack + .toString() + .match( + /^\s*if\s*\(\s*health\s*\<\=\s*0\s*\)\s*\{\s*lose\(\s*\);?\s*\}\s*else if\s*\(\s*monsterHealth\s*\<\=\s*0\s*\)\s*\{\s*defeatMonster\(\s*\)\;?\s*\}/m + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-103.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-103.md index 9061a39735..0cf50cd0b6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-103.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-103.md @@ -4,34 +4,94 @@ title: Part 103 challengeType: 0 --- -## Description -
+# --description-- At the end of the code add two empty functions named `defeatMonster` and `lose`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(typeof defeatMonster === 'function' && typeof lose === 'function'); +See description above for instructions. +```js +assert(typeof defeatMonster === 'function' && typeof lose === 'function'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-104.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-104.md index 64575797fb..9a75586e1f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-104.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-104.md @@ -4,34 +4,96 @@ title: Part 104 challengeType: 0 --- -## Description -
+# --description-- -Inside the `dodge` function, set `text.innerText` equal to "You dodge the attack from the [monster's name]." Instead of "[monster's name]", get the monster's name with `monsters[fighting].name`. +Inside the `dodge` function, set `text.innerText` equal to "You dodge the attack from the \[monster's name]." Instead of "\[monster's name]", get the monster's name with `monsters[fighting].name`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: fightDragon(), dodge(), assert(text.innerText === 'You dodge the attack from the dragon.'); +See description above for instructions. +```js +fightDragon(), + dodge(), + assert(text.innerText === 'You dodge the attack from the dragon.'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-105.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-105.md index fbea3db15c..c838d4a6f6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-105.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-105.md @@ -4,36 +4,96 @@ title: Part 105 challengeType: 0 --- -## Description -
+# --description-- In the `defeatMonster` function, set `gold` to equal `gold` plus the monster's level times 6.7. You can get the monster's level with `monsters[fighting].level`. Here is how you would set `num` to equal `num` plus five times eight: `num += 5 * 8`. Remember that `Math.floor()` rounds any number passed to it down to the nearest whole number. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: gold = 10, fightSlime(), defeatMonster(), assert(gold === 23); +See description above for instructions. +```js +(gold = 10), fightSlime(), defeatMonster(), assert(gold === 23); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-106.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-106.md index cdfe31a1e5..3c1b717597 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-106.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-106.md @@ -4,34 +4,94 @@ title: Part 106 challengeType: 0 --- -## Description -
+# --description-- Set `xp` to equal `xp` plus the monster's level. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: xp = 10, fightSlime(), defeatMonster(), assert(xp === 12); +See description above for instructions. +```js +(xp = 10), fightSlime(), defeatMonster(), assert(xp === 12); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-107.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-107.md index d3823e41ee..6562166290 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-107.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-107.md @@ -4,34 +4,98 @@ title: Part 107 challengeType: 0 --- -## Description -
+# --description-- Now set the `innerText` properties of `goldText` and `xpText` to the updated values. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: xp = 10, gold = 10, fightSlime(), defeatMonster(), assert(goldText.innerText === '23' && xpText.innerText === '12'); +See description above for instructions. +```js +(xp = 10), + (gold = 10), + fightSlime(), + defeatMonster(), + assert(goldText.innerText === '23' && xpText.innerText === '12'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-108.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-108.md index 65402f9fdc..a2f980def0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-108.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-108.md @@ -4,34 +4,96 @@ title: Part 108 challengeType: 0 --- -## Description -
+# --description-- Finish the `defeatMonster` function by calling the `update()` function and pass in `locations[4]`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(defeatMonster.toString().match(/^\s*update\(\s*locations\[\s*4\s*\]\s*\)/m)); +See description above for instructions. +```js +assert( + defeatMonster.toString().match(/^\s*update\(\s*locations\[\s*4\s*\]\s*\)/m) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-109.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-109.md index 2047b40b4a..791937220f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-109.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-109.md @@ -4,35 +4,104 @@ title: Part 109 challengeType: 0 --- -## Description -
+# --description-- Add a new object in the `locations` array with all the same properties as the other objects in the array. Set `name` to "kill monster". Set `"button text"` to `["Go to town square", "Go to town square", "Go to town square"]`. Set `"button functions"` to `[goTown, goTown, goTown]`. And set `text` to "The monster screams Arg! as it dies. You gain experience points and find gold.". -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - assert.deepStrictEqual(locations[4], {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."}); +See description above for instructions. +```js +assert.deepStrictEqual(locations[4], { + 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.' +}); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-110.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-110.md index 06c4e12c44..f6df8cf64e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-110.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-110.md @@ -4,35 +4,104 @@ title: Part 110 challengeType: 0 --- -## Description -
+# --description-- The word "Arg!" should have quotes around it. Besides escaping quotes, there is another way you can include quote marks inside a quote. Change the double quotes to single quotes around the sentence, "The monster screams Arg! as it dies. You gain experience points and find gold". Then add double quotes around "Arg!" -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - assert.deepStrictEqual(locations[4], {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.'}); +See description above for instructions. +```js +assert.deepStrictEqual(locations[4], { + 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.' +}); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-111.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-111.md index 7979a7d4ef..5fea280f6e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-111.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-111.md @@ -4,35 +4,102 @@ title: Part 111 challengeType: 0 --- -## Description -
+# --description-- While you're working in the `locations` array, add another object at the end. Set `name` to "lose". Set `"button text"` to `["REPLAY?", "REPLAY?", "REPLAY?"]`. Set `"button functions"` to `[restart, restart, restart]`. And set `text` to "You die. ☠️". -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - assert.deepStrictEqual(locations[5], {name: "lose", "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],"button functions": [restart, restart, restart],text: "You die. ☠️"}); +See description above for instructions. +```js +assert.deepStrictEqual(locations[5], { + name: 'lose', + 'button text': ['REPLAY?', 'REPLAY?', 'REPLAY?'], + 'button functions': [restart, restart, restart], + text: 'You die. ☠️' +}); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-112.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-112.md index a93fe2fb0e..563d027232 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-112.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-112.md @@ -4,34 +4,97 @@ title: Part 112 challengeType: 0 --- -## Description -
+# --description-- After a monster is defeated the monster stat box should no longer display. On the first line of the `update` function add: `monsterStats.style.display = "none";`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: fightSlime(), defeatMonster(), assert(monsterStats.style.display === 'none'); +See description above for instructions. +```js +fightSlime(), defeatMonster(), assert(monsterStats.style.display === 'none'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-113.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-113.md index 61c6bf8854..074fe1fc4e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-113.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-113.md @@ -4,34 +4,97 @@ title: Part 113 challengeType: 0 --- -## Description -
+# --description-- In the `lose` function, call the `update` function and pass in `locations[5]`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: update(locations[0]), lose(), assert(text.innerText === 'You die. ☠️'); +See description above for instructions. +```js +update(locations[0]), lose(), assert(text.innerText === 'You die. ☠️'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-114.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-114.md index 57ebe95731..5469fa147e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-114.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-114.md @@ -4,36 +4,113 @@ title: Part 114 challengeType: 0 --- -## Description -
+# --description-- -At the end of the code, create a `restart` function. Inside the function, set `xp` to 0, set `health` to 100, set `gold` to 50, set `currentWeapon` to 0, and set `inventory` to `["stick"]`. Also, update the `innerText` properties of `goldText`, `healthText`, and `xpText` to their current values. Finally, call the `goTown()` function. +At the end of the code, create a `restart` function. Inside the function, set `xp` to 0, set `health` to 100, set `gold` to 50, set `currentWeapon` to 0, and set `inventory` to `["stick"]`. Also, update the `innerText` properties of `goldText`, `healthText`, and `xpText` to their current values. Finally, call the `goTown()` function. After this step is a good time to test the game so far. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: currentWeapon = 1, inventory = ['stick', 'dagger'], fightSlime(), attack(), defeatMonster(), restart(), assert(xp === 0 && gold === 50 && currentWeapon === 0 && inventory[0] === 'stick' && inventory.length === 1 && goldText.innerText === '50' && healthText.innerText === '100' && xpText.innerText === '0' && text.innerText === 'You are in the town square. You see a sign that says "Store."'); +See description above for instructions. +```js +(currentWeapon = 1), + (inventory = ['stick', 'dagger']), + fightSlime(), + attack(), + defeatMonster(), + restart(), + assert( + xp === 0 && + gold === 50 && + currentWeapon === 0 && + inventory[0] === 'stick' && + inventory.length === 1 && + goldText.innerText === '50' && + healthText.innerText === '100' && + xpText.innerText === '0' && + text.innerText === + 'You are in the town square. You see a sign that says "Store."' + ); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-115.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-115.md index a6b4de8fea..2fe9867a7d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-115.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-115.md @@ -4,34 +4,100 @@ title: Part 115 challengeType: 0 --- -## Description -
+# --description-- Inside the `attack` function, update the contents of the `else if` statement. Instead of calling the `defeatMonster` function right away, create an `if` statement with an `else` statement. If the player is fighting the dragon (`fighting === 2`), then call the `winGame` function. Else, call the `defeatMonster` function. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(attack.toString().match(/^\s*\}\s*else\s*if\s*\(\s*monsterHealth\s*\<\=\s*0\s*\)\s*\{\s*if\s*\(\s*fighting\s*===\s*2\)\s*\{\s*winGame\(\s*\)\;?\s*\}\s*else\s*\{\s*defeatMonster\(\s*\)\;?\s*\}\s*\}/m)); +See description above for instructions. +```js +assert( + attack + .toString() + .match( + /^\s*\}\s*else\s*if\s*\(\s*monsterHealth\s*\<\=\s*0\s*\)\s*\{\s*if\s*\(\s*fighting\s*===\s*2\)\s*\{\s*winGame\(\s*\)\;?\s*\}\s*else\s*\{\s*defeatMonster\(\s*\)\;?\s*\}\s*\}/m + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-116.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-116.md index f47c9189dd..5fa75e042a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-116.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-116.md @@ -4,10 +4,9 @@ title: Part 116 challengeType: 0 --- -## Description -
+# --description-- -The conditional operator, also called the ternary operator, can be used as a one line if-else expression. The syntax is: `condition ? statement-if-true : statement-if-false;`. +The conditional operator, also called the ternary operator, can be used as a one line if-else expression. The syntax is: `condition ? statement-if-true : statement-if-false;`. Change the if-else expression from the last challenge to use the ternary operator instead. Here is an example: @@ -23,29 +22,96 @@ if (age >= 18) { age >= 18 ? adultFunction() : kidFunction(); ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(attack.toString().match(/^\s*\}\s*else\s*if\s*\(\s*monsterHealth\s*\<\=\s*0\s*\)\s*\{\s*fighting\s*\=\=\=\s*2\s*\?\s*winGame\(\s*\)\s*\:\s*defeatMonster\(\s*\)\;?\s*\}/m)); +See description above for instructions. +```js +assert( + attack + .toString() + .match( + /^\s*\}\s*else\s*if\s*\(\s*monsterHealth\s*\<\=\s*0\s*\)\s*\{\s*fighting\s*\=\=\=\s*2\s*\?\s*winGame\(\s*\)\s*\:\s*defeatMonster\(\s*\)\;?\s*\}/m + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-117.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-117.md index 6ec4315d64..6844f73b18 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-117.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-117.md @@ -4,34 +4,94 @@ title: Part 117 challengeType: 0 --- -## Description -
+# --description-- After the `lose` function, create a function called `winGame`. Inside the `winGame` function, call the `update` function and pass in `locations[6]`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(winGame.toString().replace(/\s/g, '').includes('update(locations[6])')); +See description above for instructions. +```js +assert(winGame.toString().replace(/\s/g, '').includes('update(locations[6])')); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-118.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-118.md index 8c194b1285..75c4811a9e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-118.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-118.md @@ -4,35 +4,99 @@ title: Part 118 challengeType: 0 --- -## Description -
+# --description-- Add another object in the `locations` array. Everything should be the same as the "lose" element, except the `name` should be "win" and the text should be "You defeat the dragon! YOU WIN THE GAME! 🎉" -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - assert.deepStrictEqual(locations[6], { name: "win", "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], "button functions": [restart, restart, restart], text: "You defeat the dragon! YOU WIN THE GAME! 🎉" }); +See description above for instructions. +```js +assert.deepStrictEqual(locations[6], { + name: 'win', + 'button text': ['Fight slime', 'Fight fanged beast', 'Go to town square'], + 'button functions': [restart, restart, restart], + text: 'You defeat the dragon! YOU WIN THE GAME! 🎉' +}); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-119.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-119.md index f54acedcf9..bdb74c89c7 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-119.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-119.md @@ -4,36 +4,101 @@ title: Part 119 challengeType: 0 --- -## Description -
+# --description-- -The game could be complete now, but let's make it more interesting. +The game could be complete now, but let's make it more interesting. Inside the `attack` function, change the line `health -= monsters[fighting].level;` to `health -= getMonsterAttackValue(monsters[fighting].level);` This sets `health` to equal `health` minus the return value of the `getMonsterAttackValue` function. Also, pass the level of the monster to `getMonsterAttackValue` as an argument. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(attack.toString().replace(/\s/g, '').includes('health-=getMonsterAttackValue(monsters[fighting].level')); +See description above for instructions. +```js +assert( + attack + .toString() + .replace(/\s/g, '') + .includes('health-=getMonsterAttackValue(monsters[fighting].level') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-120.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-120.md index baa929b748..3c26f31aca 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-120.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-120.md @@ -4,34 +4,97 @@ title: Part 120 challengeType: 0 --- -## Description -
+# --description-- Under the `attack` function, create a function with name `getMonsterAttackValue` that takes `level` as a parameter. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(getMonsterAttackValue.toString().replace(/\s/g, '') === 'functiongetMonsterAttackValue(level){}'); +See description above for instructions. +```js +assert( + getMonsterAttackValue.toString().replace(/\s/g, '') === + 'functiongetMonsterAttackValue(level){}' +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-121.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-121.md index 5052d29a4d..a5a124a07c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-121.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-121.md @@ -4,34 +4,99 @@ title: Part 121 challengeType: 0 --- -## Description -
+# --description-- -The attack of the monster will be based on the monster's level and player's `xp`. In the `getMonsterAttackValue` function, use `const` to create a variable called `hit`. Set it to equal the equation `(level * 5) - (Math.floor(Math.random() * xp))`. +The attack of the monster will be based on the monster's level and player's `xp`. In the `getMonsterAttackValue` function, use `const` to create a variable called `hit`. Set it to equal the equation `(level * 5) - (Math.floor(Math.random() * xp))`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(getMonsterAttackValue.toString().replace(/\s/g, '').includes('varhit=level*5-Math.floor(Math.random()*xp)')); +See description above for instructions. +```js +assert( + getMonsterAttackValue + .toString() + .replace(/\s/g, '') + .includes('varhit=level*5-Math.floor(Math.random()*xp)') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-122.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-122.md index 0b56d25266..36af249a61 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-122.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-122.md @@ -4,36 +4,101 @@ title: Part 122 challengeType: 0 --- -## Description -
+# --description-- -Log the value of `hit` to the console to use in debugging. +Log the value of `hit` to the console to use in debugging. -Here is how to log the value of `num` to the console: `console.log(num);`. +Here is how to log the value of `num` to the console: `console.log(num);`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(getMonsterAttackValue.toString().replace(/\s/g, '').includes('console.log(hit)')); +See description above for instructions. +```js +assert( + getMonsterAttackValue + .toString() + .replace(/\s/g, '') + .includes('console.log(hit)') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-123.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-123.md index a2fcfebb75..dc2bc0a719 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-123.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-123.md @@ -4,10 +4,9 @@ title: Part 123 challengeType: 0 --- -## Description -
+# --description-- -Now return `hit` from the `getMonsterAttackValue` function. The return value of this function is used in the `attack` function. +Now return `hit` from the `getMonsterAttackValue` function. The return value of this function is used in the `attack` function. Here is an example of a function that returns a value: @@ -20,29 +19,92 @@ function plusThree(num) { const answer = plusThree(5); // 8 ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(getMonsterAttackValue.toString().replace(/\s/g, '').includes('returnhit')); +See description above for instructions. +```js +assert( + getMonsterAttackValue.toString().replace(/\s/g, '').includes('returnhit') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-124.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-124.md index e8090562c3..81f07c9b08 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-124.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-124.md @@ -4,14 +4,13 @@ title: Part 124 challengeType: 0 --- -## Description -
+# --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 sometimes 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. -For example, here's a function that returns 5 if `tickets` is greater than 3, or returns 0 if it is not: +For example, here's a function that returns 5 if `tickets` is greater than 3, or returns 0 if it is not: ```js function applyDiscount(tickets) { @@ -19,29 +18,95 @@ function applyDiscount(tickets) { } ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(getMonsterAttackValue.toString().replace(/\s/g, '').includes('returnhit>0?hit:0')); +See description above for instructions. +```js +assert( + getMonsterAttackValue + .toString() + .replace(/\s/g, '') + .includes('returnhit>0?hit:0') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-125.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-125.md index ac5dd97d3c..6ad4029410 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-125.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-125.md @@ -4,10 +4,9 @@ title: Part 125 challengeType: 0 --- -## Description -
+# --description-- -In the `attack` function after the line `health -= getMonsterAttackValue(monsters[fighting].level);`, create an empty if expression. For the condition, put the function call `isMonsterHit()`. +In the `attack` function after the line `health -= getMonsterAttackValue(monsters[fighting].level);`, create an empty if expression. For the condition, put the function call `isMonsterHit()`. Here is an example of an empty if expression with a function call as the condition: @@ -17,29 +16,90 @@ if (isTrue()) { } ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(attack.toString().replace(/\s/g, '').includes('if(isMonsterHit()){}')); +See description above for instructions. +```js +assert(attack.toString().replace(/\s/g, '').includes('if(isMonsterHit()){}')); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-126.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-126.md index 2b68e3fd2c..ee110c16aa 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-126.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-126.md @@ -4,10 +4,9 @@ title: Part 126 challengeType: 0 --- -## Description -
+# --description-- -In the `attack` function, move the line `monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;` into the `if` block. +In the `attack` function, move the line `monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;` into the `if` block. Here is an example of code in an `if` block that logs a message to the console: @@ -17,29 +16,97 @@ if (isTrue()) { } ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(attack.toString().replace(/\s/g, '').match(/if\(isMonsterHit\(\)\)\{monsterHealth\-\=weapons\[currentWeapon\]\.power\+Math\.floor\(Math\.random\(\)\*xp\)\+1;?\}/)); +See description above for instructions. +```js +assert( + attack + .toString() + .replace(/\s/g, '') + .match( + /if\(isMonsterHit\(\)\)\{monsterHealth\-\=weapons\[currentWeapon\]\.power\+Math\.floor\(Math\.random\(\)\*xp\)\+1;?\}/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-127.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-127.md index 205a62986b..827e909a24 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-127.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-127.md @@ -4,34 +4,101 @@ title: Part 127 challengeType: 0 --- -## Description -
+# --description-- Add an `else` expression to the `if` expression. Use the `+=` operator to add the text " You miss." onto the end of `text.innerText`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(attack.toString().replace(/\s/g, '').match(/if\(isMonsterHit\(\)\)\{monsterHealth\-\=weapons\[currentWeapon\]\.power\+Math\.floor\(Math\.random\(\)\*xp\)\+1;?\}else\{text\.innerText\+\=[\'\"\`]Youmiss.[\'\"\`]\;?\}/)); +See description above for instructions. +```js +assert( + attack + .toString() + .replace(/\s/g, '') + .match( + /if\(isMonsterHit\(\)\)\{monsterHealth\-\=weapons\[currentWeapon\]\.power\+Math\.floor\(Math\.random\(\)\*xp\)\+1;?\}else\{text\.innerText\+\=[\'\"\`]Youmiss.[\'\"\`]\;?\}/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-128.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-128.md index 0cbe27caba..700a5892ae 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-128.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-128.md @@ -4,8 +4,7 @@ title: Part 128 challengeType: 0 --- -## Description -
+# --description-- Now create the `isMonsterHit` function. It will return a boolean to be used in the `if` expression. Return the result of the comparison `Math.random() > .2`. @@ -17,29 +16,99 @@ function flipHeads() { } ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(isMonsterHit.toString().replace(/\s/g, '').includes('returnMath.random()>.2') || isMonsterHit.toString().replace(/\s/g, '').includes('returnMath.random()>0.2')); +See description above for instructions. +```js +assert( + isMonsterHit + .toString() + .replace(/\s/g, '') + .includes('returnMath.random()>.2') || + isMonsterHit + .toString() + .replace(/\s/g, '') + .includes('returnMath.random()>0.2') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-129.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-129.md index b825987ddd..982b9e405e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-129.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-129.md @@ -4,36 +4,105 @@ title: Part 129 challengeType: 0 --- -## Description -
+# --description-- -The player should hit if either `Math.random() > .2` OR if the player's health is less than 20. At the end of the return statement, add the "logical or" operator (`||`) and then check if `health` is less than 20. +The player should hit if either `Math.random() > .2` OR if the player's health is less than 20. At the end of the return statement, add the "logical or" operator (`||`) and then check if `health` is less than 20. Here is an example that returns true if either a number is less than 10 or more than 20: `num < 10 || num > 20`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(isMonsterHit.toString().replace(/\s/g, '').includes('returnMath.random()>.2||health<20') || isMonsterHit.toString().replace(/\s/g, '').includes('returnMath.random()>0.2||health<20')); +See description above for instructions. +```js +assert( + isMonsterHit + .toString() + .replace(/\s/g, '') + .includes('returnMath.random()>.2||health<20') || + isMonsterHit + .toString() + .replace(/\s/g, '') + .includes('returnMath.random()>0.2||health<20') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-130.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-130.md index e559b64a71..7f9a72c042 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-130.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-130.md @@ -4,34 +4,100 @@ title: Part 130 challengeType: 0 --- -## Description -
+# --description-- On every attack, there should be a small 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-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(attack.toString().replace(/\s/g, '').includes('if(Math.random()<=.1){}') || isMonsterHit.toString().replace(/\s/g, '').includes('if(Math.random()<=0.1){}')); +See description above for instructions. +```js +assert( + attack.toString().replace(/\s/g, '').includes('if(Math.random()<=.1){}') || + isMonsterHit + .toString() + .replace(/\s/g, '') + .includes('if(Math.random()<=0.1){}') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-131.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-131.md index 6e3c707839..99ce09e757 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-131.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-131.md @@ -4,10 +4,9 @@ title: Part 131 challengeType: 0 --- -## Description -
+# --description-- -Use the `+=` operator to add "Your [last item in inventory array] breaks." to the end of `text.innerText`. Instead of the bracketed text, it should show the actual item name. +Use the `+=` operator to add "Your \[last item in inventory array] breaks." to the end of `text.innerText`. Instead of the bracketed text, it should show the actual item name. Use `inventory.pop()` to both remove the last element from the array AND return that element. For example: @@ -17,29 +16,103 @@ console.log("I bought " + shoppingList.pop() + "."); // Logs "I bought cereal." // shoppingList now equals ["milk", "apples"] ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(attack.toString().replace(/\s/g, '').match(/if\(Math\.random\(\)\<\=0?\.1\)\{text\.innerText\+\=\"Your\"\+inventory\.pop\(\)\+\"breaks\.\"\;?\}/) || attack.toString().replace(/\s/g, '').match(/if\(Math\.random\(\)\<\=0?\.1\)\{text\.innerText\+\=\"Your\"\.concat\(inventory\.pop\(\)\,\"breaks\.\"\)\;?\}/)); +See description above for instructions. +```js +assert( + attack + .toString() + .replace(/\s/g, '') + .match( + /if\(Math\.random\(\)\<\=0?\.1\)\{text\.innerText\+\=\"Your\"\+inventory\.pop\(\)\+\"breaks\.\"\;?\}/ + ) || + attack + .toString() + .replace(/\s/g, '') + .match( + /if\(Math\.random\(\)\<\=0?\.1\)\{text\.innerText\+\=\"Your\"\.concat\(inventory\.pop\(\)\,\"breaks\.\"\)\;?\}/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-132.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-132.md index 0964b9fe18..b8d7c6f081 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-132.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-132.md @@ -4,34 +4,101 @@ title: Part 132 challengeType: 0 --- -## Description -
+# --description-- Decrement the value of `currentWeapon` using `--`. For example, say `num` equals 5. After running `num--`, `num` now equals 4. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(attack.toString().replace(/\s/g, '').match(/if\(Math\.random\(\)\<\=0?\.1\)\{text\.innerText\+\=\"Your\"\+inventory\.pop\(\)\+\"breaks\.\"\;?currentWeapon--\;?\}/)); +See description above for instructions. +```js +assert( + attack + .toString() + .replace(/\s/g, '') + .match( + /if\(Math\.random\(\)\<\=0?\.1\)\{text\.innerText\+\=\"Your\"\+inventory\.pop\(\)\+\"breaks\.\"\;?currentWeapon--\;?\}/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-133.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-133.md index 35b725d591..aaec00f8b9 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-133.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-133.md @@ -4,12 +4,11 @@ title: Part 133 challengeType: 0 --- -## Description -
+# --description-- -We don't want a player's only weapon to break. +We don't want a player's only weapon to break. -Use the "logical and" operator (`&&`) to add a second condition to the `if` expression you just wrote. A player's weapon should only be able to break if `inventory.length` does not equal (`!==`) one. +Use the "logical and" operator (`&&`) to add a second condition to the `if` expression you just wrote. A player's weapon should only be able to break if `inventory.length` does not equal (`!==`) one. Here is an example of an `if` expression with the conditions that `firstName` equals "Quincy" AND `lastName` does NOT equal "Larson". With `&&`, both conditions must be true or else the entire statement evaluates to false. @@ -19,29 +18,97 @@ if (firstName === "Quincy" && lastName !== "Larson") { } ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(attack.toString().replace(/\s/g, '').match(/if\(Math\.random\(\)\<\=0?\.1\&\&inventory\.length\!\=\=1\)\{text\.innerText\+\=\"Your\"\+inventory\.pop\(\)\+\"breaks\.\"\;?currentWeapon--\;?\}/)); +See description above for instructions. +```js +assert( + attack + .toString() + .replace(/\s/g, '') + .match( + /if\(Math\.random\(\)\<\=0?\.1\&\&inventory\.length\!\=\=1\)\{text\.innerText\+\=\"Your\"\+inventory\.pop\(\)\+\"breaks\.\"\;?currentWeapon--\;?\}/ + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-134.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-134.md index edd04e7be1..51a7037eca 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-134.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-134.md @@ -4,36 +4,101 @@ title: Part 134 challengeType: 0 --- -## Description -
+# --description-- -The only thing left to add is a mini-game easter egg (a hidden feature). +The only thing left to add is a mini-game easter egg (a hidden feature). -Add a new function called `easterEgg` that calls the `update` function and passes in `locations[7]` as an argument. +Add a new function called `easterEgg` that calls the `update` function and passes in `locations[7]` as an argument. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(easterEgg.toString().replace(/\s/g, '').match(/functioneasterEgg\(\)\{(return)?update\(locations\[7\]\)\;?}/)); +See description above for instructions. +```js +assert( + easterEgg + .toString() + .replace(/\s/g, '') + .match(/functioneasterEgg\(\)\{(return)?update\(locations\[7\]\)\;?}/) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-135.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-135.md index 353b7ac4a4..ff1c7f030e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-135.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-135.md @@ -4,37 +4,105 @@ title: Part 135 challengeType: 0 --- -## Description -
+# --description-- -Add a new object to the `locations` array. +Add a new object to the `locations` array. Set `name` to "easter egg", `"button text"` to `["2", "8", "Go to town square?"]`, `"button functions"` to `[pickTwo, pickEight, 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-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - assert.deepStrictEqual(locations[7], {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!"}); +See description above for instructions. +```js +assert.deepStrictEqual(locations[7], { + 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!' +}); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-136.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-136.md index 585c1c00a8..d68ddf09d8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-136.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-136.md @@ -4,36 +4,102 @@ title: Part 136 challengeType: 0 --- -## Description -
+# --description-- -At the end of the code, add two new functions named `pickTwo` and `pickEight`. +At the end of the code, add two new functions named `pickTwo` and `pickEight`. -Inside each function call the `pick()` function. Pass either "2" or "8" as arguments to `pick` depending on the function name. +Inside each function call the `pick()` function. Pass either "2" or "8" as arguments to `pick` depending on the function name. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert( pickTwo.toString().replace(/\s/g, '').includes('pick(2)') && pickEight.toString().replace(/\s/g, '').includes('pick(8)') ); +See description above for instructions. +```js +assert( + pickTwo.toString().replace(/\s/g, '').includes('pick(2)') && + pickEight.toString().replace(/\s/g, '').includes('pick(8)') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+ +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
- -``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-137.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-137.md index 44bd3d8b25..3ae1447830 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-137.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-137.md @@ -4,34 +4,94 @@ title: Part 137 challengeType: 0 --- -## Description -
+# --description-- Add a `pick` function with a parameter named "guess". -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(pick.toString().replace(/\s/g, '').includes('functionpick(guess){}')); +See description above for instructions. +```js +assert(pick.toString().replace(/\s/g, '').includes('functionpick(guess){}')); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-138.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-138.md index de7ffb8f21..727c90d3a7 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-138.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-138.md @@ -4,34 +4,99 @@ title: Part 138 challengeType: 0 --- -## Description -
+# --description-- Inside `pick`, use `let` to initialize a variable named "numbers" and set it to an empty array. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(pick.toString().replace(/\s/g, '').match(/functionpick\(guess\)\{varnumbers\=\[\]\;?\}/)); +See description above for instructions. +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .match(/functionpick\(guess\)\{varnumbers\=\[\]\;?\}/) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-139.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-139.md index 4054066b11..ab1e56c84c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-139.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-139.md @@ -4,10 +4,9 @@ title: Part 139 challengeType: 0 --- -## Description -
+# --description-- -Inside `pick`, create a `while` loop to run the same code multiple times. The code inside the `while` loop should keep repeating while `numbers.length` is less than 10 and stop once that condition is no longer true. +Inside `pick`, create a `while` loop to run the same code multiple times. The code inside the `while` loop should keep repeating while `numbers.length` is less than 10 and stop once that condition is no longer true. Here is an example of a while loop that repeats code inside the loop while `i` is less than five. @@ -21,29 +20,97 @@ while(i < 5) { // ourArray now equals [0,1,2,3,4] ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(pick.toString().replace(/\s/g, '').includes('while(numbers.length<10){if(_LPC++%2000===0&&Date.now()-_LP>1500){')); # Take loop protect into account +See description above for instructions. +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes( + 'while(numbers.length<10){if(_LPC++%2000===0&&Date.now()-_LP>1500){' + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-140.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-140.md index 3bb08731ad..6de00f203b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-140.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-140.md @@ -4,34 +4,99 @@ title: Part 140 challengeType: 0 --- -## Description -
+# --description-- Inside the `while` loop, push a random number between 0 and 10 onto the end of the `numbers` array. Get the random number with `Math.floor(Math.random() * 11)`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(pick.toString().replace(/\s/g, '').includes('numbers.push(Math.floor(Math.random()*11));}')); # Take loop protect into account +See description above for instructions. +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes('numbers.push(Math.floor(Math.random()*11));}') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-141.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-141.md index 0cd28c4984..1562e3d493 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-141.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-141.md @@ -4,34 +4,95 @@ title: Part 141 challengeType: 0 --- -## Description -
+# --description-- -After the `while` loop, set `text.innerText` to equal "You picked [guess]. Here are the random numbers:". Replace [guess] with the actual guess. +After the `while` loop, set `text.innerText` to equal "You picked \[guess]. Here are the random numbers:". Replace \[guess] with the actual guess. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: pickTwo(), assert(text.innerText === 'You picked 2. Here are the random numbers:'); +See description above for instructions. +```js +pickTwo(), + assert(text.innerText === 'You picked 2. Here are the random numbers:'); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-142.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-142.md index 94729a2b31..33635c68e8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-142.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-142.md @@ -4,34 +4,107 @@ title: Part 142 challengeType: 0 --- -## Description -
+# --description-- Before the final end quote in the string you just added, insert the new line escape sequence (`\n`). This will cause the next part you add to `text.innerText` to appear on a new line. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(pick.toString().replace(/\s/g, '').includes('text.innerText="Youpicked"+guess+".Herearetherandomnumbers:\\n";') || pick.toString().replace(/\s/g, '').includes('text.innerText="Youpicked".concat(guess,".Herearetherandomnumbers:\\n");')); +See description above for instructions. +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes( + 'text.innerText="Youpicked"+guess+".Herearetherandomnumbers:\\n";' + ) || + pick + .toString() + .replace(/\s/g, '') + .includes( + 'text.innerText="Youpicked".concat(guess,".Herearetherandomnumbers:\\n");' + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-143.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-143.md index 00f5ef670e..7e9f98e52f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-143.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-143.md @@ -4,8 +4,7 @@ title: Part 143 challengeType: 0 --- -## Description -
+# --description-- A `for` loop runs "for" a specific number of times. @@ -17,29 +16,90 @@ for (let x = 1; x < 5; x++) { } ``` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(pick.toString().replace(/\s/g, '').includes('for(varx=1;x<5;x++){')); # Also test for automatic loop protection +See description above for instructions. +```js +assert(pick.toString().replace(/\s/g, '').includes('for(varx=1;x<5;x++){')); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-144.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-144.md index f3812ef535..ae195e21ae 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-144.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-144.md @@ -4,38 +4,98 @@ title: Part 144 challengeType: 0 --- -## Description -
+# --description-- -For loops are declared with three optional expressions separated by semicolons: `for ([initialization]; [condition]; [final-expression])`. +For loops are declared with three optional expressions separated by semicolons: `for ([initialization]; [condition]; [final-expression])`. The initialization statement is executed only one time before the loop starts and is often used to define and set up the loop variable. Think of it like declaring a variable to use as a counter in your `for` loop. Many `for` loops use `i` as an initializer and start from 0, so change `let x = 1;` to `let i = 0;`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(pick.toString().replace(/\s/g, '').includes('for(vari=0;x<5;x++){')); # Also test for automatic loop protection +See description above for instructions. +```js +assert(pick.toString().replace(/\s/g, '').includes('for(vari=0;x<5;x++){')); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-145.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-145.md index 03600b54c0..3e0baa0c73 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-145.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-145.md @@ -4,36 +4,96 @@ title: Part 145 challengeType: 0 --- -## Description -
+# --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 it evaluates to true. We want the loop to run 10 times, so change `x < 5` to `i < 10`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(pick.toString().replace(/\s/g, '').includes('for(vari=0;i<10;x++){')); # Also test for automatic loop protection +See description above for instructions. +```js +assert(pick.toString().replace(/\s/g, '').includes('for(vari=0;i<10;x++){')); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-146.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-146.md index baf710243a..6ccab92a04 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-146.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-146.md @@ -4,36 +4,96 @@ title: Part 146 challengeType: 0 --- -## Description -
+# --description-- The last statement in a `for` loop is the final-expression, and is executed at the end of each loop iteration. Since we changed the initializer from `x` to `i`, change `x++` to `i++`. This will iterate the initializer `i` by 1 after each loop. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert(pick.toString().replace(/\s/g, '').includes('for(vari=0;i<10;i++){')); # Also test for automatic loop protection +See description above for instructions. +```js +assert(pick.toString().replace(/\s/g, '').includes('for(vari=0;i<10;i++){')); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-147.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-147.md index 02d0c1f05b..6bb65bebbf 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-147.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-147.md @@ -4,34 +4,99 @@ title: Part 147 challengeType: 0 --- -## Description -
+# --description-- Inside the for loop, use the `+=` operator to add to the end of `text.innerText`. Add the the number at index `i` in the `numbers` array with `numbers[i]`. Then add a new line. So the entire line inside the for loop should look like: `text.innerText += numbers[i] + "\n";` -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert( pick.toString().replace(/\s/g, '').includes('text.innerText+=numbers[i]+"\\n";}}') ); # Also test for automatic loop protection +See description above for instructions. +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes('text.innerText+=numbers[i]+"\\n";}}') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-148.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-148.md index ab49fb9509..9f3d846df8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-148.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-148.md @@ -4,36 +4,101 @@ title: Part 148 challengeType: 0 --- -## Description -
+# --description-- The `indexOf()` array method returns the first index at which a given element can be found in the array, or -1 if it is not present. After the for loop, add an `if` expression to check if the guessed number is in the `numbers` array. The condition of the `if` expression should check if `numbers.indexOf(guess) !== -1`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert( pick.toString().replace(/\s/g, '').includes('if(numbers.indexOf(guess)!==-1){}') ); +See description above for instructions. +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes('if(numbers.indexOf(guess)!==-1){}') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-149.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-149.md index eb653fff6f..57fd794ef5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-149.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-149.md @@ -4,34 +4,101 @@ title: Part 149 challengeType: 0 --- -## Description -
+# --description-- Inside the `if` expression, add the following string to the end of `text.innerText`: "Right! You win 20 gold!" Also, add 20 to the value of `gold` and update `goldText.innerText`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert( pick.toString().replace(/\s/g, '').includes('text.innerText+="Right!Youwin20gold!";') && pick.toString().replace(/\s/g, '').includes('gold+=20;') && pick.toString().replace(/\s/g, '').includes('goldText.innerText=gold;') ); +See description above for instructions. +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes('text.innerText+="Right!Youwin20gold!";') && + pick.toString().replace(/\s/g, '').includes('gold+=20;') && + pick.toString().replace(/\s/g, '').includes('goldText.innerText=gold;') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-150.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-150.md index 578f10a65b..82fdfced6f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-150.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-150.md @@ -4,34 +4,102 @@ title: Part 150 challengeType: 0 --- -## Description -
+# --description-- Add an `else` expression. Inside add "Wrong! You lose 10 health!" to the end of `text.innerText`. Also, subtract 10 from `health` and update `healthText.innerText`. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert( pick.toString().replace(/\s/g, '').includes('else{') && pick.toString().replace(/\s/g, '').includes('text.innerText+="Wrong!Youlose10health!";') && pick.toString().replace(/\s/g, '').includes('health-=10;') && pick.toString().replace(/\s/g, '').includes('healthText.innerText=health;') ); +See description above for instructions. +```js +assert( + pick.toString().replace(/\s/g, '').includes('else{') && + pick + .toString() + .replace(/\s/g, '') + .includes('text.innerText+="Wrong!Youlose10health!";') && + pick.toString().replace(/\s/g, '').includes('health-=10;') && + pick.toString().replace(/\s/g, '').includes('healthText.innerText=health;') +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-151.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-151.md index 60720118c4..8126352833 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-151.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-151.md @@ -4,34 +4,101 @@ title: Part 151 challengeType: 0 --- -## Description -
+# --description-- At the end of the `else` statement, check if `health` is less than or equal to zero. If so, call the `lose()` function. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: assert( pick.toString().replace(/\s/g, '').includes('else{text.innerText+="Wrong!Youlose10health!";health-=10;healthText.innerText=health;if(health<=0){lose();}}') ); +See description above for instructions. +```js +assert( + pick + .toString() + .replace(/\s/g, '') + .includes( + 'else{text.innerText+="Wrong!Youlose10health!";health-=10;healthText.innerText=health;if(health<=0){lose();}}' + ) +); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-152.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-152.md index b0c4d2c87d..9145c12021 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-152.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-152.md @@ -4,35 +4,104 @@ title: Part 152 challengeType: 0 --- -## Description -
+# --description-- Inside the `locations` array, on the `kill monster` object, "button functions" is currently set to `[goTown, goTown, goTown]`. Change the third `goTown` to `easterEgg`. This is how a player will access the hidden feature of the game. -
+# --hints-- -## Instructions -
- -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: | - assert.deepStrictEqual(locations[4], {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.'}); +See description above for instructions. +```js +assert.deepStrictEqual(locations[4], { + 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.' +}); ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-153.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-153.md index b92304bb65..e7230f773d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-153.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-153.md @@ -4,34 +4,94 @@ title: Part 153 challengeType: 0 --- -## Description -
+# --description-- Congratulations! You are finished! Now try out the game. -
+# --hints-- -## Instructions -
+See description above for instructions. -
- -## Tests -
- -```yml -tests: - - text: See description above for instructions. - testString: '' +```js ``` -
+# --seed-- -## Challenge Seed -
+## --before-user-code-- -
+```html + + + + + RPG - Dragon Repeller + + + +
+
+ XP: 0 + Health: 100 + Gold: 50 +
+
+ + + +
+
+ Monster Name: + Health: +
+
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+
+``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
- - -### Before Test -
- -```html - - - - - RPG - Dragon Repeller - - - -
-
- XP: 0 - Health: 100 - Gold: 50 -
-
- - - -
-
- Monster Name: - Health: -
-
Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
-
-``` - -
- - -### After Test -
- -```html - - -``` - -
- - -
- -## Solution -
- +# --solutions-- ```html ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md index ce54e3c516..565c6b0250 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md @@ -6,12 +6,15 @@ videoUrl: 'https://scrimba.com/c/cBZQbTz' forumTopicId: 16158 --- -## Description -
+# --description-- + We can access the data inside arrays using indexes. -Array indexes are written in the same bracket notation that strings use, except that instead of specifying a character, they are specifying an entry in the array. Like strings, arrays use zero-based indexing, so the first element in an array has an index of 0. -
-Example + +Array indexes are written in the same bracket notation that strings use, except that instead of specifying a character, they are specifying an entry in the array. Like strings, arrays use zero-based indexing, so the first element in an array has an index of `0`. + +
+ +**Example** ```js var array = [50,60,70]; @@ -19,62 +22,67 @@ array[0]; // equals 50 var data = array[1]; // equals 60 ``` -Note
There shouldn't be any spaces between the array name and the square brackets, like array [0]. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code. -
+**Note** +There shouldn't be any spaces between the array name and the square brackets, like `array [0]`. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code. -## Instructions -
-Create a variable called myData and set it to equal the first value of myArray using bracket notation. -
+# --instructions-- -## Tests -
+Create a variable called `myData` and set it to equal the first value of `myArray` using bracket notation. -```yml -tests: - - text: The variable myData should equal the first value of myArray. - testString: assert((function(){if(typeof myArray !== 'undefined' && typeof myData !== 'undefined' && myArray[0] === myData){return true;}else{return false;}})()); - - text: The data in variable myArray should be accessed using bracket notation. - testString: assert((function(){if(code.match(/\s*=\s*myArray\[0\]/g)){return true;}else{return false;}})()); +# --hints-- +The variable `myData` should equal the first value of `myArray`. + +```js +assert( + (function () { + if ( + typeof myArray !== 'undefined' && + typeof myData !== 'undefined' && + myArray[0] === myData + ) { + return true; + } else { + return false; + } + })() +); ``` -
+The data in variable `myArray` should be accessed using bracket notation. -## Challenge Seed -
+```js +assert( + (function () { + if (code.match(/\s*=\s*myArray\[0\]/g)) { + return true; + } else { + return false; + } + })() +); +``` -
+# --seed-- + +## --after-user-code-- + +```js +if(typeof myArray !== "undefined" && typeof myData !== "undefined"){(function(y,z){return 'myArray = ' + JSON.stringify(y) + ', myData = ' + JSON.stringify(z);})(myArray, myData);} +``` + +## --seed-contents-- ```js // Setup var myArray = [50,60,70]; // Only change code below this line - ``` -
- - -### After Test -
- -```js -if(typeof myArray !== "undefined" && typeof myData !== "undefined"){(function(y,z){return 'myArray = ' + JSON.stringify(y) + ', myData = ' + JSON.stringify(z);})(myArray, myData);} -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myArray = [50,60,70]; var myData = myArray[0]; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md index cbd2f8d3b9..0f25ac386d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/ckND4Cq' forumTopicId: 16159 --- -## Description -
-One way to think of a multi-dimensional array, is as an array of arrays. When you use brackets to access your array, the first set of brackets refers to the entries in the outer-most (the first level) array, and each additional pair of brackets refers to the next level of entries inside. -Example +# --description-- + +One way to think of a multi-dimensional array, is as an *array of arrays*. When you use brackets to access your array, the first set of brackets refers to the entries in the outer-most (the first level) array, and each additional pair of brackets refers to the next level of entries inside. + +**Example** ```js var arr = [ @@ -23,32 +24,36 @@ arr[3][0]; // equals [10,11,12] arr[3][0][1]; // equals 11 ``` -Note
There shouldn't be any spaces between the array name and the square brackets, like `array [0][0]` and even this `array [0] [0]` is not allowed. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code. -
+**Note** +There shouldn't be any spaces between the array name and the square brackets, like `array [0][0]` and even this `array [0] [0]` is not allowed. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code. -## Instructions -
-Using bracket notation select an element from myArray such that myData is equal to 8. -
+# --instructions-- -## Tests -
+Using bracket notation select an element from `myArray` such that `myData` is equal to `8`. -```yml -tests: - - text: myData should be equal to 8. - testString: assert(myData === 8); - - text: You should be using bracket notation to read the correct value from myArray. - testString: assert(/myData=myArray\[2\]\[1\]/.test(__helpers.removeWhiteSpace(code))); +# --hints-- +`myData` should be equal to `8`. + +```js +assert(myData === 8); ``` -
+You should be using bracket notation to read the correct value from `myArray`. -## Challenge Seed -
+```js +assert(/myData=myArray\[2\]\[1\]/.test(__helpers.removeWhiteSpace(code))); +``` -
+# --seed-- + +## --after-user-code-- + +```js +if(typeof myArray !== "undefined"){(function(){return "myData: " + myData + " myArray: " + JSON.stringify(myArray);})();} +``` + +## --seed-contents-- ```js // Setup @@ -56,30 +61,11 @@ var myArray = [[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]]; // Only change code below this line var myData = myArray[0][0]; - ``` -
- - -### After Test -
- -```js -if(typeof myArray !== "undefined"){(function(){return "myData: " + myData + " myArray: " + JSON.stringify(myArray);})();} -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myArray = [[1,2,3],[4,5,6], [7,8,9], [[10,11,12], 13, 14]]; var myData = myArray[2][1]; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.md index b04110b4a1..0e2b133623 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.md @@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cLeGDtZ' forumTopicId: 16160 --- -## Description -
+# --description-- + As we have seen in earlier examples, objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays. + Here is an example of how to access a nested array: ```js @@ -34,31 +35,38 @@ ourPets[0].names[1]; // "Fluffy" ourPets[1].names[0]; // "Spot" ``` -
+# --instructions-- -## Instructions -
-Retrieve the second tree from the variable myPlants using object dot and array bracket notation. -
+Retrieve the second tree from the variable `myPlants` using object dot and array bracket notation. -## Tests -
+# --hints-- -```yml -tests: - - text: secondTree should equal "pine". - testString: assert(secondTree === "pine"); - - text: Your code should use dot and bracket notation to access myPlants. - testString: assert(/=\s*myPlants\[1\].list\[1\]/.test(code)); +`secondTree` should equal "pine". +```js +assert(secondTree === 'pine'); ``` -
+Your code should use dot and bracket notation to access `myPlants`. -## Challenge Seed -
+```js +assert(/=\s*myPlants\[1\].list\[1\]/.test(code)); +``` -
+# --seed-- + +## --after-user-code-- + +```js +(function(x) { + if(typeof x != 'undefined') { + return "secondTree = " + x; + } + return "secondTree is undefined"; +})(secondTree); +``` + +## --seed-contents-- ```js // Setup @@ -84,31 +92,9 @@ var myPlants = [ // Only change code below this line var secondTree = ""; // Change this line - ``` -
- - -### After Test -
- -```js -(function(x) { - if(typeof x != 'undefined') { - return "secondTree = " + x; - } - return "secondTree is undefined"; -})(secondTree); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myPlants = [ @@ -134,5 +120,3 @@ var myPlants = [ var secondTree = myPlants[1].list[1]; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md index 7c354725f3..43cb508ad2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md @@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cRnRnfa' forumTopicId: 16161 --- -## Description -
+# --description-- + The sub-properties of objects can be accessed by chaining together the dot or bracket notation. + Here is a nested object: ```js @@ -28,31 +29,38 @@ ourStorage.cabinet["top drawer"].folder2; // "secrets" ourStorage.desk.drawer; // "stapler" ``` -
+# --instructions-- -## Instructions -
-Access the myStorage object and assign the contents of the glove box property to the gloveBoxContents variable. Use dot notation for all properties where possible, otherwise use bracket notation. -
+Access the `myStorage` object and assign the contents of the `glove box` property to the `gloveBoxContents` variable. Use dot notation for all properties where possible, otherwise use bracket notation. -## Tests -
+# --hints-- -```yml -tests: - - text: gloveBoxContents should equal "maps". - testString: assert(gloveBoxContents === "maps"); - - text: Your code should use dot and bracket notation to access myStorage. - testString: assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code)); +`gloveBoxContents` should equal "maps". +```js +assert(gloveBoxContents === 'maps'); ``` -
+Your code should use dot and bracket notation to access `myStorage`. -## Challenge Seed -
+```js +assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code)); +``` -
+# --seed-- + +## --after-user-code-- + +```js +(function(x) { + if(typeof x != 'undefined') { + return "gloveBoxContents = " + x; + } + return "gloveBoxContents is undefined"; +})(gloveBoxContents); +``` + +## --seed-contents-- ```js // Setup @@ -69,31 +77,9 @@ var myStorage = { }; var gloveBoxContents = undefined; // Change this line - ``` -
- - -### After Test -
- -```js -(function(x) { - if(typeof x != 'undefined') { - return "gloveBoxContents = " + x; - } - return "gloveBoxContents is undefined"; -})(gloveBoxContents); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myStorage = { @@ -109,5 +95,3 @@ var myStorage = { }; var gloveBoxContents = myStorage.car.inside["glove box"]; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md index 331e0a4ef7..159cdb42e6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md @@ -6,10 +6,12 @@ videoUrl: 'https://scrimba.com/c/cBvmEHP' forumTopicId: 16163 --- -## Description -
-The second way to access the properties of an object is bracket notation ([]). If the property of the object you are trying to access has a space in its name, you will need to use bracket notation. +# --description-- + +The second way to access the properties of an object is bracket notation (`[]`). If the property of the object you are trying to access has a space in its name, you will need to use bracket notation. + However, you can still use bracket notation on object properties without spaces. + Here is a sample of using bracket notation to read an object's property: ```js @@ -24,37 +26,52 @@ myObj["NoSpace"]; // USS Enterprise ``` Note that property names with spaces in them must be in quotes (single or double). -
-## Instructions -
-Read the values of the properties "an entree" and "the drink" of testObj using bracket notation and assign them to entreeValue and drinkValue respectively. -
+# --instructions-- -## Tests -
+Read the values of the properties `"an entree"` and `"the drink"` of `testObj` using bracket notation and assign them to `entreeValue` and `drinkValue` respectively. -```yml -tests: - - text: entreeValue should be a string - testString: assert(typeof entreeValue === 'string' ); - - text: The value of entreeValue should be "hamburger" - testString: assert(entreeValue === 'hamburger' ); - - text: drinkValue should be a string - testString: assert(typeof drinkValue === 'string' ); - - text: The value of drinkValue should be "water" - testString: assert(drinkValue === 'water' ); - - text: You should use bracket notation twice - testString: assert(code.match(/testObj\s*?\[('|")[^'"]+\1\]/g).length > 1); +# --hints-- +`entreeValue` should be a string + +```js +assert(typeof entreeValue === 'string'); ``` -
+The value of `entreeValue` should be `"hamburger"` -## Challenge Seed -
+```js +assert(entreeValue === 'hamburger'); +``` -
+`drinkValue` should be a string + +```js +assert(typeof drinkValue === 'string'); +``` + +The value of `drinkValue` should be `"water"` + +```js +assert(drinkValue === 'water'); +``` + +You should use bracket notation twice + +```js +assert(code.match(/testObj\s*?\[('|")[^'"]+\1\]/g).length > 1); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(a,b) { return "entreeValue = '" + a + "', drinkValue = '" + b + "'"; })(entreeValue,drinkValue); +``` + +## --seed-contents-- ```js // Setup @@ -70,23 +87,7 @@ var entreeValue = testObj; // Change this line var drinkValue = testObj; // Change this line ``` -
- - -### After Test -
- -```js -(function(a,b) { return "entreeValue = '" + a + "', drinkValue = '" + b + "'"; })(entreeValue,drinkValue); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var testObj = { @@ -97,5 +98,3 @@ var testObj = { var entreeValue = testObj["an entree"]; var drinkValue = testObj['the drink']; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md index adbfe55ae8..4791968cc1 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md @@ -6,11 +6,13 @@ videoUrl: 'https://scrimba.com/c/cGryJs8' forumTopicId: 16164 --- -## Description -
-There are two ways to access the properties of an object: dot notation (.) and bracket notation ([]), similar to an array. +# --description-- + +There are two ways to access the properties of an object: dot notation (`.`) and bracket notation (`[]`), similar to an array. + Dot notation is what you use when you know the name of the property you're trying to access ahead of time. -Here is a sample of using dot notation (.) to read an object's property: + +Here is a sample of using dot notation (`.`) to read an object's property: ```js var myObj = { @@ -21,37 +23,51 @@ var prop1val = myObj.prop1; // val1 var prop2val = myObj.prop2; // val2 ``` -
+# --instructions-- -## Instructions -
-Read in the property values of testObj using dot notation. Set the variable hatValue equal to the object's property hat and set the variable shirtValue equal to the object's property shirt. -
+Read in the property values of `testObj` using dot notation. Set the variable `hatValue` equal to the object's property `hat` and set the variable `shirtValue` equal to the object's property `shirt`. -## Tests -
+# --hints-- -```yml -tests: - - text: hatValue should be a string - testString: assert(typeof hatValue === 'string' ); - - text: The value of hatValue should be "ballcap" - testString: assert(hatValue === 'ballcap' ); - - text: shirtValue should be a string - testString: assert(typeof shirtValue === 'string' ); - - text: The value of shirtValue should be "jersey" - testString: assert(shirtValue === 'jersey' ); - - text: You should use dot notation twice - testString: assert(code.match(/testObj\.\w+/g).length > 1); +`hatValue` should be a string +```js +assert(typeof hatValue === 'string'); ``` -
+The value of `hatValue` should be `"ballcap"` -## Challenge Seed -
+```js +assert(hatValue === 'ballcap'); +``` -
+`shirtValue` should be a string + +```js +assert(typeof shirtValue === 'string'); +``` + +The value of `shirtValue` should be `"jersey"` + +```js +assert(shirtValue === 'jersey'); +``` + +You should use dot notation twice + +```js +assert(code.match(/testObj\.\w+/g).length > 1); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(a,b) { return "hatValue = '" + a + "', shirtValue = '" + b + "'"; })(hatValue,shirtValue); +``` + +## --seed-contents-- ```js // Setup @@ -67,23 +83,7 @@ var hatValue = testObj; // Change this line var shirtValue = testObj; // Change this line ``` -
- - -### After Test -
- -```js -(function(a,b) { return "hatValue = '" + a + "', shirtValue = '" + b + "'"; })(hatValue,shirtValue); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var testObj = { @@ -95,5 +95,3 @@ var testObj = { var hatValue = testObj.hat; var shirtValue = testObj.shirt; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md index 3a2fb7fa55..95ac42970a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md @@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cnQyKur' forumTopicId: 16165 --- -## Description -
+# --description-- + Another use of bracket notation on objects is to access a property which is stored as the value of a variable. This can be very useful for iterating through an object's properties or when accessing a lookup table. + Here is an example of using a variable to access a property: ```js @@ -34,40 +35,59 @@ var someProp = propPrefix("Name"); // someProp now holds the value 'propName' console.log(someObj[someProp]); // "John" ``` -Note that we do not use quotes around the variable name when using it to access the property because we are using the value of the variable, not the name. -
+Note that we do *not* use quotes around the variable name when using it to access the property because we are using the *value* of the variable, not the *name*. -## Instructions -
-Set the playerNumber variable to 16. Then, use the variable to look up the player's name and assign it to player. -
+# --instructions-- -## Tests -
+Set the `playerNumber` variable to `16`. Then, use the variable to look up the player's name and assign it to `player`. -```yml -tests: - - text: playerNumber should be a number - testString: assert(typeof playerNumber === 'number'); - - text: The variable player should be a string - testString: assert(typeof player === 'string'); - - text: The value of player should be "Montana" - testString: assert(player === 'Montana'); - - text: You should use bracket notation to access testObj - testString: assert(/testObj\s*?\[.*?\]/.test(code)); - - text: You should not assign the value Montana to the variable player directly. - testString: assert(!code.match(/player\s*=\s*"|\'\s*Montana\s*"|\'\s*;/gi)); - - text: You should be using the variable playerNumber in your bracket notation - testString: assert(/testObj\s*?\[\s*playerNumber\s*\]/.test(code)); +# --hints-- +`playerNumber` should be a number + +```js +assert(typeof playerNumber === 'number'); ``` -
+The variable `player` should be a string -## Challenge Seed -
+```js +assert(typeof player === 'string'); +``` -
+The value of `player` should be "Montana" + +```js +assert(player === 'Montana'); +``` + +You should use bracket notation to access `testObj` + +```js +assert(/testObj\s*?\[.*?\]/.test(code)); +``` + +You should not assign the value `Montana` to the variable `player` directly. + +```js +assert(!code.match(/player\s*=\s*"|\'\s*Montana\s*"|\'\s*;/gi)); +``` + +You should be using the variable `playerNumber` in your bracket notation + +```js +assert(/testObj\s*?\[\s*playerNumber\s*\]/.test(code)); +``` + +# --seed-- + +## --after-user-code-- + +```js +if(typeof player !== "undefined"){(function(v){return v;})(player);} +``` + +## --seed-contents-- ```js // Setup @@ -83,23 +103,7 @@ var playerNumber; // Change this line var player = testObj; // Change this line ``` -
- - -### After Test -
- -```js -if(typeof player !== "undefined"){(function(v){return v;})(player);} -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var testObj = { @@ -110,5 +114,3 @@ var testObj = { var playerNumber = 16; var player = testObj[playerNumber]; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object.md index 7614aabd1d..18774ef640 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object.md @@ -6,14 +6,19 @@ videoUrl: 'https://scrimba.com/c/cQe38UD' forumTopicId: 301169 --- -## Description -
+# --description-- + You can add new properties to existing JavaScript objects the same way you would modify them. -Here's how we would add a "bark" property to ourDog: -ourDog.bark = "bow-wow"; + +Here's how we would add a `"bark"` property to `ourDog`: + +`ourDog.bark = "bow-wow";` + or -ourDog["bark"] = "bow-wow"; -Now when we evaluate ourDog.bark, we'll get his bark, "bow-wow". + +`ourDog["bark"] = "bow-wow";` + +Now when we evaluate `ourDog.bark`, we'll get his bark, "bow-wow". Example: @@ -28,31 +33,33 @@ var ourDog = { ourDog.bark = "bow-wow"; ``` -
+# --instructions-- -## Instructions -
-Add a "bark" property to myDog and set it to a dog sound, such as "woof". You may use either dot or bracket notation. -
+Add a `"bark"` property to `myDog` and set it to a dog sound, such as "woof". You may use either dot or bracket notation. -## Tests -
+# --hints-- -```yml -tests: - - text: You should add the property "bark" to myDog. - testString: assert(myDog.bark !== undefined); - - text: You should not add "bark" to the setup section. - testString: assert(!/bark[^\n]:/.test(code)); +You should add the property `"bark"` to `myDog`. +```js +assert(myDog.bark !== undefined); ``` -
+You should not add `"bark"` to the setup section. -## Challenge Seed -
+```js +assert(!/bark[^\n]:/.test(code)); +``` -
+# --seed-- + +## --after-user-code-- + +```js +(function(z){return z;})(myDog); +``` + +## --seed-contents-- ```js // Setup @@ -64,26 +71,9 @@ var myDog = { }; // Only change code below this line - ``` -
- - -### After Test -
- -```js -(function(z){return z;})(myDog); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myDog = { @@ -94,5 +84,3 @@ var myDog = { }; myDog.bark = "Woof Woof"; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.md index adad0bd793..f455c491fa 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.md @@ -6,68 +6,54 @@ videoUrl: 'https://scrimba.com/c/cM2KBAG' forumTopicId: 16650 --- -## Description -
-Number is a data type in JavaScript which represents numeric data. +# --description-- + +`Number` is a data type in JavaScript which represents numeric data. + Now let's try to add two numbers using JavaScript. -JavaScript uses the + symbol as an addition operator when placed between two numbers. -Example: + +JavaScript uses the `+` symbol as an addition operator when placed between two numbers. + +**Example:** ```js myVar = 5 + 10; // assigned 15 ``` -
+# --instructions-- -## Instructions -
-Change the 0 so that sum will equal 20. -
+Change the `0` so that sum will equal `20`. -## Tests -
+# --hints-- -```yml -tests: - - text: sum should equal 20. - testString: assert(sum === 20); - - text: You should use the + operator. - testString: assert(/\+/.test(code)); - -``` - -
- -## Challenge Seed -
- -
+`sum` should equal `20`. ```js -var sum = 10 + 0; - +assert(sum === 20); ``` -
+You should use the `+` operator. +```js +assert(/\+/.test(code)); +``` -### After Test -
+# --seed-- + +## --after-user-code-- ```js (function(z){return 'sum = '+z;})(sum); ``` -
+## --seed-contents-- -
- -## Solution -
+```js +var sum = 10 + 0; +``` +# --solutions-- ```js var sum = 10 + 10; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.md index 31da473db6..e291b3cecc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/c3JvVfg' forumTopicId: 16653 --- -## Description -
-In a switch statement you may not be able to specify all possible values as case statements. Instead, you can add the default statement which will be executed if no matching case statements are found. Think of it like the final else statement in an if/else chain. -A default statement should be the last case. +# --description-- + +In a `switch` statement you may not be able to specify all possible values as `case` statements. Instead, you can add the `default` statement which will be executed if no matching `case` statements are found. Think of it like the final `else` statement in an `if/else` chain. + +A `default` statement should be the last case. ```js switch (num) { @@ -26,43 +27,67 @@ switch (num) { } ``` -
+# --instructions-- -## Instructions -
-Write a switch statement to set answer for the following conditions:
"a" - "apple"
"b" - "bird"
"c" - "cat"
default - "stuff" -
+Write a switch statement to set `answer` for the following conditions: +`"a"` - "apple" +`"b"` - "bird" +`"c"` - "cat" +`default` - "stuff" -## Tests -
+# --hints-- -```yml -tests: - - text: switchOfStuff("a") should have a value of "apple" - testString: assert(switchOfStuff("a") === "apple"); - - text: switchOfStuff("b") should have a value of "bird" - testString: assert(switchOfStuff("b") === "bird"); - - text: switchOfStuff("c") should have a value of "cat" - testString: assert(switchOfStuff("c") === "cat"); - - text: switchOfStuff("d") should have a value of "stuff" - testString: assert(switchOfStuff("d") === "stuff"); - - text: switchOfStuff(4) should have a value of "stuff" - testString: assert(switchOfStuff(4) === "stuff"); - - text: You should not use any if or else statements - testString: assert(!/else/g.test(code) || !/if/g.test(code)); - - text: You should use a default statement - testString: assert(switchOfStuff("string-to-trigger-default-case") === "stuff"); - - text: You should have at least 3 break statements - testString: assert(code.match(/break/g).length > 2); +`switchOfStuff("a")` should have a value of "apple" +```js +assert(switchOfStuff('a') === 'apple'); ``` -
+`switchOfStuff("b")` should have a value of "bird" -## Challenge Seed -
+```js +assert(switchOfStuff('b') === 'bird'); +``` -
+`switchOfStuff("c")` should have a value of "cat" + +```js +assert(switchOfStuff('c') === 'cat'); +``` + +`switchOfStuff("d")` should have a value of "stuff" + +```js +assert(switchOfStuff('d') === 'stuff'); +``` + +`switchOfStuff(4)` should have a value of "stuff" + +```js +assert(switchOfStuff(4) === 'stuff'); +``` + +You should not use any `if` or `else` statements + +```js +assert(!/else/g.test(code) || !/if/g.test(code)); +``` + +You should use a `default` statement + +```js +assert(switchOfStuff('string-to-trigger-default-case') === 'stuff'); +``` + +You should have at least 3 `break` statements + +```js +assert(code.match(/break/g).length > 2); +``` + +# --seed-- + +## --seed-contents-- ```js function switchOfStuff(val) { @@ -76,18 +101,9 @@ function switchOfStuff(val) { } switchOfStuff(1); - ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function switchOfStuff(val) { @@ -109,5 +125,3 @@ function switchOfStuff(val) { return answer; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/appending-variables-to-strings.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/appending-variables-to-strings.md index 15540d5134..688cea3244 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/appending-variables-to-strings.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/appending-variables-to-strings.md @@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/c/cbQmZfa' forumTopicId: 16656 --- -## Description -
-Just as we can build a string over multiple lines out of string literals, we can also append variables to a string using the plus equals (+=) operator. +# --description-- + +Just as we can build a string over multiple lines out of string literals, we can also append variables to a string using the plus equals (`+=`) operator. Example: @@ -19,45 +19,27 @@ ourStr += anAdjective; // ourStr is now "freeCodeCamp is awesome!" ``` -
+# --instructions-- -## Instructions -
-Set someAdjective to a string of at least 3 characters and append it to myStr using the += operator. -
+Set `someAdjective` to a string of at least 3 characters and append it to `myStr` using the `+=` operator. -## Tests -
+# --hints-- -```yml -tests: - - text: someAdjective should be set to a string at least 3 characters long. - testString: assert(typeof someAdjective !== 'undefined' && someAdjective.length > 2); - - text: You should append someAdjective to myStr using the += operator. - testString: assert(code.match(/myStr\s*\+=\s*someAdjective\s*/).length > 0); - -``` - -
- -## Challenge Seed -
- -
+`someAdjective` should be set to a string at least 3 characters long. ```js -// Change code below this line - -var someAdjective; -var myStr = "Learning to code is "; - +assert(typeof someAdjective !== 'undefined' && someAdjective.length > 2); ``` -
+You should append `someAdjective` to `myStr` using the `+=` operator. +```js +assert(code.match(/myStr\s*\+=\s*someAdjective\s*/).length > 0); +``` -### After Test -
+# --seed-- + +## --after-user-code-- ```js (function(){ @@ -76,18 +58,19 @@ var myStr = "Learning to code is "; })(); ``` -
+## --seed-contents-- -
+```js +// Change code below this line -## Solution -
+var someAdjective; +var myStr = "Learning to code is "; +``` +# --solutions-- ```js var someAdjective = "neat"; var myStr = "Learning to code is "; myStr += someAdjective; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md index b688730ab6..b2d00d91a0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md @@ -6,9 +6,8 @@ videoUrl: '' forumTopicId: 418265 --- -## Description +# --description-- -
After a value is assigned to a variable using the assignment operator, you can assign the value of that variable to another variable using the assignment operator. ```js @@ -20,50 +19,33 @@ myNum = myVar; The above declares a `myVar` variable with no value, then assigns it the value `5`. Next, a variable named `myNum` is declared with no value. Then, the contents of `myVar` (which is `5`) is assigned to the variable `myNum`. Now, `myNum` also has the value of `5`. -
+# --instructions-- -## Instructions +Assign the contents of `a` to variable `b`. -
-Assign the contents of a to variable b. -
+# --hints-- -## Tests - -
- -```yml -tests: - - text: You should not change code above the specified comment. - testString: assert(/var a;/.test(code) && /a = 7;/.test(code) && /var b;/.test(code)); - - text: b should have a value of 7. - testString: assert(typeof b === 'number' && b === 7); - - text: a should be assigned to b with =. - testString: assert(/b\s*=\s*a\s*/g.test(code)); -``` - -
- -## Challenge Seed - -
- -
+You should not change code above the specified comment. ```js -// Setup -var a; -a = 7; -var b; - -// Only change code below this line +assert(/var a;/.test(code) && /a = 7;/.test(code) && /var b;/.test(code)); ``` -
+`b` should have a value of 7. -### Before Test +```js +assert(typeof b === 'number' && b === 7); +``` -
+`a` should be assigned to `b` with `=`. + +```js +assert(/b\s*=\s*a\s*/g.test(code)); +``` + +# --seed-- + +## --before-user-code-- ```js if (typeof a != 'undefined') { @@ -74,11 +56,7 @@ if (typeof b != 'undefined') { } ``` -
- -### After Test - -
+## --after-user-code-- ```js (function(a, b) { @@ -86,13 +64,18 @@ if (typeof b != 'undefined') { })(a, b); ``` -
+## --seed-contents-- -
+```js +// Setup +var a; +a = 7; +var b; -## Solution +// Only change code below this line +``` -
+# --solutions-- ```js var a; @@ -100,5 +83,3 @@ a = 7; var b; b = a; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md index dacc521208..1ff2a47a26 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md @@ -6,37 +6,43 @@ videoUrl: 'https://scrimba.com/c/ce2pEtB' forumTopicId: 16658 --- -## Description -
-If you'll recall from our discussion of Storing Values with the Assignment Operator, everything to the right of the equal sign is resolved before the value is assigned. This means we can take the return value of a function and assign it to a variable. -Assume we have pre-defined a function sum which adds two numbers together, then: -ourSum = sum(5, 12); -will call sum function, which returns a value of 17 and assigns it to ourSum variable. -
+# --description-- -## Instructions -
-Call the processArg function with an argument of 7 and assign its return value to the variable processed. -
+If you'll recall from our discussion of [Storing Values with the Assignment Operator](/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator), everything to the right of the equal sign is resolved before the value is assigned. This means we can take the return value of a function and assign it to a variable. -## Tests -
+Assume we have pre-defined a function `sum` which adds two numbers together, then: -```yml -tests: - - text: processed should have a value of 2 - testString: assert(processed === 2); - - text: You should assign processArg to processed - testString: assert(/processed\s*=\s*processArg\(\s*7\s*\)/.test(code)); +`ourSum = sum(5, 12);` +will call `sum` function, which returns a value of `17` and assigns it to `ourSum` variable. + +# --instructions-- + +Call the `processArg` function with an argument of `7` and assign its return value to the variable `processed`. + +# --hints-- + +`processed` should have a value of `2` + +```js +assert(processed === 2); ``` -
+You should assign `processArg` to `processed` -## Challenge Seed -
+```js +assert(/processed\s*=\s*processArg\(\s*7\s*\)/.test(code)); +``` -
+# --seed-- + +## --after-user-code-- + +```js +(function(){return "processed = " + processed})(); +``` + +## --seed-contents-- ```js // Setup @@ -47,26 +53,9 @@ function processArg(num) { } // Only change code below this line - ``` -
- - -### After Test -
- -```js -(function(){return "processed = " + processed})(); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var processed = 0; @@ -77,5 +66,3 @@ function processArg(num) { processed = processArg(7); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.md index 6d7f074ab9..9072cf7c35 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.md @@ -6,11 +6,14 @@ videoUrl: 'https://scrimba.com/c/cWGkbtd' forumTopicId: 16769 --- -## Description -
-You may have heard the term object before. -Objects are similar to arrays, except that instead of using indexes to access and modify their data, you access the data in objects through what are called properties. +# --description-- + +You may have heard the term `object` before. + +Objects are similar to `arrays`, except that instead of using indexes to access and modify their data, you access the data in objects through what are called `properties`. + Objects are useful for storing data in a structured way, and can represent real world objects, like a cat. + Here's a sample cat object: ```js @@ -22,7 +25,7 @@ var cat = { }; ``` -In this example, all the properties are stored as strings, such as - "name", "legs", and "tails". However, you can also use numbers as properties. You can even omit the quotes for single-word string properties, as follows: +In this example, all the properties are stored as strings, such as - `"name"`, `"legs"`, and `"tails"`. However, you can also use numbers as properties. You can even omit the quotes for single-word string properties, as follows: ```js var anotherObject = { @@ -33,38 +36,106 @@ var anotherObject = { ``` However, if your object has any non-string properties, JavaScript will automatically typecast them as strings. -
-## Instructions -
-Make an object that represents a dog called myDog which contains the properties "name" (a string), "legs", "tails" and "friends". -You can set these object properties to whatever values you want, as long as "name" is a string, "legs" and "tails" are numbers, and "friends" is an array. -
+# --instructions-- -## Tests -
+Make an object that represents a dog called `myDog` which contains the properties `"name"` (a string), `"legs"`, `"tails"` and `"friends"`. -```yml -tests: - - text: myDog should contain the property name and it should be a string. - testString: assert((function(z){if(z.hasOwnProperty("name") && z.name !== undefined && typeof z.name === "string"){return true;}else{return false;}})(myDog)); - - text: myDog should contain the property legs and it should be a number. - testString: assert((function(z){if(z.hasOwnProperty("legs") && z.legs !== undefined && typeof z.legs === "number"){return true;}else{return false;}})(myDog)); - - text: myDog should contain the property tails and it should be a number. - testString: assert((function(z){if(z.hasOwnProperty("tails") && z.tails !== undefined && typeof z.tails === "number"){return true;}else{return false;}})(myDog)); - - text: myDog should contain the property friends and it should be an array. - testString: assert((function(z){if(z.hasOwnProperty("friends") && z.friends !== undefined && Array.isArray(z.friends)){return true;}else{return false;}})(myDog)); - - text: myDog should only contain all the given properties. - testString: assert((function(z){return Object.keys(z).length === 4;})(myDog)); +You can set these object properties to whatever values you want, as long as `"name"` is a string, `"legs"` and `"tails"` are numbers, and `"friends"` is an array. +# --hints-- + +`myDog` should contain the property `name` and it should be a `string`. + +```js +assert( + (function (z) { + if ( + z.hasOwnProperty('name') && + z.name !== undefined && + typeof z.name === 'string' + ) { + return true; + } else { + return false; + } + })(myDog) +); ``` -
+`myDog` should contain the property `legs` and it should be a `number`. -## Challenge Seed -
+```js +assert( + (function (z) { + if ( + z.hasOwnProperty('legs') && + z.legs !== undefined && + typeof z.legs === 'number' + ) { + return true; + } else { + return false; + } + })(myDog) +); +``` -
+`myDog` should contain the property `tails` and it should be a `number`. + +```js +assert( + (function (z) { + if ( + z.hasOwnProperty('tails') && + z.tails !== undefined && + typeof z.tails === 'number' + ) { + return true; + } else { + return false; + } + })(myDog) +); +``` + +`myDog` should contain the property `friends` and it should be an `array`. + +```js +assert( + (function (z) { + if ( + z.hasOwnProperty('friends') && + z.friends !== undefined && + Array.isArray(z.friends) + ) { + return true; + } else { + return false; + } + })(myDog) +); +``` + +`myDog` should only contain all the given properties. + +```js +assert( + (function (z) { + return Object.keys(z).length === 4; + })(myDog) +); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(z){return z;})(myDog); +``` + +## --seed-contents-- ```js var myDog = { @@ -75,23 +146,7 @@ var myDog = { }; ``` -
- - -### After Test -
- -```js -(function(z){return z;})(myDog); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myDog = { @@ -101,5 +156,3 @@ var myDog = { "friends": ["everything!"] }; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.md index 874eb2c99a..5eb021acfc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.md @@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/c/caeJgsw' forumTopicId: 16772 --- -## Description -
-if/else statements can be chained together for complex logic. Here is pseudocode of multiple chained if / else if statements: +# --description-- + +`if/else` statements can be chained together for complex logic. Here is pseudocode of multiple chained `if` / `else if` statements: ```js if (condition1) { @@ -23,54 +23,99 @@ if (condition1) { } ``` -
+# --instructions-- -## Instructions -
-Write chained if/else if statements to fulfill the following conditions: -num < 5 - return "Tiny"
num < 10 - return "Small"
num < 15 - return "Medium"
num < 20 - return "Large"
num >= 20 - return "Huge" -
+Write chained `if`/`else if` statements to fulfill the following conditions: -## Tests -
+`num < 5` - return "Tiny" +`num < 10` - return "Small" +`num < 15` - return "Medium" +`num < 20` - return "Large" +`num >= 20` - return "Huge" -```yml -tests: - - text: You should have at least four else statements - testString: assert(code.match(/else/g).length > 3); - - text: You should have at least four if statements - testString: assert(code.match(/if/g).length > 3); - - text: You should have at least one return statement - testString: assert(code.match(/return/g).length >= 1); - - text: testSize(0) should return "Tiny" - testString: assert(testSize(0) === "Tiny"); - - text: testSize(4) should return "Tiny" - testString: assert(testSize(4) === "Tiny"); - - text: testSize(5) should return "Small" - testString: assert(testSize(5) === "Small"); - - text: testSize(8) should return "Small" - testString: assert(testSize(8) === "Small"); - - text: testSize(10) should return "Medium" - testString: assert(testSize(10) === "Medium"); - - text: testSize(14) should return "Medium" - testString: assert(testSize(14) === "Medium"); - - text: testSize(15) should return "Large" - testString: assert(testSize(15) === "Large"); - - text: testSize(17) should return "Large" - testString: assert(testSize(17) === "Large"); - - text: testSize(20) should return "Huge" - testString: assert(testSize(20) === "Huge"); - - text: testSize(25) should return "Huge" - testString: assert(testSize(25) === "Huge"); +# --hints-- +You should have at least four `else` statements + +```js +assert(code.match(/else/g).length > 3); ``` -
+You should have at least four `if` statements -## Challenge Seed -
+```js +assert(code.match(/if/g).length > 3); +``` -
+You should have at least one `return` statement + +```js +assert(code.match(/return/g).length >= 1); +``` + +`testSize(0)` should return "Tiny" + +```js +assert(testSize(0) === 'Tiny'); +``` + +`testSize(4)` should return "Tiny" + +```js +assert(testSize(4) === 'Tiny'); +``` + +`testSize(5)` should return "Small" + +```js +assert(testSize(5) === 'Small'); +``` + +`testSize(8)` should return "Small" + +```js +assert(testSize(8) === 'Small'); +``` + +`testSize(10)` should return "Medium" + +```js +assert(testSize(10) === 'Medium'); +``` + +`testSize(14)` should return "Medium" + +```js +assert(testSize(14) === 'Medium'); +``` + +`testSize(15)` should return "Large" + +```js +assert(testSize(15) === 'Large'); +``` + +`testSize(17)` should return "Large" + +```js +assert(testSize(17) === 'Large'); +``` + +`testSize(20)` should return "Huge" + +```js +assert(testSize(20) === 'Huge'); +``` + +`testSize(25)` should return "Huge" + +```js +assert(testSize(25) === 'Huge'); +``` + +# --seed-- + +## --seed-contents-- ```js function testSize(num) { @@ -84,15 +129,7 @@ function testSize(num) { testSize(7); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function testSize(num) { @@ -109,5 +146,3 @@ function testSize(num) { } } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md index 7bfbbaf5af..21e7f5d03d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md @@ -6,67 +6,56 @@ videoUrl: 'https://scrimba.com/c/c7ynnTp' forumTopicId: 16783 --- -## Description -
+# --description-- + Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does. + There are two ways to write comments in JavaScript: -Using // will tell JavaScript to ignore the remainder of the text on the current line: + +Using `//` will tell JavaScript to ignore the remainder of the text on the current line: ```js // This is an in-line comment. ``` -You can make a multi-line comment beginning with /\* and ending with \*/: +You can make a multi-line comment beginning with `/*` and ending with `*/`: ```js /* This is a multi-line comment */ ``` -Best Practice
As you write code, you should regularly add comments to clarify the function of parts of your code. Good commenting can help communicate the intent of your code—both for others and for your future self. -
+**Best Practice** +As you write code, you should regularly add comments to clarify the function of parts of your code. Good commenting can help communicate the intent of your code—both for others *and* for your future self. + +# --instructions-- -## Instructions -
Try creating one of each type of comment. -
-## Tests -
+# --hints-- -```yml -tests: - - text: You should create a // style comment that contains at least five letters. - testString: assert(code.match(/(\/\/)...../g)); - - text: You should create a /* */ style comment that contains at least five letters. - testString: assert(code.match(/(\/\*)([^\/]{5,})(?=\*\/)/gm)); - -``` - -
- -## Challenge Seed -
- -
+You should create a `//` style comment that contains at least five letters. ```js - +assert(code.match(/(\/\/)...../g)); ``` -
+You should create a `/* */` style comment that contains at least five letters. +```js +assert(code.match(/(\/\*)([^\/]{5,})(?=\*\/)/gm)); +``` +# --seed-- -
+## --seed-contents-- -## Solution -
+```js +``` +# --solutions-- ```js // Fake Comment /* Another Comment */ ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md index 5913f97743..93e30d7176 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cKyVMAL' forumTopicId: 16784 --- -## Description -
-There are many comparison operators in JavaScript. All of these operators return a boolean true or false value. -The most basic operator is the equality operator ==. The equality operator compares two values and returns true if they're equivalent or false if they are not. Note that equality is different from assignment (=), which assigns the value on the right of the operator to a variable on the left. +# --description-- + +There are many comparison operators in JavaScript. All of these operators return a boolean `true` or `false` value. + +The most basic operator is the equality operator `==`. The equality operator compares two values and returns `true` if they're equivalent or `false` if they are not. Note that equality is different from assignment (`=`), which assigns the value on the right of the operator to a variable on the left. ```js function equalityTest(myVal) { @@ -20,8 +21,7 @@ function equalityTest(myVal) { } ``` -If myVal is equal to 10, the equality operator returns true, so the code in the curly braces will execute, and the function will return "Equal". Otherwise, the function will return "Not Equal". -In order for JavaScript to compare two different data types (for example, numbers and strings), it must convert one type to another. This is known as "Type Coercion". Once it does, however, it can compare terms as follows: +If `myVal` is equal to `10`, the equality operator returns `true`, so the code in the curly braces will execute, and the function will return `"Equal"`. Otherwise, the function will return `"Not Equal"`. In order for JavaScript to compare two different data types (for example, `numbers` and `strings`), it must convert one type to another. This is known as "Type Coercion". Once it does, however, it can compare terms as follows: ```js 1 == 1 // true @@ -30,35 +30,39 @@ In order for JavaScript to compare two different data types (for exam "3" == 3 // true ``` -
+# --instructions-- -## Instructions -
-Add the equality operator to the indicated line so that the function will return "Equal" when val is equivalent to 12. -
+Add the equality operator to the indicated line so that the function will return "Equal" when `val` is equivalent to `12`. -## Tests -
+# --hints-- -```yml -tests: - - text: testEqual(10) should return "Not Equal" - testString: assert(testEqual(10) === "Not Equal"); - - text: testEqual(12) should return "Equal" - testString: assert(testEqual(12) === "Equal"); - - text: testEqual("12") should return "Equal" - testString: assert(testEqual("12") === "Equal"); - - text: You should use the == operator - testString: assert(code.match(/==/g) && !code.match(/===/g)); +`testEqual(10)` should return "Not Equal" +```js +assert(testEqual(10) === 'Not Equal'); ``` -
+`testEqual(12)` should return "Equal" -## Challenge Seed -
+```js +assert(testEqual(12) === 'Equal'); +``` -
+`testEqual("12")` should return "Equal" + +```js +assert(testEqual('12') === 'Equal'); +``` + +You should use the `==` operator + +```js +assert(code.match(/==/g) && !code.match(/===/g)); +``` + +# --seed-- + +## --seed-contents-- ```js // Setup @@ -72,15 +76,7 @@ function testEqual(val) { testEqual(10); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function testEqual(val) { @@ -90,5 +86,3 @@ function testEqual(val) { return "Not Equal"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.md index e7521b4c61..080f7cd804 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.md @@ -6,11 +6,13 @@ videoUrl: 'https://scrimba.com/c/cp6GbH4' forumTopicId: 16786 --- -## Description -
-The greater than operator (>) compares the values of two numbers. If the number to the left is greater than the number to the right, it returns true. Otherwise, it returns false. +# --description-- + +The greater than operator (`>`) compares the values of two numbers. If the number to the left is greater than the number to the right, it returns `true`. Otherwise, it returns `false`. + Like the equality operator, greater than operator will convert data types of values while comparing. -Examples + +**Examples** ```js 5 > 3 // true @@ -19,43 +21,63 @@ Like the equality operator, greater than operator will convert data types of val '1' > 9 // false ``` -
+# --instructions-- -## Instructions -
Add the greater than operator to the indicated lines so that the return statements make sense. -
-## Tests -
+# --hints-- -```yml -tests: - - text: testGreaterThan(0) should return "10 or Under" - testString: assert(testGreaterThan(0) === "10 or Under"); - - text: testGreaterThan(10) should return "10 or Under" - testString: assert(testGreaterThan(10) === "10 or Under"); - - text: testGreaterThan(11) should return "Over 10" - testString: assert(testGreaterThan(11) === "Over 10"); - - text: testGreaterThan(99) should return "Over 10" - testString: assert(testGreaterThan(99) === "Over 10"); - - text: testGreaterThan(100) should return "Over 10" - testString: assert(testGreaterThan(100) === "Over 10"); - - text: testGreaterThan(101) should return "Over 100" - testString: assert(testGreaterThan(101) === "Over 100"); - - text: testGreaterThan(150) should return "Over 100" - testString: assert(testGreaterThan(150) === "Over 100"); - - text: You should use the > operator at least twice - testString: assert(code.match(/val\s*>\s*('|")*\d+('|")*/g).length > 1); +`testGreaterThan(0)` should return "10 or Under" +```js +assert(testGreaterThan(0) === '10 or Under'); ``` -
+`testGreaterThan(10)` should return "10 or Under" -## Challenge Seed -
+```js +assert(testGreaterThan(10) === '10 or Under'); +``` -
+`testGreaterThan(11)` should return "Over 10" + +```js +assert(testGreaterThan(11) === 'Over 10'); +``` + +`testGreaterThan(99)` should return "Over 10" + +```js +assert(testGreaterThan(99) === 'Over 10'); +``` + +`testGreaterThan(100)` should return "Over 10" + +```js +assert(testGreaterThan(100) === 'Over 10'); +``` + +`testGreaterThan(101)` should return "Over 100" + +```js +assert(testGreaterThan(101) === 'Over 100'); +``` + +`testGreaterThan(150)` should return "Over 100" + +```js +assert(testGreaterThan(150) === 'Over 100'); +``` + +You should use the `>` operator at least twice + +```js +assert(code.match(/val\s*>\s*('|")*\d+('|")*/g).length > 1); +``` + +# --seed-- + +## --seed-contents-- ```js function testGreaterThan(val) { @@ -73,15 +95,7 @@ function testGreaterThan(val) { testGreaterThan(10); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function testGreaterThan(val) { @@ -94,5 +108,3 @@ function testGreaterThan(val) { return "10 or Under"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-or-equal-to-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-or-equal-to-operator.md index 5bd9a5faa5..3b3e08be13 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-or-equal-to-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-or-equal-to-operator.md @@ -6,11 +6,13 @@ videoUrl: 'https://scrimba.com/c/c6KBqtV' forumTopicId: 16785 --- -## Description -
-The greater than or equal to operator (>=) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns true. Otherwise, it returns false. -Like the equality operator, greater than or equal to operator will convert data types while comparing. -Examples +# --description-- + +The greater than or equal to operator (`>=`) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns `true`. Otherwise, it returns `false`. + +Like the equality operator, `greater than or equal to` operator will convert data types while comparing. + +**Examples** ```js 6 >= 6 // true @@ -19,43 +21,63 @@ Like the equality operator, greater than or equal to operator will '7' >= 9 // false ``` -
+# --instructions-- -## Instructions -
Add the greater than or equal to operator to the indicated lines so that the return statements make sense. -
-## Tests -
+# --hints-- -```yml -tests: - - text: testGreaterOrEqual(0) should return "Less than 10" - testString: assert(testGreaterOrEqual(0) === "Less than 10"); - - text: testGreaterOrEqual(9) should return "Less than 10" - testString: assert(testGreaterOrEqual(9) === "Less than 10"); - - text: testGreaterOrEqual(10) should return "10 or Over" - testString: assert(testGreaterOrEqual(10) === "10 or Over"); - - text: testGreaterOrEqual(11) should return "10 or Over" - testString: assert(testGreaterOrEqual(11) === "10 or Over"); - - text: testGreaterOrEqual(19) should return "10 or Over" - testString: assert(testGreaterOrEqual(19) === "10 or Over"); - - text: testGreaterOrEqual(100) should return "20 or Over" - testString: assert(testGreaterOrEqual(100) === "20 or Over"); - - text: testGreaterOrEqual(21) should return "20 or Over" - testString: assert(testGreaterOrEqual(21) === "20 or Over"); - - text: You should use the >= operator at least twice - testString: assert(code.match(/val\s*>=\s*('|")*\d+('|")*/g).length > 1); +`testGreaterOrEqual(0)` should return "Less than 10" +```js +assert(testGreaterOrEqual(0) === 'Less than 10'); ``` -
+`testGreaterOrEqual(9)` should return "Less than 10" -## Challenge Seed -
+```js +assert(testGreaterOrEqual(9) === 'Less than 10'); +``` -
+`testGreaterOrEqual(10)` should return "10 or Over" + +```js +assert(testGreaterOrEqual(10) === '10 or Over'); +``` + +`testGreaterOrEqual(11)` should return "10 or Over" + +```js +assert(testGreaterOrEqual(11) === '10 or Over'); +``` + +`testGreaterOrEqual(19)` should return "10 or Over" + +```js +assert(testGreaterOrEqual(19) === '10 or Over'); +``` + +`testGreaterOrEqual(100)` should return "20 or Over" + +```js +assert(testGreaterOrEqual(100) === '20 or Over'); +``` + +`testGreaterOrEqual(21)` should return "20 or Over" + +```js +assert(testGreaterOrEqual(21) === '20 or Over'); +``` + +You should use the `>=` operator at least twice + +```js +assert(code.match(/val\s*>=\s*('|")*\d+('|")*/g).length > 1); +``` + +# --seed-- + +## --seed-contents-- ```js function testGreaterOrEqual(val) { @@ -73,15 +95,7 @@ function testGreaterOrEqual(val) { testGreaterOrEqual(10); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function testGreaterOrEqual(val) { @@ -96,5 +110,3 @@ function testGreaterOrEqual(val) { return "Less than 10"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-inequality-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-inequality-operator.md index eb705e3915..4d7dd62d2a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-inequality-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-inequality-operator.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cdBm9Sr' forumTopicId: 16787 --- -## Description -
-The inequality operator (!=) is the opposite of the equality operator. It means "Not Equal" and returns false where equality would return true and vice versa. Like the equality operator, the inequality operator will convert data types of values while comparing. -Examples +# --description-- + +The inequality operator (`!=`) is the opposite of the equality operator. It means "Not Equal" and returns `false` where equality would return `true` and *vice versa*. Like the equality operator, the inequality operator will convert data types of values while comparing. + +**Examples** ```js 1 != 2 // true @@ -19,39 +20,51 @@ The inequality operator (!=) is the opposite of the equality operat 0 != false // false ``` -
+# --instructions-- -## Instructions -
-Add the inequality operator != in the if statement so that the function will return "Not Equal" when val is not equivalent to 99 -
+Add the inequality operator `!=` in the `if` statement so that the function will return "Not Equal" when `val` is not equivalent to `99` -## Tests -
+# --hints-- -```yml -tests: - - text: testNotEqual(99) should return "Equal" - testString: assert(testNotEqual(99) === "Equal"); - - text: testNotEqual("99") should return "Equal" - testString: assert(testNotEqual("99") === "Equal"); - - text: testNotEqual(12) should return "Not Equal" - testString: assert(testNotEqual(12) === "Not Equal"); - - text: testNotEqual("12") should return "Not Equal" - testString: assert(testNotEqual("12") === "Not Equal"); - - text: testNotEqual("bob") should return "Not Equal" - testString: assert(testNotEqual("bob") === "Not Equal"); - - text: You should use the != operator - testString: assert(code.match(/(?!!==)!=/)); +`testNotEqual(99)` should return "Equal" +```js +assert(testNotEqual(99) === 'Equal'); ``` -
+`testNotEqual("99")` should return "Equal" -## Challenge Seed -
+```js +assert(testNotEqual('99') === 'Equal'); +``` -
+`testNotEqual(12)` should return "Not Equal" + +```js +assert(testNotEqual(12) === 'Not Equal'); +``` + +`testNotEqual("12")` should return "Not Equal" + +```js +assert(testNotEqual('12') === 'Not Equal'); +``` + +`testNotEqual("bob")` should return "Not Equal" + +```js +assert(testNotEqual('bob') === 'Not Equal'); +``` + +You should use the `!=` operator + +```js +assert(code.match(/(?!!==)!=/)); +``` + +# --seed-- + +## --seed-contents-- ```js // Setup @@ -65,15 +78,7 @@ function testNotEqual(val) { testNotEqual(10); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function testNotEqual(val) { @@ -83,5 +88,3 @@ function testNotEqual(val) { return "Equal"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-operator.md index 51e528cc3f..19d3eb32e4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-operator.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cNVRWtB' forumTopicId: 16789 --- -## Description -
-The less than operator (<) compares the values of two numbers. If the number to the left is less than the number to the right, it returns true. Otherwise, it returns false. Like the equality operator, less than operator converts data types while comparing. -Examples +# --description-- + +The less than operator (`<`) compares the values of two numbers. If the number to the left is less than the number to the right, it returns `true`. Otherwise, it returns `false`. Like the equality operator, less than operator converts data types while comparing. + +**Examples** ```js 2 < 5 // true @@ -19,41 +20,57 @@ The less than operator (<) compares the values of two '8' < 4 // false ``` -
+# --instructions-- -## Instructions -
Add the less than operator to the indicated lines so that the return statements make sense. -
-## Tests -
+# --hints-- -```yml -tests: - - text: testLessThan(0) should return "Under 25" - testString: assert(testLessThan(0) === "Under 25"); - - text: testLessThan(24) should return "Under 25" - testString: assert(testLessThan(24) === "Under 25"); - - text: testLessThan(25) should return "Under 55" - testString: assert(testLessThan(25) === "Under 55"); - - text: testLessThan(54) should return "Under 55" - testString: assert(testLessThan(54) === "Under 55"); - - text: testLessThan(55) should return "55 or Over" - testString: assert(testLessThan(55) === "55 or Over"); - - text: testLessThan(99) should return "55 or Over" - testString: assert(testLessThan(99) === "55 or Over"); - - text: You should use the < operator at least twice - testString: assert(code.match(/val\s*<\s*('|")*\d+('|")*/g).length > 1); +`testLessThan(0)` should return "Under 25" +```js +assert(testLessThan(0) === 'Under 25'); ``` -
+`testLessThan(24)` should return "Under 25" -## Challenge Seed -
+```js +assert(testLessThan(24) === 'Under 25'); +``` -
+`testLessThan(25)` should return "Under 55" + +```js +assert(testLessThan(25) === 'Under 55'); +``` + +`testLessThan(54)` should return "Under 55" + +```js +assert(testLessThan(54) === 'Under 55'); +``` + +`testLessThan(55)` should return "55 or Over" + +```js +assert(testLessThan(55) === '55 or Over'); +``` + +`testLessThan(99)` should return "55 or Over" + +```js +assert(testLessThan(99) === '55 or Over'); +``` + +You should use the `<` operator at least twice + +```js +assert(code.match(/val\s*<\s*('|")*\d+('|")*/g).length > 1); +``` + +# --seed-- + +## --seed-contents-- ```js function testLessThan(val) { @@ -71,15 +88,7 @@ function testLessThan(val) { testLessThan(10); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function testLessThan(val) { @@ -94,5 +103,3 @@ function testLessThan(val) { return "55 or Over"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-or-equal-to-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-or-equal-to-operator.md index 1e16a4affa..fc15962101 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-or-equal-to-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-or-equal-to-operator.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cNVR7Am' forumTopicId: 16788 --- -## Description -
-The less than or equal to operator (<=) compares the values of two numbers. If the number to the left is less than or equal to the number to the right, it returns true. If the number on the left is greater than the number on the right, it returns false. Like the equality operator, less than or equal to converts data types. -Examples +# --description-- + +The less than or equal to operator (`<=`) compares the values of two numbers. If the number to the left is less than or equal to the number to the right, it returns `true`. If the number on the left is greater than the number on the right, it returns `false`. Like the equality operator, `less than or equal to` converts data types. + +**Examples** ```js 4 <= 5 // true @@ -19,43 +20,63 @@ The less than or equal to operator (<=) compares the values of t '8' <= 4 // false ``` -
+# --instructions-- -## Instructions -
Add the less than or equal to operator to the indicated lines so that the return statements make sense. -
-## Tests -
+# --hints-- -```yml -tests: - - text: testLessOrEqual(0) should return "Smaller Than or Equal to 12" - testString: assert(testLessOrEqual(0) === "Smaller Than or Equal to 12"); - - text: testLessOrEqual(11) should return "Smaller Than or Equal to 12" - testString: assert(testLessOrEqual(11) === "Smaller Than or Equal to 12"); - - text: testLessOrEqual(12) should return "Smaller Than or Equal to 12" - testString: assert(testLessOrEqual(12) === "Smaller Than or Equal to 12"); - - text: testLessOrEqual(23) should return "Smaller Than or Equal to 24" - testString: assert(testLessOrEqual(23) === "Smaller Than or Equal to 24"); - - text: testLessOrEqual(24) should return "Smaller Than or Equal to 24" - testString: assert(testLessOrEqual(24) === "Smaller Than or Equal to 24"); - - text: testLessOrEqual(25) should return "More Than 24" - testString: assert(testLessOrEqual(25) === "More Than 24"); - - text: testLessOrEqual(55) should return "More Than 24" - testString: assert(testLessOrEqual(55) === "More Than 24"); - - text: You should use the <= operator at least twice - testString: assert(code.match(/val\s*<=\s*('|")*\d+('|")*/g).length > 1); +`testLessOrEqual(0)` should return "Smaller Than or Equal to 12" +```js +assert(testLessOrEqual(0) === 'Smaller Than or Equal to 12'); ``` -
+`testLessOrEqual(11)` should return "Smaller Than or Equal to 12" -## Challenge Seed -
+```js +assert(testLessOrEqual(11) === 'Smaller Than or Equal to 12'); +``` -
+`testLessOrEqual(12)` should return "Smaller Than or Equal to 12" + +```js +assert(testLessOrEqual(12) === 'Smaller Than or Equal to 12'); +``` + +`testLessOrEqual(23)` should return "Smaller Than or Equal to 24" + +```js +assert(testLessOrEqual(23) === 'Smaller Than or Equal to 24'); +``` + +`testLessOrEqual(24)` should return "Smaller Than or Equal to 24" + +```js +assert(testLessOrEqual(24) === 'Smaller Than or Equal to 24'); +``` + +`testLessOrEqual(25)` should return "More Than 24" + +```js +assert(testLessOrEqual(25) === 'More Than 24'); +``` + +`testLessOrEqual(55)` should return "More Than 24" + +```js +assert(testLessOrEqual(55) === 'More Than 24'); +``` + +You should use the `<=` operator at least twice + +```js +assert(code.match(/val\s*<=\s*('|")*\d+('|")*/g).length > 1); +``` + +# --seed-- + +## --seed-contents-- ```js function testLessOrEqual(val) { @@ -71,18 +92,9 @@ function testLessOrEqual(val) { } testLessOrEqual(10); - ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function testLessOrEqual(val) { @@ -97,5 +109,3 @@ function testLessOrEqual(val) { return "More Than 24"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-equality-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-equality-operator.md index ca784fd89b..6b9c6d38f2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-equality-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-equality-operator.md @@ -6,47 +6,54 @@ videoUrl: 'https://scrimba.com/c/cy87atr' forumTopicId: 16790 --- -## Description -
-Strict equality (===) is the counterpart to the equality operator (==). However, unlike the equality operator, which attempts to convert both values being compared to a common type, the strict equality operator does not perform a type conversion. +# --description-- + +Strict equality (`===`) is the counterpart to the equality operator (`==`). However, unlike the equality operator, which attempts to convert both values being compared to a common type, the strict equality operator does not perform a type conversion. + If the values being compared have different types, they are considered unequal, and the strict equality operator will return false. -Examples + +**Examples** ```js 3 === 3 // true 3 === '3' // false ``` -In the second example, 3 is a Number type and '3' is a String type. -
+In the second example, `3` is a `Number` type and `'3'` is a `String` type. -## Instructions -
-Use the strict equality operator in the if statement so the function will return "Equal" when val is strictly equal to 7 -
+# --instructions-- -## Tests -
+Use the strict equality operator in the `if` statement so the function will return "Equal" when `val` is strictly equal to `7` -```yml -tests: - - text: testStrict(10) should return "Not Equal" - testString: assert(testStrict(10) === "Not Equal"); - - text: testStrict(7) should return "Equal" - testString: assert(testStrict(7) === "Equal"); - - text: testStrict("7") should return "Not Equal" - testString: assert(testStrict("7") === "Not Equal"); - - text: You should use the === operator - testString: assert(code.match(/(val\s*===\s*\d+)|(\d+\s*===\s*val)/g).length > 0); +# --hints-- +`testStrict(10)` should return "Not Equal" + +```js +assert(testStrict(10) === 'Not Equal'); ``` -
+`testStrict(7)` should return "Equal" -## Challenge Seed -
+```js +assert(testStrict(7) === 'Equal'); +``` -
+`testStrict("7")` should return "Not Equal" + +```js +assert(testStrict('7') === 'Not Equal'); +``` + +You should use the `===` operator + +```js +assert(code.match(/(val\s*===\s*\d+)|(\d+\s*===\s*val)/g).length > 0); +``` + +# --seed-- + +## --seed-contents-- ```js // Setup @@ -60,15 +67,7 @@ function testStrict(val) { testStrict(10); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function testStrict(val) { @@ -78,5 +77,3 @@ function testStrict(val) { return "Not Equal"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-inequality-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-inequality-operator.md index ebdbd652c1..cf696056a7 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-inequality-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-inequality-operator.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cKekkUy' forumTopicId: 16791 --- -## Description -
-The strict inequality operator (!==) is the logical opposite of the strict equality operator. It means "Strictly Not Equal" and returns false where strict equality would return true and vice versa. Strict inequality will not convert data types. -Examples +# --description-- + +The strict inequality operator (`!==`) is the logical opposite of the strict equality operator. It means "Strictly Not Equal" and returns `false` where strict equality would return `true` and *vice versa*. Strict inequality will not convert data types. + +**Examples** ```js 3 !== 3 // false @@ -17,37 +18,45 @@ The strict inequality operator (!==) is the logical opposite of the 4 !== 3 // true ``` -
+# --instructions-- -## Instructions -
-Add the strict inequality operator to the if statement so the function will return "Not Equal" when val is not strictly equal to 17 -
+Add the strict inequality operator to the `if` statement so the function will return "Not Equal" when `val` is not strictly equal to `17` -## Tests -
+# --hints-- -```yml -tests: - - text: testStrictNotEqual(17) should return "Equal" - testString: assert(testStrictNotEqual(17) === "Equal"); - - text: testStrictNotEqual("17") should return "Not Equal" - testString: assert(testStrictNotEqual("17") === "Not Equal"); - - text: testStrictNotEqual(12) should return "Not Equal" - testString: assert(testStrictNotEqual(12) === "Not Equal"); - - text: testStrictNotEqual("bob") should return "Not Equal" - testString: assert(testStrictNotEqual("bob") === "Not Equal"); - - text: You should use the !== operator - testString: assert(code.match(/(val\s*!==\s*\d+)|(\d+\s*!==\s*val)/g).length > 0); +`testStrictNotEqual(17)` should return "Equal" +```js +assert(testStrictNotEqual(17) === 'Equal'); ``` -
+`testStrictNotEqual("17")` should return "Not Equal" -## Challenge Seed -
+```js +assert(testStrictNotEqual('17') === 'Not Equal'); +``` -
+`testStrictNotEqual(12)` should return "Not Equal" + +```js +assert(testStrictNotEqual(12) === 'Not Equal'); +``` + +`testStrictNotEqual("bob")` should return "Not Equal" + +```js +assert(testStrictNotEqual('bob') === 'Not Equal'); +``` + +You should use the `!==` operator + +```js +assert(code.match(/(val\s*!==\s*\d+)|(\d+\s*!==\s*val)/g).length > 0); +``` + +# --seed-- + +## --seed-contents-- ```js // Setup @@ -61,15 +70,7 @@ function testStrictNotEqual(val) { testStrictNotEqual(10); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function testStrictNotEqual(val) { @@ -79,5 +80,3 @@ function testStrictNotEqual(val) { return "Equal"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.md index 7f460dd9b2..500d70378e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.md @@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cvbRVtr' forumTopicId: 16799 --- -## Description -
-Sometimes you will need to test more than one thing at a time. The logical and operator (&&) returns true if and only if the operands to the left and right of it are true. +# --description-- + +Sometimes you will need to test more than one thing at a time. The logical and operator (`&&`) returns `true` if and only if the operands to the left and right of it are true. + The same effect could be achieved by nesting an if statement inside another if: ```js @@ -20,7 +21,7 @@ if (num > 5) { return "No"; ``` -will only return "Yes" if num is greater than 5 and less than 10. The same logic can be written as: +will only return "Yes" if `num` is greater than `5` and less than `10`. The same logic can be written as: ```js if (num > 5 && num < 10) { @@ -29,47 +30,75 @@ if (num > 5 && num < 10) { return "No"; ``` -
+# --instructions-- -## Instructions -
-Replace the two if statements with one statement, using the && operator, which will return "Yes" if val is less than or equal to 50 and greater than or equal to 25. Otherwise, will return "No". -
+Replace the two if statements with one statement, using the && operator, which will return `"Yes"` if `val` is less than or equal to `50` and greater than or equal to `25`. Otherwise, will return `"No"`. -## Tests -
+# --hints-- -```yml -tests: - - text: You should use the && operator once - testString: assert(code.match(/&&/g).length === 1); - - text: You should only have one if statement - testString: assert(code.match(/if/g).length === 1); - - text: testLogicalAnd(0) should return "No" - testString: assert(testLogicalAnd(0) === "No"); - - text: testLogicalAnd(24) should return "No" - testString: assert(testLogicalAnd(24) === "No"); - - text: testLogicalAnd(25) should return "Yes" - testString: assert(testLogicalAnd(25) === "Yes"); - - text: testLogicalAnd(30) should return "Yes" - testString: assert(testLogicalAnd(30) === "Yes"); - - text: testLogicalAnd(50) should return "Yes" - testString: assert(testLogicalAnd(50) === "Yes"); - - text: testLogicalAnd(51) should return "No" - testString: assert(testLogicalAnd(51) === "No"); - - text: testLogicalAnd(75) should return "No" - testString: assert(testLogicalAnd(75) === "No"); - - text: testLogicalAnd(80) should return "No" - testString: assert(testLogicalAnd(80) === "No"); +You should use the `&&` operator once +```js +assert(code.match(/&&/g).length === 1); ``` -
+You should only have one `if` statement -## Challenge Seed -
+```js +assert(code.match(/if/g).length === 1); +``` -
+`testLogicalAnd(0)` should return "No" + +```js +assert(testLogicalAnd(0) === 'No'); +``` + +`testLogicalAnd(24)` should return "No" + +```js +assert(testLogicalAnd(24) === 'No'); +``` + +`testLogicalAnd(25)` should return "Yes" + +```js +assert(testLogicalAnd(25) === 'Yes'); +``` + +`testLogicalAnd(30)` should return "Yes" + +```js +assert(testLogicalAnd(30) === 'Yes'); +``` + +`testLogicalAnd(50)` should return "Yes" + +```js +assert(testLogicalAnd(50) === 'Yes'); +``` + +`testLogicalAnd(51)` should return "No" + +```js +assert(testLogicalAnd(51) === 'No'); +``` + +`testLogicalAnd(75)` should return "No" + +```js +assert(testLogicalAnd(75) === 'No'); +``` + +`testLogicalAnd(80)` should return "No" + +```js +assert(testLogicalAnd(80) === 'No'); +``` + +# --seed-- + +## --seed-contents-- ```js function testLogicalAnd(val) { @@ -88,15 +117,7 @@ function testLogicalAnd(val) { testLogicalAnd(10); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function testLogicalAnd(val) { @@ -106,5 +127,3 @@ function testLogicalAnd(val) { return "No"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.md index fcfab94917..85df0914d7 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.md @@ -6,10 +6,12 @@ videoUrl: 'https://scrimba.com/c/cEPrGTN' forumTopicId: 16800 --- -## Description -
-The logical or operator (||) returns true if either of the operands is true. Otherwise, it returns false. -The logical or operator is composed of two pipe symbols: (||). This can typically be found between your Backspace and Enter keys. +# --description-- + +The logical or operator (`||`) returns `true` if either of the operands is `true`. Otherwise, it returns `false`. + +The logical or operator is composed of two pipe symbols: (`||`). This can typically be found between your Backspace and Enter keys. + The pattern below should look familiar from prior waypoints: ```js @@ -22,7 +24,7 @@ if (num < 5) { return "Yes"; ``` -will return "Yes" only if num is between 5 and 10 (5 and 10 included). The same logic can be written as: +will return "Yes" only if `num` is between `5` and `10` (5 and 10 included). The same logic can be written as: ```js if (num > 10 || num < 5) { @@ -31,47 +33,75 @@ if (num > 10 || num < 5) { return "Yes"; ``` -
+# --instructions-- -## Instructions -
-Combine the two if statements into one statement which returns "Outside" if val is not between 10 and 20, inclusive. Otherwise, return "Inside". -
+Combine the two `if` statements into one statement which returns `"Outside"` if `val` is not between `10` and `20`, inclusive. Otherwise, return `"Inside"`. -## Tests -
+# --hints-- -```yml -tests: - - text: You should use the || operator once - testString: assert(code.match(/\|\|/g).length === 1); - - text: You should only have one if statement - testString: assert(code.match(/if/g).length === 1); - - text: testLogicalOr(0) should return "Outside" - testString: assert(testLogicalOr(0) === "Outside"); - - text: testLogicalOr(9) should return "Outside" - testString: assert(testLogicalOr(9) === "Outside"); - - text: testLogicalOr(10) should return "Inside" - testString: assert(testLogicalOr(10) === "Inside"); - - text: testLogicalOr(15) should return "Inside" - testString: assert(testLogicalOr(15) === "Inside"); - - text: testLogicalOr(19) should return "Inside" - testString: assert(testLogicalOr(19) === "Inside"); - - text: testLogicalOr(20) should return "Inside" - testString: assert(testLogicalOr(20) === "Inside"); - - text: testLogicalOr(21) should return "Outside" - testString: assert(testLogicalOr(21) === "Outside"); - - text: testLogicalOr(25) should return "Outside" - testString: assert(testLogicalOr(25) === "Outside"); +You should use the `||` operator once +```js +assert(code.match(/\|\|/g).length === 1); ``` -
+You should only have one `if` statement -## Challenge Seed -
+```js +assert(code.match(/if/g).length === 1); +``` -
+`testLogicalOr(0)` should return "Outside" + +```js +assert(testLogicalOr(0) === 'Outside'); +``` + +`testLogicalOr(9)` should return "Outside" + +```js +assert(testLogicalOr(9) === 'Outside'); +``` + +`testLogicalOr(10)` should return "Inside" + +```js +assert(testLogicalOr(10) === 'Inside'); +``` + +`testLogicalOr(15)` should return "Inside" + +```js +assert(testLogicalOr(15) === 'Inside'); +``` + +`testLogicalOr(19)` should return "Inside" + +```js +assert(testLogicalOr(19) === 'Inside'); +``` + +`testLogicalOr(20)` should return "Inside" + +```js +assert(testLogicalOr(20) === 'Inside'); +``` + +`testLogicalOr(21)` should return "Outside" + +```js +assert(testLogicalOr(21) === 'Outside'); +``` + +`testLogicalOr(25)` should return "Outside" + +```js +assert(testLogicalOr(25) === 'Outside'); +``` + +# --seed-- + +## --seed-contents-- ```js function testLogicalOr(val) { @@ -92,15 +122,7 @@ function testLogicalOr(val) { testLogicalOr(15); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function testLogicalOr(val) { @@ -110,5 +132,3 @@ function testLogicalOr(val) { return "Inside"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition.md index 0172f8cfc4..28e6fffd08 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition.md @@ -6,12 +6,15 @@ videoUrl: 'https://scrimba.com/c/cDR6LCb' forumTopicId: 16661 --- -## Description -
+# --description-- + In programming, it is common to use assignments to modify the contents of a variable. Remember that everything to the right of the equals sign is evaluated first, so we can say: -myVar = myVar + 5; -to add 5 to myVar. Since this is such a common pattern, there are operators which do both a mathematical operation and assignment in one step. -One such operator is the += operator. + +`myVar = myVar + 5;` + +to add `5` to `myVar`. Since this is such a common pattern, there are operators which do both a mathematical operation and assignment in one step. + +One such operator is the `+=` operator. ```js var myVar = 1; @@ -19,37 +22,55 @@ myVar += 5; console.log(myVar); // Returns 6 ``` -
+# --instructions-- -## Instructions -
-Convert the assignments for a, b, and c to use the += operator. -
+Convert the assignments for `a`, `b`, and `c` to use the `+=` operator. -## Tests -
+# --hints-- -```yml -tests: - - text: a should equal 15. - testString: assert(a === 15); - - text: b should equal 26. - testString: assert(b === 26); - - text: c should equal 19. - testString: assert(c === 19); - - text: You should use the += operator for each variable. - testString: assert(code.match(/\+=/g).length === 3); - - text: You should not modify the code above the specified comment. - testString: assert(/var a = 3;/.test(code) && /var b = 17;/.test(code) && /var c = 12;/.test(code)); +`a` should equal `15`. +```js +assert(a === 15); ``` -
+`b` should equal `26`. -## Challenge Seed -
+```js +assert(b === 26); +``` -
+`c` should equal `19`. + +```js +assert(c === 19); +``` + +You should use the `+=` operator for each variable. + +```js +assert(code.match(/\+=/g).length === 3); +``` + +You should not modify the code above the specified comment. + +```js +assert( + /var a = 3;/.test(code) && + /var b = 17;/.test(code) && + /var c = 12;/.test(code) +); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = " + c; })(a,b,c); +``` + +## --seed-contents-- ```js var a = 3; @@ -62,23 +83,7 @@ b = 9 + b; c = c + 7; ``` -
- - -### After Test -
- -```js -(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = " + c; })(a,b,c); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var a = 3; @@ -89,5 +94,3 @@ a += 12; b += 9; c += 7; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-division.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-division.md index ac399d5b9e..eb9db30bd0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-division.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-division.md @@ -6,43 +6,65 @@ videoUrl: 'https://scrimba.com/c/c2QvKT2' forumTopicId: 16659 --- -## Description -
-The /= operator divides a variable by another number. -myVar = myVar / 5; -Will divide myVar by 5. This can be rewritten as: -myVar /= 5; -
+# --description-- -## Instructions -
-Convert the assignments for a, b, and c to use the /= operator. -
+The `/=` operator divides a variable by another number. -## Tests -
+`myVar = myVar / 5;` -```yml -tests: - - text: a should equal 4. - testString: assert(a === 4); - - text: b should equal 27. - testString: assert(b === 27); - - text: c should equal 3. - testString: assert(c === 3); - - text: You should use the /= operator for each variable. - testString: assert(code.match(/\/=/g).length === 3); - - text: You should not modify the code above the specified comment. - testString: assert(/var a = 48;/.test(code) && /var b = 108;/.test(code) && /var c = 33;/.test(code)); +Will divide `myVar` by `5`. This can be rewritten as: +`myVar /= 5;` + +# --instructions-- + +Convert the assignments for `a`, `b`, and `c` to use the `/=` operator. + +# --hints-- + +`a` should equal `4`. + +```js +assert(a === 4); ``` -
+`b` should equal `27`. -## Challenge Seed -
+```js +assert(b === 27); +``` -
+`c` should equal `3`. + +```js +assert(c === 3); +``` + +You should use the `/=` operator for each variable. + +```js +assert(code.match(/\/=/g).length === 3); +``` + +You should not modify the code above the specified comment. + +```js +assert( + /var a = 48;/.test(code) && + /var b = 108;/.test(code) && + /var c = 33;/.test(code) +); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = " + c; })(a,b,c); +``` + +## --seed-contents-- ```js var a = 48; @@ -55,23 +77,7 @@ b = b / 4; c = c / 11; ``` -
- - -### After Test -
- -```js -(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = " + c; })(a,b,c); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var a = 48; @@ -82,5 +88,3 @@ a /= 12; b /= 4; c /= 11; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-multiplication.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-multiplication.md index 7bb4bcdd2c..5f1d4bbeeb 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-multiplication.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-multiplication.md @@ -6,43 +6,65 @@ videoUrl: 'https://scrimba.com/c/c83vrfa' forumTopicId: 16662 --- -## Description -
-The *= operator multiplies a variable by a number. -myVar = myVar * 5; -will multiply myVar by 5. This can be rewritten as: -myVar *= 5; -
+# --description-- -## Instructions -
-Convert the assignments for a, b, and c to use the *= operator. -
+The `*=` operator multiplies a variable by a number. -## Tests -
+`myVar = myVar * 5;` -```yml -tests: - - text: a should equal 25. - testString: assert(a === 25); - - text: b should equal 36. - testString: assert(b === 36); - - text: c should equal 46. - testString: assert(c === 46); - - text: You should use the *= operator for each variable. - testString: assert(code.match(/\*=/g).length === 3); - - text: You should not modify the code above the specified comment. - testString: assert(/var a = 5;/.test(code) && /var b = 12;/.test(code) && /var c = 4\.6;/.test(code)); +will multiply `myVar` by `5`. This can be rewritten as: +`myVar *= 5;` + +# --instructions-- + +Convert the assignments for `a`, `b`, and `c` to use the `*=` operator. + +# --hints-- + +`a` should equal `25`. + +```js +assert(a === 25); ``` -
+`b` should equal `36`. -## Challenge Seed -
+```js +assert(b === 36); +``` -
+`c` should equal `46`. + +```js +assert(c === 46); +``` + +You should use the `*=` operator for each variable. + +```js +assert(code.match(/\*=/g).length === 3); +``` + +You should not modify the code above the specified comment. + +```js +assert( + /var a = 5;/.test(code) && + /var b = 12;/.test(code) && + /var c = 4\.6;/.test(code) +); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = " + c; })(a,b,c); +``` + +## --seed-contents-- ```js var a = 5; @@ -55,23 +77,7 @@ b = 3 * b; c = c * 10; ``` -
- - -### After Test -
- -```js -(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = " + c; })(a,b,c); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var a = 5; @@ -82,5 +88,3 @@ a *= 5; b *= 3; c *= 10; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-subtraction.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-subtraction.md index 823a0d3faa..71d543bd5f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-subtraction.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-subtraction.md @@ -6,43 +6,63 @@ videoUrl: 'https://scrimba.com/c/c2Qv7AV' forumTopicId: 16660 --- -## Description -
-Like the += operator, -= subtracts a number from a variable. -myVar = myVar - 5; -will subtract 5 from myVar. This can be rewritten as: -myVar -= 5; -
+# --description-- -## Instructions -
-Convert the assignments for a, b, and c to use the -= operator. -
+Like the `+=` operator, `-=` subtracts a number from a variable. -## Tests -
+`myVar = myVar - 5;` -```yml -tests: - - text: a should equal 5. - testString: assert(a === 5); - - text: b should equal -6. - testString: assert(b === -6); - - text: c should equal 2. - testString: assert(c === 2); - - text: You should use the -= operator for each variable. - testString: assert(code.match(/-=/g).length === 3); - - text: You should not modify the code above the specified comment. - testString: assert(/var a = 11;/.test(code) && /var b = 9;/.test(code) && /var c = 3;/.test(code)); +will subtract `5` from `myVar`. This can be rewritten as: +`myVar -= 5;` + +# --instructions-- + +Convert the assignments for `a`, `b`, and `c` to use the `-=` operator. + +# --hints-- + +`a` should equal `5`. + +```js +assert(a === 5); ``` -
+`b` should equal `-6`. -## Challenge Seed -
+```js +assert(b === -6); +``` -
+`c` should equal `2`. + +```js +assert(c === 2); +``` + +You should use the `-=` operator for each variable. + +```js +assert(code.match(/-=/g).length === 3); +``` + +You should not modify the code above the specified comment. + +```js +assert( + /var a = 11;/.test(code) && /var b = 9;/.test(code) && /var c = 3;/.test(code) +); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = " + c; })(a,b,c); +``` + +## --seed-contents-- ```js var a = 11; @@ -55,23 +75,7 @@ b = b - 15; c = c - 1; ``` -
- - -### After Test -
- -```js -(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = " + c; })(a,b,c); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var a = 11; @@ -81,8 +85,4 @@ var c = 3; a -= 6; b -= 15; c -= 1; - - ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md index c7062aa3a2..0385048c93 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md @@ -6,16 +6,18 @@ videoUrl: 'https://scrimba.com/c/cNpM8AN' forumTopicId: 16802 --- -## Description -
-In JavaScript, when the + operator is used with a String value, it is called the concatenation operator. You can build a new string out of other strings by concatenating them together. -Example +# --description-- + +In JavaScript, when the `+` operator is used with a `String` value, it is called the concatenation operator. You can build a new string out of other strings by concatenating them together. + +**Example** ```js 'My name is Alan,' + ' I concatenate.' ``` -Note
Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself. +**Note** +Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself. Example: @@ -24,46 +26,39 @@ var ourStr = "I come first. " + "I come second."; // ourStr is "I come first. I come second." ``` -
+# --instructions-- -## Instructions -
-Build myStr from the strings "This is the start. " and "This is the end." using the + operator. -
+Build `myStr` from the strings `"This is the start. "` and `"This is the end."` using the `+` operator. -## Tests -
+# --hints-- -```yml -tests: - - text: myStr should have a value of This is the start. This is the end. - testString: assert(myStr === "This is the start. This is the end."); - - text: You should use the + operator to build myStr. - testString: assert(code.match(/(["']).*\1\s*\+\s*(["']).*\2/g)); - - text: myStr should be created using the var keyword. - testString: assert(/var\s+myStr/.test(code)); - - text: You should assign the result to the myStr variable. - testString: assert(/myStr\s*=/.test(code)); - -``` - -
- -## Challenge Seed -
- -
+`myStr` should have a value of `This is the start. This is the end.` ```js -var myStr; // Change this line - +assert(myStr === 'This is the start. This is the end.'); ``` -
+You should use the `+` operator to build `myStr`. +```js +assert(code.match(/(["']).*\1\s*\+\s*(["']).*\2/g)); +``` -### After Test -
+`myStr` should be created using the `var` keyword. + +```js +assert(/var\s+myStr/.test(code)); +``` + +You should assign the result to the `myStr` variable. + +```js +assert(/myStr\s*=/.test(code)); +``` + +# --seed-- + +## --after-user-code-- ```js (function(){ @@ -75,16 +70,14 @@ var myStr; // Change this line })(); ``` -
+## --seed-contents-- -
- -## Solution -
+```js +var myStr; // Change this line +``` +# --solutions-- ```js var myStr = "This is the start. " + "This is the end."; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md index 0f60f61917..8b03c4c341 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md @@ -6,10 +6,12 @@ videoUrl: 'https://scrimba.com/c/cbQmmC4' forumTopicId: 16803 --- -## Description -
-We can also use the += operator to concatenate a string onto the end of an existing string variable. This can be very helpful to break a long string over several lines. -Note
Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself. +# --description-- + +We can also use the `+=` operator to concatenate a string onto the end of an existing string variable. This can be very helpful to break a long string over several lines. + +**Note** +Watch out for spaces. Concatenation does not add spaces between concatenated strings, so you'll need to add them yourself. Example: @@ -19,46 +21,27 @@ ourStr += "I come second."; // ourStr is now "I come first. I come second." ``` -
+# --instructions-- -## Instructions -
-Build myStr over several lines by concatenating these two strings: "This is the first sentence. " and "This is the second sentence." using the += operator. Use the += operator similar to how it is shown in the editor. Start by assigning the first string to myStr, then add on the second string. -
+Build `myStr` over several lines by concatenating these two strings: `"This is the first sentence. "` and `"This is the second sentence."` using the `+=` operator. Use the `+=` operator similar to how it is shown in the editor. Start by assigning the first string to `myStr`, then add on the second string. -## Tests -
+# --hints-- -```yml -tests: - - text: myStr should have a value of This is the first sentence. This is the second sentence. - testString: assert(myStr === "This is the first sentence. This is the second sentence."); - - text: You should use the += operator to build myStr. - testString: assert(code.match(/myStr\s*\+=\s*(["']).*\1/g)); - -``` - -
- -## Challenge Seed -
- -
+`myStr` should have a value of `This is the first sentence. This is the second sentence.` ```js - -// Only change code below this line - -var myStr; - - +assert(myStr === 'This is the first sentence. This is the second sentence.'); ``` -
+You should use the `+=` operator to build `myStr`. +```js +assert(code.match(/myStr\s*\+=\s*(["']).*\1/g)); +``` -### After Test -
+# --seed-- + +## --after-user-code-- ```js (function(){ @@ -70,17 +53,17 @@ var myStr; })(); ``` -
+## --seed-contents-- -
+```js +// Only change code below this line -## Solution -
+var myStr; +``` +# --solutions-- ```js var myStr = "This is the first sentence. "; myStr += "This is the second sentence."; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/constructing-strings-with-variables.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/constructing-strings-with-variables.md index 01c2083fb8..2b319f852e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/constructing-strings-with-variables.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/constructing-strings-with-variables.md @@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/c/cqk8rf4' forumTopicId: 16805 --- -## Description -
-Sometimes you will need to build a string, Mad Libs style. By using the concatenation operator (+), you can insert one or more variables into a string you're building. +# --description-- + +Sometimes you will need to build a string, [Mad Libs](https://en.wikipedia.org/wiki/Mad_Libs) style. By using the concatenation operator (`+`), you can insert one or more variables into a string you're building. Example: @@ -18,45 +18,27 @@ var ourStr = "Hello, our name is " + ourName + ", how are you?"; // ourStr is now "Hello, our name is freeCodeCamp, how are you?" ``` -
+# --instructions-- -## Instructions -
-Set myName to a string equal to your name and build myStr with myName between the strings "My name is " and " and I am well!" -
+Set `myName` to a string equal to your name and build `myStr` with `myName` between the strings `"My name is "` and `" and I am well!"` -## Tests -
+# --hints-- -```yml -tests: - - text: myName should be set to a string at least 3 characters long. - testString: assert(typeof myName !== 'undefined' && myName.length > 2); - - text: You should use two + operators to build myStr with myName inside it. - testString: assert(code.match(/["']\s*\+\s*myName\s*\+\s*["']/g).length > 0); - -``` - -
- -## Challenge Seed -
- -
+`myName` should be set to a string at least 3 characters long. ```js -// Only change code below this line -var myName; -var myStr; - - +assert(typeof myName !== 'undefined' && myName.length > 2); ``` -
+You should use two `+` operators to build `myStr` with `myName` inside it. +```js +assert(code.match(/["']\s*\+\s*myName\s*\+\s*["']/g).length > 0); +``` -### After Test -
+# --seed-- + +## --after-user-code-- ```js (function(){ @@ -75,17 +57,17 @@ var myStr; })(); ``` -
+## --seed-contents-- -
- -## Solution -
+```js +// Only change code below this line +var myName; +var myStr; +``` +# --solutions-- ```js var myName = "Bob"; var myStr = "My name is " + myName + " and I am well!"; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.md index 59c860aa5a..c096e76635 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.md @@ -6,11 +6,13 @@ videoUrl: 'https://scrimba.com/c/c2R6BHa' forumTopicId: 16808 --- -## Description -
+# --description-- + A for loop can also count backwards, so long as we can define the right conditions. -In order to count backwards by twos, we'll need to change our initialization, condition, and final-expression. -We'll start at i = 10 and loop while i > 0. We'll decrement i by 2 each loop with i -= 2. + +In order to count backwards by twos, we'll need to change our `initialization`, `condition`, and `final-expression`. + +We'll start at `i = 10` and loop while `i > 0`. We'll decrement `i` by 2 each loop with `i -= 2`. ```js var ourArray = []; @@ -19,62 +21,50 @@ for (var i = 10; i > 0; i -= 2) { } ``` -ourArray will now contain [10,8,6,4,2]. -Let's change our initialization and final-expression so we can count backward by twos by odd numbers. -
+`ourArray` will now contain `[10,8,6,4,2]`. Let's change our `initialization` and `final-expression` so we can count backward by twos by odd numbers. -## Instructions -
-Push the odd numbers from 9 through 1 to myArray using a for loop. -
+# --instructions-- -## Tests -
+Push the odd numbers from 9 through 1 to `myArray` using a `for` loop. -```yml -tests: - - text: You should be using a for loop for this. - testString: assert(/for\s*\([^)]+?\)/.test(code)); - - text: You should be using the array method push. - testString: assert(code.match(/myArray.push/)); - - text: myArray should equal [9,7,5,3,1]. - testString: assert.deepEqual(myArray, [9,7,5,3,1]); +# --hints-- +You should be using a `for` loop for this. + +```js +assert(/for\s*\([^)]+?\)/.test(code)); ``` -
+You should be using the array method `push`. -## Challenge Seed -
+```js +assert(code.match(/myArray.push/)); +``` -
+`myArray` should equal `[9,7,5,3,1]`. + +```js +assert.deepEqual(myArray, [9, 7, 5, 3, 1]); +``` + +# --seed-- + +## --after-user-code-- + +```js +if(typeof myArray !== "undefined"){(function(){return myArray;})();} +``` + +## --seed-contents-- ```js // Setup var myArray = []; // Only change code below this line - - ``` -
- - -### After Test -
- -```js -if(typeof myArray !== "undefined"){(function(){return myArray;})();} -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myArray = []; @@ -82,5 +72,3 @@ for (var i = 9; i > 0; i -= 2) { myArray.push(i); } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md index 1211816ed3..498327bc2a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md @@ -6,49 +6,159 @@ videoUrl: 'https://scrimba.com/c/c6KE7ty' forumTopicId: 16809 --- -## Description -
-In the casino game Blackjack, a player can gain an advantage over the house by keeping track of the relative number of high and low cards remaining in the deck. This is called Card Counting. +# --description-- + +In the casino game Blackjack, a player can gain an advantage over the house by keeping track of the relative number of high and low cards remaining in the deck. This is called [Card Counting](https://en.wikipedia.org/wiki/Card_counting). + Having more high cards remaining in the deck favors the player. Each card is assigned a value according to the table below. When the count is positive, the player should bet high. When the count is zero or negative, the player should bet low. -
Count ChangeCards
+12, 3, 4, 5, 6
07, 8, 9
-110, 'J', 'Q', 'K', 'A'
-You will write a card counting function. It will receive a card parameter, which can be a number or a string, and increment or decrement the global count variable according to the card's value (see table). The function will then return a string with the current count and the string Bet if the count is positive, or Hold if the count is zero or negative. The current count and the player's decision (Bet or Hold) should be separated by a single space. -Example Output
-3 Hold
5 Bet -Hint
Do NOT reset count to 0 when value is 7, 8, or 9.
Do NOT return an array.
Do NOT include quotes (single or double) in the output. -
-## Instructions -
+
Count ChangeCards
+12, 3, 4, 5, 6
07, 8, 9
-110, 'J', 'Q', 'K', 'A'
-
+You will write a card counting function. It will receive a `card` parameter, which can be a number or a string, and increment or decrement the global `count` variable according to the card's value (see table). The function will then return a string with the current count and the string `Bet` if the count is positive, or `Hold` if the count is zero or negative. The current count and the player's decision (`Bet` or `Hold`) should be separated by a single space. -## Tests -
+**Example Output** +`-3 Hold` +`5 Bet` -```yml -tests: - - text: Cards Sequence 2, 3, 4, 5, 6 should return 5 Bet - testString: assert((function(){ count = 0; cc(2);cc(3);cc(4);cc(5);var out = cc(6); if(out === "5 Bet") {return true;} return false; })()); - - text: Cards Sequence 7, 8, 9 should return 0 Hold - testString: assert((function(){ count = 0; cc(7);cc(8);var out = cc(9); if(out === "0 Hold") {return true;} return false; })()); - - text: Cards Sequence 10, J, Q, K, A should return -5 Hold - testString: assert((function(){ count = 0; cc(10);cc('J');cc('Q');cc('K');var out = cc('A'); if(out === "-5 Hold") {return true;} return false; })()); - - text: Cards Sequence 3, 7, Q, 8, A should return -1 Hold - testString: assert((function(){ count = 0; cc(3);cc(7);cc('Q');cc(8);var out = cc('A'); if(out === "-1 Hold") {return true;} return false; })()); - - text: Cards Sequence 2, J, 9, 2, 7 should return 1 Bet - testString: assert((function(){ count = 0; cc(2);cc('J');cc(9);cc(2);var out = cc(7); if(out === "1 Bet") {return true;} return false; })()); - - text: Cards Sequence 2, 2, 10 should return 1 Bet - testString: assert((function(){ count = 0; cc(2);cc(2);var out = cc(10); if(out === "1 Bet") {return true;} return false; })()); - - text: Cards Sequence 3, 2, A, 10, K should return -1 Hold - testString: assert((function(){ count = 0; cc(3);cc(2);cc('A');cc(10);var out = cc('K'); if(out === "-1 Hold") {return true;} return false; })()); +**Hint** +Do NOT reset `count` to 0 when value is 7, 8, or 9. +Do NOT return an array. +Do NOT include quotes (single or double) in the output. +# --hints-- + +Cards Sequence 2, 3, 4, 5, 6 should return `5 Bet` + +```js +assert( + (function () { + count = 0; + cc(2); + cc(3); + cc(4); + cc(5); + var out = cc(6); + if (out === '5 Bet') { + return true; + } + return false; + })() +); ``` -
+Cards Sequence 7, 8, 9 should return `0 Hold` -## Challenge Seed -
+```js +assert( + (function () { + count = 0; + cc(7); + cc(8); + var out = cc(9); + if (out === '0 Hold') { + return true; + } + return false; + })() +); +``` -
+Cards Sequence 10, J, Q, K, A should return `-5 Hold` + +```js +assert( + (function () { + count = 0; + cc(10); + cc('J'); + cc('Q'); + cc('K'); + var out = cc('A'); + if (out === '-5 Hold') { + return true; + } + return false; + })() +); +``` + +Cards Sequence 3, 7, Q, 8, A should return `-1 Hold` + +```js +assert( + (function () { + count = 0; + cc(3); + cc(7); + cc('Q'); + cc(8); + var out = cc('A'); + if (out === '-1 Hold') { + return true; + } + return false; + })() +); +``` + +Cards Sequence 2, J, 9, 2, 7 should return `1 Bet` + +```js +assert( + (function () { + count = 0; + cc(2); + cc('J'); + cc(9); + cc(2); + var out = cc(7); + if (out === '1 Bet') { + return true; + } + return false; + })() +); +``` + +Cards Sequence 2, 2, 10 should return `1 Bet` + +```js +assert( + (function () { + count = 0; + cc(2); + cc(2); + var out = cc(10); + if (out === '1 Bet') { + return true; + } + return false; + })() +); +``` + +Cards Sequence 3, 2, A, 10, K should return `-1 Hold` + +```js +assert( + (function () { + count = 0; + cc(3); + cc(2); + cc('A'); + cc(10); + var out = cc('K'); + if (out === '-1 Hold') { + return true; + } + return false; + })() +); +``` + +# --seed-- + +## --seed-contents-- ```js var count = 0; @@ -64,15 +174,7 @@ function cc(card) { cc(2); cc(3); cc(7); cc('K'); cc('A'); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js var count = 0; @@ -99,5 +201,3 @@ function cc(card) { } } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md index e6f6b8da34..ce5913ea6c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md @@ -6,64 +6,49 @@ videoUrl: 'https://scrimba.com/c/ca8GEuW' forumTopicId: 16826 --- -## Description -
+# --description-- + We can store decimal numbers in variables too. Decimal numbers are sometimes referred to as floating point numbers or floats. -Note
Not all real numbers can accurately be represented in floating point. This can lead to rounding errors. Details Here. -
-## Instructions -
-Create a variable myDecimal and give it a decimal value with a fractional part (e.g. 5.7). -
+**Note** +Not all real numbers can accurately be represented in floating point. This can lead to rounding errors. [Details Here](https://en.wikipedia.org/wiki/Floating_point#Accuracy_problems). -## Tests -
+# --instructions-- -```yml -tests: - - text: myDecimal should be a number. - testString: assert(typeof myDecimal === "number"); - - text: myDecimal should have a decimal point - testString: assert(myDecimal % 1 != 0); +Create a variable `myDecimal` and give it a decimal value with a fractional part (e.g. `5.7`). -``` +# --hints-- -
- -## Challenge Seed -
- -
+`myDecimal` should be a number. ```js -var ourDecimal = 5.7; - -// Only change code below this line - - +assert(typeof myDecimal === 'number'); ``` -
+`myDecimal` should have a decimal point +```js +assert(myDecimal % 1 != 0); +``` -### After Test -
+# --seed-- + +## --after-user-code-- ```js (function(){if(typeof myDecimal !== "undefined"){return myDecimal;}})(); ``` -
+## --seed-contents-- -
+```js +var ourDecimal = 5.7; -## Solution -
+// Only change code below this line +``` +# --solutions-- ```js var myDecimal = 9.9; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md index b6e1252a63..bff9158d38 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md @@ -6,70 +6,54 @@ videoUrl: 'https://scrimba.com/c/cNanrHq' forumTopicId: 17556 --- -## Description -
-In computer science, data is anything that is meaningful to the computer. JavaScript provides eight different data types which are undefined, null, boolean, string, symbol, bigint, number, and object. -For example, computers distinguish between numbers, such as the number 12, and strings, such as "12", "dog", or "123 cats", which are collections of characters. Computers can perform mathematical operations on a number, but not on a string. +# --description-- + +In computer science, data is anything that is meaningful to the computer. JavaScript provides eight different data types which are `undefined`, `null`, `boolean`, `string`, `symbol`, `bigint`, `number`, and `object`. + +For example, computers distinguish between numbers, such as the number `12`, and `strings`, such as `"12"`, `"dog"`, or `"123 cats"`, which are collections of characters. Computers can perform mathematical operations on a number, but not on a string. + Variables allow computers to store and manipulate data in a dynamic fashion. They do this by using a "label" to point to the data rather than using the data itself. Any of the eight data types may be stored in a variable. -Variables are similar to the x and y variables you use in mathematics, which means they're a simple name to represent the data we want to refer to. Computer variables differ from mathematical variables in that they can store different values at different times. -We tell JavaScript to create or declare a variable by putting the keyword var in front of it, like so: + +`Variables` are similar to the x and y variables you use in mathematics, which means they're a simple name to represent the data we want to refer to. Computer `variables` differ from mathematical variables in that they can store different values at different times. + +We tell JavaScript to create or declare a variable by putting the keyword `var` in front of it, like so: ```js var ourName; ``` -creates a variable called ourName. In JavaScript we end statements with semicolons. -Variable names can be made up of numbers, letters, and $ or _, but may not contain spaces or start with a number. -
+creates a `variable` called `ourName`. In JavaScript we end statements with semicolons. `Variable` names can be made up of numbers, letters, and `$` or `_`, but may not contain spaces or start with a number. -## Instructions -
-Use the var keyword to create a variable called myName. -Hint
Look at the ourName example above if you get stuck. -
+# --instructions-- -## Tests -
+Use the `var` keyword to create a variable called `myName`. -```yml -tests: - - text: You should declare myName with the var keyword, ending with a semicolon - testString: assert(/var\s+myName\s*;/.test(code)); +**Hint** +Look at the `ourName` example above if you get stuck. -``` +# --hints-- -
- -## Challenge Seed -
- -
+You should declare `myName` with the `var` keyword, ending with a semicolon ```js - - +assert(/var\s+myName\s*;/.test(code)); ``` -
+# --seed-- - -### After Test -
+## --after-user-code-- ```js if(typeof myName !== "undefined"){(function(v){return v;})(myName);} ``` -
+## --seed-contents-- -
- -## Solution -
+```js +``` +# --solutions-- ```js var myName; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables.md index a44abd5c09..9c60b5755d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables.md @@ -6,64 +6,72 @@ videoUrl: 'https://scrimba.com/c/c2QvWU6' forumTopicId: 17557 --- -## Description -
+# --description-- + Previously we have used the code -var myName = "your name"; -"your name" is called a string literal. It is a string because it is a series of zero or more characters enclosed in single or double quotes. -
-## Instructions -
-Create two new string variables: myFirstName and myLastName and assign them the values of your first and last name, respectively. -
+`var myName = "your name";` -## Tests -
+`"your name"` is called a string literal. It is a string because it is a series of zero or more characters enclosed in single or double quotes. -```yml -tests: - - text: myFirstName should be a string with at least one character in it. - testString: assert((function(){if(typeof myFirstName !== "undefined" && typeof myFirstName === "string" && myFirstName.length > 0){return true;}else{return false;}})()); - - text: myLastName should be a string with at least one character in it. - testString: assert((function(){if(typeof myLastName !== "undefined" && typeof myLastName === "string" && myLastName.length > 0){return true;}else{return false;}})()); +# --instructions-- -``` +Create two new `string` variables: `myFirstName` and `myLastName` and assign them the values of your first and last name, respectively. -
+# --hints-- -## Challenge Seed -
- -
+`myFirstName` should be a string with at least one character in it. ```js - - - +assert( + (function () { + if ( + typeof myFirstName !== 'undefined' && + typeof myFirstName === 'string' && + myFirstName.length > 0 + ) { + return true; + } else { + return false; + } + })() +); ``` -
+`myLastName` should be a string with at least one character in it. +```js +assert( + (function () { + if ( + typeof myLastName !== 'undefined' && + typeof myLastName === 'string' && + myLastName.length > 0 + ) { + return true; + } else { + return false; + } + })() +); +``` -### After Test -
+# --seed-- + +## --after-user-code-- ```js if(typeof myFirstName !== "undefined" && typeof myLastName !== "undefined"){(function(){return myFirstName + ', ' + myLastName;})();} ``` -
+## --seed-contents-- -
- -## Solution -
+```js +``` +# --solutions-- ```js var myFirstName = "Alan"; var myLastName = "Turing"; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/decrement-a-number-with-javascript.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/decrement-a-number-with-javascript.md index 5cff4c6e9a..d3bf31f2f3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/decrement-a-number-with-javascript.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/decrement-a-number-with-javascript.md @@ -6,72 +6,71 @@ videoUrl: 'https://scrimba.com/c/cM2KeS2' forumTopicId: 17558 --- -## Description -
-You can easily decrement or decrease a variable by one with the -- operator. -i--; +# --description-- + +You can easily decrement or decrease a variable by one with the `--` operator. + +`i--;` + is the equivalent of -i = i - 1; -Note
The entire line becomes i--;, eliminating the need for the equal sign. -
-## Instructions -
-Change the code to use the -- operator on myVar. -
+`i = i - 1;` -## Tests -
+**Note** +The entire line becomes `i--;`, eliminating the need for the equal sign. -```yml -tests: - - text: myVar should equal 10. - testString: assert(myVar === 10); - - text: myVar = myVar - 1; should be changed. - testString: assert(/var\s*myVar\s*=\s*11;\s*\/*.*\s*([-]{2}\s*myVar|myVar\s*[-]{2});/.test(code)); - - text: You should use the -- operator on myVar. - testString: assert(/[-]{2}\s*myVar|myVar\s*[-]{2}/.test(code)); - - text: You should not change code above the specified comment. - testString: assert(/var myVar = 11;/.test(code)); +# --instructions-- +Change the code to use the `--` operator on `myVar`. + +# --hints-- + +`myVar` should equal `10`. + +```js +assert(myVar === 10); ``` -
+`myVar = myVar - 1;` should be changed. -## Challenge Seed -
+```js +assert( + /var\s*myVar\s*=\s*11;\s*\/*.*\s*([-]{2}\s*myVar|myVar\s*[-]{2});/.test(code) +); +``` -
+You should use the `--` operator on `myVar`. + +```js +assert(/[-]{2}\s*myVar|myVar\s*[-]{2}/.test(code)); +``` + +You should not change code above the specified comment. + +```js +assert(/var myVar = 11;/.test(code)); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(z){return 'myVar = ' + z;})(myVar); +``` + +## --seed-contents-- ```js var myVar = 11; // Only change code below this line myVar = myVar - 1; - ``` -
- - -### After Test -
- -```js -(function(z){return 'myVar = ' + z;})(myVar); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myVar = 11; myVar--; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/delete-properties-from-a-javascript-object.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/delete-properties-from-a-javascript-object.md index 0b3a0ace7d..62c8d434e6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/delete-properties-from-a-javascript-object.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/delete-properties-from-a-javascript-object.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cDqKdTv' forumTopicId: 17560 --- -## Description -
+# --description-- + We can also delete properties from objects like this: -delete ourDog.bark; + +`delete ourDog.bark;` Example: @@ -25,7 +26,7 @@ var ourDog = { delete ourDog.bark; ``` -After the last line shown above, ourDog looks like: +After the last line shown above, `ourDog` looks like: ```js { @@ -36,31 +37,33 @@ After the last line shown above, ourDog looks like: } ``` -
+# --instructions-- -## Instructions -
-Delete the "tails" property from myDog. You may use either dot or bracket notation. -
+Delete the `"tails"` property from `myDog`. You may use either dot or bracket notation. -## Tests -
+# --hints-- -```yml -tests: - - text: You should delete the property "tails" from myDog. - testString: assert(typeof myDog === "object" && myDog.tails === undefined); - - text: You should not modify the myDog setup. - testString: 'assert(code.match(/"tails": 1/g).length > 0);' +You should delete the property `"tails"` from `myDog`. +```js +assert(typeof myDog === 'object' && myDog.tails === undefined); ``` -
+You should not modify the `myDog` setup. -## Challenge Seed -
+```js +assert(code.match(/"tails": 1/g).length > 0); +``` -
+# --seed-- + +## --after-user-code-- + +```js +(function(z){return z;})(myDog); +``` + +## --seed-contents-- ```js // Setup @@ -73,27 +76,9 @@ var myDog = { }; // Only change code below this line - - ``` -
- - -### After Test -
- -```js -(function(z){return z;})(myDog); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myDog = { @@ -105,5 +90,3 @@ var myDog = { }; delete myDog.tails; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-decimal-by-another-with-javascript.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-decimal-by-another-with-javascript.md index 3843d4eb75..137c6ceb55 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-decimal-by-another-with-javascript.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-decimal-by-another-with-javascript.md @@ -6,60 +6,50 @@ videoUrl: 'https://scrimba.com/c/cBZe9AW' forumTopicId: 18255 --- -## Description -
+# --description-- + Now let's divide one decimal by another. -
-## Instructions -
-Change the 0.0 so that quotient will equal to 2.2. -
+# --instructions-- -## Tests -
+Change the `0.0` so that `quotient` will equal to `2.2`. -```yml -tests: - - text: The variable quotient should equal 2.2 - testString: assert(quotient === 2.2); - - text: You should use the / operator to divide 4.4 by 2 - testString: assert(/4\.40*\s*\/\s*2\.*0*/.test(code)); - - text: The quotient variable should only be assigned once - testString: assert(code.match(/quotient/g).length === 1); +# --hints-- -``` - -
- -## Challenge Seed -
- -
+The variable `quotient` should equal `2.2` ```js -var quotient = 0.0 / 2.0; // Change this line +assert(quotient === 2.2); ``` -
+You should use the `/` operator to divide 4.4 by 2 +```js +assert(/4\.40*\s*\/\s*2\.*0*/.test(code)); +``` -### After Test -
+The quotient variable should only be assigned once + +```js +assert(code.match(/quotient/g).length === 1); +``` + +# --seed-- + +## --after-user-code-- ```js (function(y){return 'quotient = '+y;})(quotient); ``` -
+## --seed-contents-- -
+```js +var quotient = 0.0 / 2.0; // Change this line +``` -## Solution -
+# --solutions-- ```js var quotient = 4.4 / 2.0; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript.md index 4689fa67ce..879639d00d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript.md @@ -6,70 +6,52 @@ videoUrl: 'https://scrimba.com/c/cqkbdAr' forumTopicId: 17566 --- -## Description -
-We can also divide one number by another. -JavaScript uses the / symbol for division. +# --description-- -Example +We can also divide one number by another. + +JavaScript uses the `/` symbol for division. + +**Example** ```js myVar = 16 / 2; // assigned 8 ``` +# --instructions-- -
+Change the `0` so that the `quotient` is equal to `2`. -## Instructions -
-Change the 0 so that the quotient is equal to 2. -
+# --hints-- -## Tests -
- -```yml -tests: - - text: The variable quotient should be equal to 2. - testString: assert(quotient === 2); - - text: You should use the / operator. - testString: assert(/\d+\s*\/\s*\d+/.test(code)); - -``` - -
- -## Challenge Seed -
- -
+The variable `quotient` should be equal to 2. ```js -var quotient = 66 / 0; - - +assert(quotient === 2); ``` -
+You should use the `/` operator. +```js +assert(/\d+\s*\/\s*\d+/.test(code)); +``` -### After Test -
+# --seed-- + +## --after-user-code-- ```js (function(z){return 'quotient = '+z;})(quotient); ``` -
+## --seed-contents-- -
- -## Solution -
+```js +var quotient = 66 / 0; +``` +# --solutions-- ```js var quotient = 66 / 33; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md index 4d7078f481..01e0024c63 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md @@ -6,62 +6,80 @@ videoUrl: 'https://scrimba.com/c/cvmqRh6' forumTopicId: 17567 --- -## Description -
-Quotes are not the only characters that can be escaped inside a string. There are two reasons to use escaping characters:
  1. To allow you to use characters you may not otherwise be able to type out, such as a carriage return.
  2. To allow you to represent multiple quotes in a string without JavaScript misinterpreting what you mean.
We learned this in the previous challenge. -
CodeOutput
\'single quote
\"double quote
\\backslash
\nnewline
\rcarriage return
\ttab
\bword boundary
\fform feed
-Note that the backslash itself must be escaped in order to display as a backslash. -
+# --description-- + +Quotes are not the only characters that can be escaped inside a string. There are two reasons to use escaping characters: + +1. To allow you to use characters you may not otherwise be able to type out, such as a carriage return. +2. To allow you to represent multiple quotes in a string without JavaScript misinterpreting what you mean. + +We learned this in the previous challenge. + +
CodeOutput
\'single quote
\"double quote
\\backslash
\nnewline
\rcarriage return
\ttab
\bword boundary
\fform feed
+ +*Note that the backslash itself must be escaped in order to display as a backslash.* + +# --instructions-- + +Assign the following three lines of text into the single variable `myStr` using escape sequences. + +
FirstLine
    \SecondLine
ThirdLine
-## Instructions -
-Assign the following three lines of text into the single variable myStr using escape sequences. -
FirstLine
    \SecondLine
ThirdLine
You will need to use escape sequences to insert special characters correctly. You will also need to follow the spacing as it looks above, with no spaces between escape sequences or words. + Here is the text with the escape sequences written out. -FirstLinenewlinetabbackslashSecondLinenewlineThirdLine -
-## Tests -
+"FirstLine```newline``tab``backslash```SecondLine`newline`ThirdLine" -```yml -tests: - - text: myStr should not contain any spaces - testString: assert(!/ /.test(myStr)); - - text: myStr should contain the strings FirstLine, SecondLine and ThirdLine (remember case sensitivity) - testString: assert(/FirstLine/.test(myStr) && /SecondLine/.test(myStr) && /ThirdLine/.test(myStr)); - - text: FirstLine should be followed by the newline character \n - testString: assert(/FirstLine\n/.test(myStr)); - - text: myStr should contain a tab character \t which follows a newline character - testString: assert(/\n\t/.test(myStr)); - - text: SecondLine should be preceded by the backslash character \ - testString: assert(/\\SecondLine/.test(myStr)); - - text: There should be a newline character between SecondLine and ThirdLine - testString: assert(/SecondLine\nThirdLine/.test(myStr)); - - text: myStr should only contain characters shown in the instructions - testString: assert(myStr === 'FirstLine\n\t\\SecondLine\nThirdLine'); +# --hints-- -``` - -
- -## Challenge Seed -
- -
+`myStr` should not contain any spaces ```js -var myStr; // Change this line - - +assert(!/ /.test(myStr)); ``` -
+`myStr` should contain the strings `FirstLine`, `SecondLine` and `ThirdLine` (remember case sensitivity) +```js +assert( + /FirstLine/.test(myStr) && /SecondLine/.test(myStr) && /ThirdLine/.test(myStr) +); +``` -### After Test -
+`FirstLine` should be followed by the newline character `\n` + +```js +assert(/FirstLine\n/.test(myStr)); +``` + +`myStr` should contain a tab character `\t` which follows a newline character + +```js +assert(/\n\t/.test(myStr)); +``` + +`SecondLine` should be preceded by the backslash character `\` + +```js +assert(/\\SecondLine/.test(myStr)); +``` + +There should be a newline character between `SecondLine` and `ThirdLine` + +```js +assert(/SecondLine\nThirdLine/.test(myStr)); +``` + +`myStr` should only contain characters shown in the instructions + +```js +assert(myStr === 'FirstLine\n\t\\SecondLine\nThirdLine'); +``` + +# --seed-- + +## --after-user-code-- ```js (function(){ @@ -69,16 +87,14 @@ if (myStr !== undefined){ console.log('myStr:\n' + myStr);}})(); ``` -
+## --seed-contents-- -
- -## Solution -
+```js +var myStr; // Change this line +``` +# --solutions-- ```js var myStr = "FirstLine\n\t\\SecondLine\nThirdLine"; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/escaping-literal-quotes-in-strings.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/escaping-literal-quotes-in-strings.md index 3ac1b05d79..76e023fc2c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/escaping-literal-quotes-in-strings.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/escaping-literal-quotes-in-strings.md @@ -6,51 +6,41 @@ videoUrl: 'https://scrimba.com/c/c2QvgSr' forumTopicId: 17568 --- -## Description -
-When you are defining a string you must start and end with a single or double quote. What happens when you need a literal quote: " or ' inside of your string? -In JavaScript, you can escape a quote from considering it as an end of string quote by placing a backslash (\) in front of the quote. -var sampleStr = "Alan said, \"Peter is learning JavaScript\"."; +# --description-- + +When you are defining a string you must start and end with a single or double quote. What happens when you need a literal quote: `"` or `'` inside of your string? + +In JavaScript, you can escape a quote from considering it as an end of string quote by placing a backslash (`\`) in front of the quote. + +`var sampleStr = "Alan said, \"Peter is learning JavaScript\".";` + This signals to JavaScript that the following quote is not the end of the string, but should instead appear inside the string. So if you were to print this to the console, you would get: -Alan said, "Peter is learning JavaScript". -
-## Instructions -
-Use backslashes to assign a string to the myStr variable so that if you were to print it to the console, you would see: -I am a "double quoted" string inside "double quotes". -
+`Alan said, "Peter is learning JavaScript".` -## Tests -
+# --instructions-- -```yml -tests: - - text: You should use two double quotes (") and four escaped double quotes (\"). - testString: assert(code.match(/\\"/g).length === 4 && code.match(/[^\\]"/g).length === 2); - - text: 'Variable myStr should contain the string: I am a "double quoted" string inside "double quotes".' - testString: 'assert(myStr === "I am a \"double quoted\" string inside \"double quotes\".");' +Use backslashes to assign a string to the `myStr` variable so that if you were to print it to the console, you would see: -``` +`I am a "double quoted" string inside "double quotes".` -
+# --hints-- -## Challenge Seed -
- -
+You should use two double quotes (`"`) and four escaped double quotes (`\"`). ```js -var myStr = ""; // Change this line - - +assert(code.match(/\\"/g).length === 4 && code.match(/[^\\]"/g).length === 2); ``` -
+Variable myStr should contain the string: `I am a "double quoted" string inside "double quotes".` +```js +assert(myStr === 'I am a "double quoted" string inside "double quotes".'); +``` -### After Test -
+# --seed-- + +## --after-user-code-- ```js (function(){ @@ -62,16 +52,14 @@ var myStr = ""; // Change this line })(); ``` -
+## --seed-contents-- -
- -## Solution -
+```js +var myStr = ""; // Change this line +``` +# --solutions-- ```js var myStr = "I am a \"double quoted\" string inside \"double quotes\"."; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md index 14d5294b00..31a1fddeb5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md @@ -6,38 +6,44 @@ videoUrl: 'https://scrimba.com/c/cvmqEAd' forumTopicId: 18182 --- -## Description -
-You can find the length of a String value by writing .length after the string variable or string literal. -"Alan Peter".length; // 10 -For example, if we created a variable var firstName = "Charles", we could find out how long the string "Charles" is by using the firstName.length property. -
+# --description-- -## Instructions -
-Use the .length property to count the number of characters in the lastName variable and assign it to lastNameLength. -
+You can find the length of a `String` value by writing `.length` after the string variable or string literal. -## Tests -
+`"Alan Peter".length; // 10` -```yml -tests: - - text: 'You should not change the variable declarations in the // Setup section.' - testString: assert(code.match(/var lastNameLength = 0;/) && code.match(/var lastName = "Lovelace";/)); - - text: lastNameLength should be equal to eight. - testString: assert(typeof lastNameLength !== 'undefined' && lastNameLength === 8); - - text: 'You should be getting the length of lastName by using .length like this: lastName.length.' - testString: assert(code.match(/=\s*lastName\.length/g) && !code.match(/lastName\s*=\s*8/)); +For example, if we created a variable `var firstName = "Charles"`, we could find out how long the string `"Charles"` is by using the `firstName.length` property. +# --instructions-- + +Use the `.length` property to count the number of characters in the `lastName` variable and assign it to `lastNameLength`. + +# --hints-- + +You should not change the variable declarations in the `// Setup` section. + +```js +assert( + code.match(/var lastNameLength = 0;/) && + code.match(/var lastName = "Lovelace";/) +); ``` -
+`lastNameLength` should be equal to eight. -## Challenge Seed -
+```js +assert(typeof lastNameLength !== 'undefined' && lastNameLength === 8); +``` -
+You should be getting the length of `lastName` by using `.length` like this: `lastName.length`. + +```js +assert(code.match(/=\s*lastName\.length/g) && !code.match(/lastName\s*=\s*8/)); +``` + +# --seed-- + +## --seed-contents-- ```js // Setup @@ -47,22 +53,12 @@ var lastName = "Lovelace"; // Only change code below this line lastNameLength = lastName; - - ``` -
- -
- -## Solution -
- +# --solutions-- ```js var lastNameLength = 0; var lastName = "Lovelace"; lastNameLength = lastName.length; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript.md index dadba1b4dd..4f7d94a138 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript.md @@ -6,69 +6,64 @@ videoUrl: 'https://scrimba.com/c/cWP24Ub' forumTopicId: 18184 --- -## Description -
-The remainder operator % gives the remainder of the division of two numbers. -Example +# --description-- + +The remainder operator `%` gives the remainder of the division of two numbers. + +**Example** +
5 % 2 = 1 because
Math.floor(5 / 2) = 2 (Quotient)
2 * 2 = 4
5 - 4 = 1 (Remainder)
-Usage
In mathematics, a number can be checked to be even or odd by checking the remainder of the division of the number by 2. + +**Usage** +In mathematics, a number can be checked to be even or odd by checking the remainder of the division of the number by `2`. +
17 % 2 = 1 (17 is Odd)
48 % 2 = 0 (48 is Even)
-Note
The remainder operator is sometimes incorrectly referred to as the "modulus" operator. It is very similar to modulus, but does not work properly with negative numbers. -
-## Instructions -
-Set remainder equal to the remainder of 11 divided by 3 using the remainder (%) operator. -
+**Note** +The remainder operator is sometimes incorrectly referred to as the "modulus" operator. It is very similar to modulus, but does not work properly with negative numbers. -## Tests -
+# --instructions-- -```yml -tests: - - text: The variable remainder should be initialized - testString: assert(/var\s+?remainder/.test(code)); - - text: The value of remainder should be 2 - testString: assert(remainder === 2); - - text: You should use the % operator - testString: assert(/\s+?remainder\s*?=\s*?.*%.*;?/.test(code)); +Set `remainder` equal to the remainder of `11` divided by `3` using the remainder (`%`) operator. -``` +# --hints-- -
- -## Challenge Seed -
- -
+The variable `remainder` should be initialized ```js -// Only change code below this line - -var remainder; - +assert(/var\s+?remainder/.test(code)); ``` -
+The value of `remainder` should be `2` +```js +assert(remainder === 2); +``` -### After Test -
+You should use the `%` operator + +```js +assert(/\s+?remainder\s*?=\s*?.*%.*;?/.test(code)); +``` + +# --seed-- + +## --after-user-code-- ```js (function(y){return 'remainder = '+y;})(remainder); ``` -
+## --seed-contents-- -
+```js +// Only change code below this line -## Solution -
+var remainder; +``` +# --solutions-- ```js var remainder = 11 % 3; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-fractions-with-javascript.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-fractions-with-javascript.md index 411ac38343..3c7f7278cc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-fractions-with-javascript.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-fractions-with-javascript.md @@ -6,38 +6,48 @@ videoUrl: 'https://scrimba.com/c/cyWJJs3' forumTopicId: 18185 --- -## Description -
+# --description-- + Random numbers are useful for creating random behavior. -JavaScript has a Math.random() function that generates a random decimal number between 0 (inclusive) and not quite up to 1 (exclusive). Thus Math.random() can return a 0 but never quite return a 1 -Note
Like Storing Values with the Equal Operator, all function calls will be resolved before the return executes, so we can return the value of the Math.random() function. -
-## Instructions -
-Change randomFraction to return a random number instead of returning 0. -
+JavaScript has a `Math.random()` function that generates a random decimal number between `0` (inclusive) and not quite up to `1` (exclusive). Thus `Math.random()` can return a `0` but never quite return a `1` -## Tests -
+**Note** +Like [Storing Values with the Equal Operator](/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator), all function calls will be resolved before the `return` executes, so we can `return` the value of the `Math.random()` function. -```yml -tests: - - text: randomFraction should return a random number. - testString: assert(typeof randomFraction() === "number"); - - text: The number returned by randomFraction should be a decimal. - testString: assert((randomFraction()+''). match(/\./g)); - - text: You should be using Math.random to generate the random decimal number. - testString: assert(code.match(/Math\.random/g).length >= 0); +# --instructions-- +Change `randomFraction` to return a random number instead of returning `0`. + +# --hints-- + +`randomFraction` should return a random number. + +```js +assert(typeof randomFraction() === 'number'); ``` -
+The number returned by `randomFraction` should be a decimal. -## Challenge Seed -
+```js +assert((randomFraction() + '').match(/\./g)); +``` -
+You should be using `Math.random` to generate the random decimal number. + +```js +assert(code.match(/Math\.random/g).length >= 0); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(){return randomFraction();})(); +``` + +## --seed-contents-- ```js function randomFraction() { @@ -50,28 +60,10 @@ function randomFraction() { } ``` -
- - -### After Test -
- -```js -(function(){return randomFraction();})(); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js function randomFraction() { return Math.random(); } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md index 6b95d4dd17..c2d6435652 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md @@ -6,43 +6,68 @@ videoUrl: 'https://scrimba.com/c/cRn6bfr' forumTopicId: 18186 --- -## Description -
+# --description-- + It's great that we can generate random decimal numbers, but it's even more useful if we use it to generate random whole numbers. +
  1. Use Math.random() to generate a random decimal.
  2. Multiply that random decimal by 20.
  3. Use another function, Math.floor() to round the number down to its nearest whole number.
-Remember that Math.random() can never quite return a 1 and, because we're rounding down, it's impossible to actually get 20. This technique will give us a whole number between 0 and 19. + +Remember that `Math.random()` can never quite return a `1` and, because we're rounding down, it's impossible to actually get `20`. This technique will give us a whole number between `0` and `19`. + Putting everything together, this is what our code looks like: -Math.floor(Math.random() * 20); -We are calling Math.random(), multiplying the result by 20, then passing the value to Math.floor() function to round the value down to the nearest whole number. -
-## Instructions -
-Use this technique to generate and return a random whole number between 0 and 9. -
+`Math.floor(Math.random() * 20);` -## Tests -
+We are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` function to round the value down to the nearest whole number. -```yml -tests: - - text: The result of randomWholeNum should be a whole number. - testString: assert(typeof randomWholeNum() === "number" && (function(){var r = randomWholeNum();return Math.floor(r) === r;})()); - - text: You should use Math.random to generate a random number. - testString: assert(code.match(/Math.random/g).length >= 1); - - text: You should have multiplied the result of Math.random by 10 to make it a number that is between zero and nine. - testString: assert(code.match(/\s*?Math.random\s*?\(\s*?\)\s*?\*\s*?10[\D]\s*?/g) || code.match(/\s*?10\s*?\*\s*?Math.random\s*?\(\s*?\)\s*?/g)); - - text: You should use Math.floor to remove the decimal part of the number. - testString: assert(code.match(/Math.floor/g).length >= 1); +# --instructions-- +Use this technique to generate and return a random whole number between `0` and `9`. + +# --hints-- + +The result of `randomWholeNum` should be a whole number. + +```js +assert( + typeof randomWholeNum() === 'number' && + (function () { + var r = randomWholeNum(); + return Math.floor(r) === r; + })() +); ``` -
+You should use `Math.random` to generate a random number. -## Challenge Seed -
+```js +assert(code.match(/Math.random/g).length >= 1); +``` -
+You should have multiplied the result of `Math.random` by 10 to make it a number that is between zero and nine. + +```js +assert( + code.match(/\s*?Math.random\s*?\(\s*?\)\s*?\*\s*?10[\D]\s*?/g) || + code.match(/\s*?10\s*?\*\s*?Math.random\s*?\(\s*?\)\s*?/g) +); +``` + +You should use `Math.floor` to remove the decimal part of the number. + +```js +assert(code.match(/Math.floor/g).length >= 1); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(){return randomWholeNum();})(); +``` + +## --seed-contents-- ```js function randomWholeNum() { @@ -53,28 +78,10 @@ function randomWholeNum() { } ``` -
- - -### After Test -
- -```js -(function(){return randomWholeNum();})(); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js function randomWholeNum() { return Math.floor(Math.random() * 10); } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md index 6c9ef78a43..e01399e13c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md @@ -6,55 +6,62 @@ videoUrl: 'https://scrimba.com/c/cm83yu6' forumTopicId: 18187 --- -## Description -
+# --description-- + Instead of generating a random whole number between zero and a given number like we did before, we can generate a random whole number that falls within a range of two specific numbers. -To do this, we'll define a minimum number min and a maximum number max. + +To do this, we'll define a minimum number `min` and a maximum number `max`. + Here's the formula we'll use. Take a moment to read it and try to understand what this code is doing: -Math.floor(Math.random() * (max - min + 1)) + min -
-## Instructions -
-Create a function called randomRange that takes a range myMin and myMax and returns a random whole number that's greater than or equal to myMin, and is less than or equal to myMax, inclusive. -
+`Math.floor(Math.random() * (max - min + 1)) + min` -## Tests -
+# --instructions-- -```yml -tests: - - text: The lowest random number that can be generated by randomRange should be equal to your minimum number, myMin. - testString: assert(calcMin === 5); - - text: The highest random number that can be generated by randomRange should be equal to your maximum number, myMax. - testString: assert(calcMax === 15); - - text: The random number generated by randomRange should be an integer, not a decimal. - testString: assert(randomRange(0,1) % 1 === 0 ); - - text: randomRange should use both myMax and myMin, and return a random number in your range. - testString: assert((function(){if(code.match(/myMax/g).length > 1 && code.match(/myMin/g).length > 2 && code.match(/Math.floor/g) && code.match(/Math.random/g)){return true;}else{return false;}})()); +Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin`, and is less than or equal to `myMax`, inclusive. -``` +# --hints-- -
- -## Challenge Seed -
- -
+The lowest random number that can be generated by `randomRange` should be equal to your minimum number, `myMin`. ```js -function randomRange(myMin, myMax) { - // Only change code below this line - return 0; - // Only change code above this line -} +assert(calcMin === 5); ``` -
+The highest random number that can be generated by `randomRange` should be equal to your maximum number, `myMax`. +```js +assert(calcMax === 15); +``` -### After Test -
+The random number generated by `randomRange` should be an integer, not a decimal. + +```js +assert(randomRange(0, 1) % 1 === 0); +``` + +`randomRange` should use both `myMax` and `myMin`, and return a random number in your range. + +```js +assert( + (function () { + if ( + code.match(/myMax/g).length > 1 && + code.match(/myMin/g).length > 2 && + code.match(/Math.floor/g) && + code.match(/Math.random/g) + ) { + return true; + } else { + return false; + } + })() +); +``` + +# --seed-- + +## --after-user-code-- ```js var calcMin = 100; @@ -73,18 +80,20 @@ for(var i = 0; i < 100; i++) { })() ``` -
+## --seed-contents-- -
- -## Solution -
+```js +function randomRange(myMin, myMax) { + // Only change code below this line + return 0; + // Only change code above this line +} +``` +# --solutions-- ```js function randomRange(myMin, myMax) { return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/global-scope-and-functions.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/global-scope-and-functions.md index 71f6a78f6a..618531b69f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/global-scope-and-functions.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/global-scope-and-functions.md @@ -6,68 +6,47 @@ videoUrl: 'https://scrimba.com/c/cQM7mCN' forumTopicId: 18193 --- -## Description -
+# --description-- + In JavaScript, scope refers to the visibility of variables. Variables which are defined outside of a function block have Global scope. This means, they can be seen everywhere in your JavaScript code. -Variables which are used without the var keyword are automatically created in the global scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with var. -
-## Instructions -
-Using var, declare a global variable named myGlobal outside of any function. Initialize it with a value of 10. -Inside function fun1, assign 5 to oopsGlobal without using the var keyword. -
+Variables which are used without the `var` keyword are automatically created in the `global` scope. This can create unintended consequences elsewhere in your code or when running a function again. You should always declare your variables with `var`. -## Tests -
+# --instructions-- -```yml -tests: - - text: myGlobal should be defined - testString: assert(typeof myGlobal != "undefined"); - - text: myGlobal should have a value of 10 - testString: assert(myGlobal === 10); - - text: myGlobal should be declared using the var keyword - testString: assert(/var\s+myGlobal/.test(code)); - - text: oopsGlobal should be a global variable and have a value of 5 - testString: assert(typeof oopsGlobal != "undefined" && oopsGlobal === 5); +Using `var`, declare a global variable named `myGlobal` outside of any function. Initialize it with a value of `10`. -``` +Inside function `fun1`, assign `5` to `oopsGlobal` ***without*** using the `var` keyword. -
+# --hints-- -## Challenge Seed -
- -
+`myGlobal` should be defined ```js -// Declare the myGlobal variable below this line - - -function fun1() { - // Assign 5 to oopsGlobal Here - -} - -// Only change code above this line - -function fun2() { - var output = ""; - if (typeof myGlobal != "undefined") { - output += "myGlobal: " + myGlobal; - } - if (typeof oopsGlobal != "undefined") { - output += " oopsGlobal: " + oopsGlobal; - } - console.log(output); -} +assert(typeof myGlobal != 'undefined'); ``` -
+`myGlobal` should have a value of `10` -### Before Test -
+```js +assert(myGlobal === 10); +``` + +`myGlobal` should be declared using the `var` keyword + +```js +assert(/var\s+myGlobal/.test(code)); +``` + +`oopsGlobal` should be a global variable and have a value of `5` + +```js +assert(typeof oopsGlobal != 'undefined' && oopsGlobal === 5); +``` + +# --seed-- + +## --before-user-code-- ```js var logOutput = ""; @@ -92,10 +71,7 @@ var oopsGlobal; capture(); ``` -
- -### After Test -
+## --after-user-code-- ```js fun1(); @@ -104,13 +80,32 @@ uncapture(); (function() { return logOutput || "console.log never called"; })(); ``` -
+## --seed-contents-- -
+```js +// Declare the myGlobal variable below this line -## Solution -
+function fun1() { + // Assign 5 to oopsGlobal Here + +} + +// Only change code above this line + +function fun2() { + var output = ""; + if (typeof myGlobal != "undefined") { + output += "myGlobal: " + myGlobal; + } + if (typeof oopsGlobal != "undefined") { + output += " oopsGlobal: " + oopsGlobal; + } + console.log(output); +} +``` + +# --solutions-- ```js var myGlobal = 10; @@ -130,5 +125,3 @@ function fun2() { console.log(output); } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md index 5424e40ed7..edfee1da60 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md @@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/c2QwKH2' forumTopicId: 18194 --- -## Description -
-It is possible to have both local and global variables with the same name. When you do this, the local variable takes precedence over the global variable. +# --description-- + +It is possible to have both local and global variables with the same name. When you do this, the `local` variable takes precedence over the `global` variable. + In this example: ```js @@ -19,34 +20,35 @@ function myFun() { } ``` -The function myFun will return "Head" because the local version of the variable is present. -
+The function `myFun` will return `"Head"` because the `local` version of the variable is present. -## Instructions -
-Add a local variable to myOutfit function to override the value of outerWear with "sweater". -
+# --instructions-- -## Tests -
+Add a local variable to `myOutfit` function to override the value of `outerWear` with `"sweater"`. -```yml -tests: - - text: You should not change the value of the global outerWear. - testString: assert(outerWear === "T-Shirt"); - - text: myOutfit should return "sweater". - testString: assert(myOutfit() === "sweater"); - - text: You should not change the return statement. - testString: assert(/return outerWear/.test(code)); +# --hints-- +You should not change the value of the global `outerWear`. + +```js +assert(outerWear === 'T-Shirt'); ``` -
+`myOutfit` should return `"sweater"`. -## Challenge Seed -
+```js +assert(myOutfit() === 'sweater'); +``` -
+You should not change the return statement. + +```js +assert(/return outerWear/.test(code)); +``` + +# --seed-- + +## --seed-contents-- ```js // Setup @@ -64,15 +66,7 @@ function myOutfit() { myOutfit(); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js var outerWear = "T-Shirt"; @@ -81,5 +75,3 @@ function myOutfit() { return outerWear; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/golf-code.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/golf-code.md index 7c62d6c5b5..74890fc3f4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/golf-code.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/golf-code.md @@ -6,55 +6,87 @@ videoUrl: 'https://scrimba.com/c/c9ykNUR' forumTopicId: 18195 --- -## Description -
-In the game of golf each hole has a par meaning the average number of strokes a golfer is expected to make in order to sink the ball in a hole to complete the play. Depending on how far above or below par your strokes are, there is a different nickname. -Your function will be passed par and strokes arguments. Return the correct string according to this table which lists the strokes in order of priority; top (highest) to bottom (lowest): -
StrokesReturn
1"Hole-in-one!"
<= par - 2"Eagle"
par - 1"Birdie"
par"Par"
par + 1"Bogey"
par + 2"Double Bogey"
>= par + 3"Go Home!"
-par and strokes will always be numeric and positive. We have added an array of all the names for your convenience. -
+# --description-- -## Instructions -
+In the game of [golf](https://en.wikipedia.org/wiki/Golf) each hole has a `par` meaning the average number of `strokes` a golfer is expected to make in order to sink the ball in a hole to complete the play. Depending on how far above or below `par` your `strokes` are, there is a different nickname. -
+Your function will be passed `par` and `strokes` arguments. Return the correct string according to this table which lists the strokes in order of priority; top (highest) to bottom (lowest): -## Tests -
+
StrokesReturn
1"Hole-in-one!"
<= par - 2"Eagle"
par - 1"Birdie"
par"Par"
par + 1"Bogey"
par + 2"Double Bogey"
>= par + 3"Go Home!"
-```yml -tests: - - text: golfScore(4, 1) should return "Hole-in-one!" - testString: assert(golfScore(4, 1) === "Hole-in-one!"); - - text: golfScore(4, 2) should return "Eagle" - testString: assert(golfScore(4, 2) === "Eagle"); - - text: golfScore(5, 2) should return "Eagle" - testString: assert(golfScore(5, 2) === "Eagle"); - - text: golfScore(4, 3) should return "Birdie" - testString: assert(golfScore(4, 3) === "Birdie"); - - text: golfScore(4, 4) should return "Par" - testString: assert(golfScore(4, 4) === "Par"); - - text: golfScore(1, 1) should return "Hole-in-one!" - testString: assert(golfScore(1, 1) === "Hole-in-one!"); - - text: golfScore(5, 5) should return "Par" - testString: assert(golfScore(5, 5) === "Par"); - - text: golfScore(4, 5) should return "Bogey" - testString: assert(golfScore(4, 5) === "Bogey"); - - text: golfScore(4, 6) should return "Double Bogey" - testString: assert(golfScore(4, 6) === "Double Bogey"); - - text: golfScore(4, 7) should return "Go Home!" - testString: assert(golfScore(4, 7) === "Go Home!"); - - text: golfScore(5, 9) should return "Go Home!" - testString: assert(golfScore(5, 9) === "Go Home!"); +`par` and `strokes` will always be numeric and positive. We have added an array of all the names for your convenience. +# --hints-- + +`golfScore(4, 1)` should return "Hole-in-one!" + +```js +assert(golfScore(4, 1) === 'Hole-in-one!'); ``` -
+`golfScore(4, 2)` should return "Eagle" -## Challenge Seed -
+```js +assert(golfScore(4, 2) === 'Eagle'); +``` -
+`golfScore(5, 2)` should return "Eagle" + +```js +assert(golfScore(5, 2) === 'Eagle'); +``` + +`golfScore(4, 3)` should return "Birdie" + +```js +assert(golfScore(4, 3) === 'Birdie'); +``` + +`golfScore(4, 4)` should return "Par" + +```js +assert(golfScore(4, 4) === 'Par'); +``` + +`golfScore(1, 1)` should return "Hole-in-one!" + +```js +assert(golfScore(1, 1) === 'Hole-in-one!'); +``` + +`golfScore(5, 5)` should return "Par" + +```js +assert(golfScore(5, 5) === 'Par'); +``` + +`golfScore(4, 5)` should return "Bogey" + +```js +assert(golfScore(4, 5) === 'Bogey'); +``` + +`golfScore(4, 6)` should return "Double Bogey" + +```js +assert(golfScore(4, 6) === 'Double Bogey'); +``` + +`golfScore(4, 7)` should return "Go Home!" + +```js +assert(golfScore(4, 7) === 'Go Home!'); +``` + +`golfScore(5, 9)` should return "Go Home!" + +```js +assert(golfScore(5, 9) === 'Go Home!'); +``` + +# --seed-- + +## --seed-contents-- ```js var names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"]; @@ -69,15 +101,7 @@ function golfScore(par, strokes) { golfScore(5, 4); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function golfScore(par, strokes) { @@ -108,5 +132,3 @@ function golfScore(par, strokes) { return "Go Home!"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/increment-a-number-with-javascript.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/increment-a-number-with-javascript.md index 53a0415397..59346ae0f5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/increment-a-number-with-javascript.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/increment-a-number-with-javascript.md @@ -6,72 +6,71 @@ videoUrl: 'https://scrimba.com/c/ca8GLT9' forumTopicId: 18201 --- -## Description -
-You can easily increment or add one to a variable with the ++ operator. -i++; +# --description-- + +You can easily increment or add one to a variable with the `++` operator. + +`i++;` + is the equivalent of -i = i + 1; -Note
The entire line becomes i++;, eliminating the need for the equal sign. -
-## Instructions -
-Change the code to use the ++ operator on myVar. -
+`i = i + 1;` -## Tests -
+**Note** +The entire line becomes `i++;`, eliminating the need for the equal sign. -```yml -tests: - - text: myVar should equal 88. - testString: assert(myVar === 88); - - text: You should not use the assignment operator. - testString: assert(/var\s*myVar\s*=\s*87;\s*\/*.*\s*([+]{2}\s*myVar|myVar\s*[+]{2});/.test(code)); - - text: You should use the ++ operator. - testString: assert(/[+]{2}\s*myVar|myVar\s*[+]{2}/.test(code)); - - text: You should not change code above the specified comment. - testString: assert(/var myVar = 87;/.test(code)); +# --instructions-- +Change the code to use the `++` operator on `myVar`. + +# --hints-- + +`myVar` should equal `88`. + +```js +assert(myVar === 88); ``` -
+You should not use the assignment operator. -## Challenge Seed -
+```js +assert( + /var\s*myVar\s*=\s*87;\s*\/*.*\s*([+]{2}\s*myVar|myVar\s*[+]{2});/.test(code) +); +``` -
+You should use the `++` operator. + +```js +assert(/[+]{2}\s*myVar|myVar\s*[+]{2}/.test(code)); +``` + +You should not change code above the specified comment. + +```js +assert(/var myVar = 87;/.test(code)); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(z){return 'myVar = ' + z;})(myVar); +``` + +## --seed-contents-- ```js var myVar = 87; // Only change code below this line myVar = myVar + 1; - ``` -
- - -### After Test -
- -```js -(function(z){return 'myVar = ' + z;})(myVar); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myVar = 87; myVar++; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md index 8cdbd7a8da..9423a7ce5d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md @@ -6,60 +6,41 @@ videoUrl: 'https://scrimba.com/c/cWJ4Bfb' forumTopicId: 301171 --- -## Description -
+# --description-- + It is common to initialize a variable to an initial value in the same line as it is declared. -var myVar = 0; -Creates a new variable called myVar and assigns it an initial value of 0. -
-## Instructions -
-Define a variable a with var and initialize it to a value of 9. -
+`var myVar = 0;` -## Tests -
+Creates a new variable called `myVar` and assigns it an initial value of `0`. -```yml -tests: - - text: You should initialize a to a value of 9. - testString: assert(/var\s+a\s*=\s*9\s*/.test(code)); +# --instructions-- -``` +Define a variable `a` with `var` and initialize it to a value of `9`. -
+# --hints-- -## Challenge Seed -
- -
+You should initialize `a` to a value of `9`. ```js - - +assert(/var\s+a\s*=\s*9\s*/.test(code)); ``` -
+# --seed-- - -### After Test -
+## --after-user-code-- ```js if(typeof a !== 'undefined') {(function(a){return "a = " + a;})(a);} else { (function() {return 'a is undefined';})(); } ``` -
+## --seed-contents-- -
- -## Solution -
+```js +``` +# --solutions-- ```js var a = 9; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements.md index 307460fbcf..b650535f7b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements.md @@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/c/caeJ2hm' forumTopicId: 18206 --- -## Description -
-If you have multiple conditions that need to be addressed, you can chain if statements together with else if statements. +# --description-- + +If you have multiple conditions that need to be addressed, you can chain `if` statements together with `else if` statements. ```js if (num > 15) { @@ -20,43 +20,67 @@ if (num > 15) { } ``` -
+# --instructions-- -## Instructions -
-Convert the logic to use else if statements. -
+Convert the logic to use `else if` statements. -## Tests -
+# --hints-- -```yml -tests: - - text: You should have at least two else statements - testString: assert(code.match(/else/g).length > 1); - - text: You should have at least two if statements - testString: assert(code.match(/if/g).length > 1); - - text: You should have closing and opening curly braces for each if else code block. - testString: assert(code.match(/if\s*\((.+)\)\s*\{[\s\S]+\}\s*else\s+if\s*\((.+)\)\s*\{[\s\S]+\}\s*else\s*\{[\s\S]+\s*\}/)); - - text: testElseIf(0) should return "Smaller than 5" - testString: assert(testElseIf(0) === "Smaller than 5"); - - text: testElseIf(5) should return "Between 5 and 10" - testString: assert(testElseIf(5) === "Between 5 and 10"); - - text: testElseIf(7) should return "Between 5 and 10" - testString: assert(testElseIf(7) === "Between 5 and 10"); - - text: testElseIf(10) should return "Between 5 and 10" - testString: assert(testElseIf(10) === "Between 5 and 10"); - - text: testElseIf(12) should return "Greater than 10" - testString: assert(testElseIf(12) === "Greater than 10"); +You should have at least two `else` statements +```js +assert(code.match(/else/g).length > 1); ``` -
+You should have at least two `if` statements -## Challenge Seed -
+```js +assert(code.match(/if/g).length > 1); +``` -
+You should have closing and opening curly braces for each `if else` code block. + +```js +assert( + code.match( + /if\s*\((.+)\)\s*\{[\s\S]+\}\s*else\s+if\s*\((.+)\)\s*\{[\s\S]+\}\s*else\s*\{[\s\S]+\s*\}/ + ) +); +``` + +`testElseIf(0)` should return "Smaller than 5" + +```js +assert(testElseIf(0) === 'Smaller than 5'); +``` + +`testElseIf(5)` should return "Between 5 and 10" + +```js +assert(testElseIf(5) === 'Between 5 and 10'); +``` + +`testElseIf(7)` should return "Between 5 and 10" + +```js +assert(testElseIf(7) === 'Between 5 and 10'); +``` + +`testElseIf(10)` should return "Between 5 and 10" + +```js +assert(testElseIf(10) === 'Between 5 and 10'); +``` + +`testElseIf(12)` should return "Greater than 10" + +```js +assert(testElseIf(12) === 'Greater than 10'); +``` + +# --seed-- + +## --seed-contents-- ```js function testElseIf(val) { @@ -72,18 +96,9 @@ function testElseIf(val) { } testElseIf(7); - ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function testElseIf(val) { @@ -96,5 +111,3 @@ function testElseIf(val) { } } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-statements.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-statements.md index 56b3742686..429ed73f22 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-statements.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-statements.md @@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/c/cek4Efq' forumTopicId: 18207 --- -## Description -
-When a condition for an if statement is true, the block of code following it is executed. What about when that condition is false? Normally nothing would happen. With an else statement, an alternate block of code can be executed. +# --description-- + +When a condition for an `if` statement is true, the block of code following it is executed. What about when that condition is false? Normally nothing would happen. With an `else` statement, an alternate block of code can be executed. ```js if (num > 10) { @@ -18,41 +18,57 @@ if (num > 10) { } ``` -
+# --instructions-- -## Instructions -
-Combine the if statements into a single if/else statement. -
+Combine the `if` statements into a single `if/else` statement. -## Tests -
+# --hints-- -```yml -tests: - - text: You should only have one if statement in the editor - testString: assert(code.match(/if/g).length === 1); - - text: You should use an else statement - testString: assert(/else/g.test(code)); - - text: testElse(4) should return "5 or Smaller" - testString: assert(testElse(4) === "5 or Smaller"); - - text: testElse(5) should return "5 or Smaller" - testString: assert(testElse(5) === "5 or Smaller"); - - text: testElse(6) should return "Bigger than 5" - testString: assert(testElse(6) === "Bigger than 5"); - - text: testElse(10) should return "Bigger than 5". - testString: assert(testElse(10) === "Bigger than 5"); - - text: You should not change the code above or below the specified comments. - testString: assert(/var result = "";/.test(code) && /return result;/.test(code)); +You should only have one `if` statement in the editor +```js +assert(code.match(/if/g).length === 1); ``` -
+You should use an `else` statement -## Challenge Seed -
+```js +assert(/else/g.test(code)); +``` -
+`testElse(4)` should return "5 or Smaller" + +```js +assert(testElse(4) === '5 or Smaller'); +``` + +`testElse(5)` should return "5 or Smaller" + +```js +assert(testElse(5) === '5 or Smaller'); +``` + +`testElse(6)` should return "Bigger than 5" + +```js +assert(testElse(6) === 'Bigger than 5'); +``` + +`testElse(10)` should return "Bigger than 5". + +```js +assert(testElse(10) === 'Bigger than 5'); +``` + +You should not change the code above or below the specified comments. + +```js +assert(/var result = "";/.test(code) && /return result;/.test(code)); +``` + +# --seed-- + +## --seed-contents-- ```js function testElse(val) { @@ -72,18 +88,9 @@ function testElse(val) { } testElse(4); - ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function testElse(val) { @@ -96,5 +103,3 @@ function testElse(val) { return result; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop.md index f46a9ae2e7..1cb25c8dfc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cm8n7T9' forumTopicId: 18212 --- -## Description -
-For loops don't have to iterate one at a time. By changing our final-expression, we can count by even numbers. -We'll start at i = 0 and loop while i < 10. We'll increment i by 2 each loop with i += 2. +# --description-- + +For loops don't have to iterate one at a time. By changing our `final-expression`, we can count by even numbers. + +We'll start at `i = 0` and loop while `i < 10`. We'll increment `i` by 2 each loop with `i += 2`. ```js var ourArray = []; @@ -18,60 +19,44 @@ for (var i = 0; i < 10; i += 2) { } ``` -ourArray will now contain [0,2,4,6,8]. -Let's change our initialization so we can count by odd numbers. -
+`ourArray` will now contain `[0,2,4,6,8]`. Let's change our `initialization` so we can count by odd numbers. -## Instructions -
-Push the odd numbers from 1 through 9 to myArray using a for loop. -
+# --instructions-- -## Tests -
+Push the odd numbers from 1 through 9 to `myArray` using a `for` loop. -```yml -tests: - - text: You should be using a for loop for this. - testString: assert(/for\s*\([^)]+?\)/.test(code)); - - text: myArray should equal [1,3,5,7,9]. - testString: assert.deepEqual(myArray, [1,3,5,7,9]); +# --hints-- +You should be using a `for` loop for this. + +```js +assert(/for\s*\([^)]+?\)/.test(code)); ``` -
+`myArray` should equal `[1,3,5,7,9]`. -## Challenge Seed -
+```js +assert.deepEqual(myArray, [1, 3, 5, 7, 9]); +``` -
+# --seed-- + +## --after-user-code-- + +```js +if(typeof myArray !== "undefined"){(function(){return myArray;})();} +``` + +## --seed-contents-- ```js // Setup var myArray = []; // Only change code below this line - - ``` -
- - -### After Test -
- -```js -if(typeof myArray !== "undefined"){(function(){return myArray;})();} -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myArray = []; @@ -79,5 +64,3 @@ for (var i = 1; i < 10; i += 2) { myArray.push(i); } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop.md index acd6d4e5b0..c498507f32 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop.md @@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/c/caeR3HB' forumTopicId: 18216 --- -## Description -
-A common task in JavaScript is to iterate through the contents of an array. One way to do that is with a for loop. This code will output each element of the array arr to the console: +# --description-- + +A common task in JavaScript is to iterate through the contents of an array. One way to do that is with a `for` loop. This code will output each element of the array `arr` to the console: ```js var arr = [10, 9, 8, 7, 6]; @@ -17,59 +17,56 @@ for (var i = 0; i < arr.length; i++) { } ``` -Remember that arrays have zero-based indexing, which means the last index of the array is length - 1. Our condition for this loop is i < arr.length, which stops the loop when i is equal to length. In this case the last iteration is i === 4 i.e. when i becomes equal to arr.length and outputs 6 to the console. -
+Remember that arrays have zero-based indexing, which means the last index of the array is `length - 1`. Our condition for this loop is `i < arr.length`, which stops the loop when `i` is equal to `length`. In this case the last iteration is `i === 4` i.e. when `i` becomes equal to `arr.length` and outputs `6` to the console. -## Instructions -
-Declare and initialize a variable total to 0. Use a for loop to add the value of each element of the myArr array to total. -
+# --instructions-- -## Tests -
+Declare and initialize a variable `total` to `0`. Use a `for` loop to add the value of each element of the `myArr` array to `total`. -```yml -tests: - - text: total should be declared and initialized to 0. - testString: assert(code.match(/(var|let|const)\s*?total\s*=\s*0.*?;?/)); - - text: total should equal 20. - testString: assert(total === 20); - - text: You should use a for loop to iterate through myArr. - testString: assert(/for\s*\(/g.test(code) && /myArr\s*\[/g.test(code)); - - text: You should not attempt to directly assign the value 20 to total. - testString: assert(!__helpers.removeWhiteSpace(code).match(/total[=+-]0*[1-9]+/gm)); +# --hints-- + +`total` should be declared and initialized to 0. + +```js +assert(code.match(/(var|let|const)\s*?total\s*=\s*0.*?;?/)); ``` -
+`total` should equal 20. -## Challenge Seed -
-
+```js +assert(total === 20); +``` + +You should use a `for` loop to iterate through `myArr`. + +```js +assert(/for\s*\(/g.test(code) && /myArr\s*\[/g.test(code)); +``` + +You should not attempt to directly assign the value 20 to `total`. + +```js +assert(!__helpers.removeWhiteSpace(code).match(/total[=+-]0*[1-9]+/gm)); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(){if(typeof total !== 'undefined') { return "total = " + total; } else { return "total is undefined";}})() +``` + +## --seed-contents-- ```js // Setup var myArr = [ 2, 3, 4, 5, 6]; // Only change code below this line - ``` -
- -### After Test -
- -```js -(function(){if(typeof total !== 'undefined') { return "total = " + total; } else { return "total is undefined";}})() - -``` - -
- -
- -## Solution -
+# --solutions-- ```js var myArr = [ 2, 3, 4, 5, 6]; @@ -79,5 +76,3 @@ for (var i = 0; i < myArr.length; i++) { total += myArr[i]; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do...while-loops.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do...while-loops.md index de3e8d7245..ea7ae3b5d8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do...while-loops.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do...while-loops.md @@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/c/cDqWGcp' forumTopicId: 301172 --- -## Description -
-The next type of loop you will learn is called a do...while loop. It is called a do...while loop because it will first do one pass of the code inside the loop no matter what, and then continue to run the loop while the specified condition evaluates to true. +# --description-- + +The next type of loop you will learn is called a `do...while` loop. It is called a `do...while` loop because it will first `do` one pass of the code inside the loop no matter what, and then continue to run the loop `while` the specified condition evaluates to `true`. ```js var ourArray = []; @@ -19,8 +19,7 @@ do { } while (i < 5); ``` -The example above behaves similar to other types of loops, and the resulting array will look like [0, 1, 2, 3, 4]. However, what makes the do...while different from other loops is how it behaves when the condition fails on the first check. Let's see this in action: -Here is a regular while loop that will run the code in the loop as long as i < 5: +The example above behaves similar to other types of loops, and the resulting array will look like `[0, 1, 2, 3, 4]`. However, what makes the `do...while` different from other loops is how it behaves when the condition fails on the first check. Let's see this in action: Here is a regular `while` loop that will run the code in the loop as long as `i < 5`: ```js var ourArray = []; @@ -31,8 +30,7 @@ while (i < 5) { } ``` -In this example, we initialize the value of ourArray to an empty array and the value of i to 5. When we execute the while loop, the condition evaluates to false because i is not less than 5, so we do not execute the code inside the loop. The result is that ourArray will end up with no values added to it, and it will still look like [] when all of the code in the example above has completed running. -Now, take a look at a do...while loop: +In this example, we initialize the value of `ourArray` to an empty array and the value of `i` to 5. When we execute the `while` loop, the condition evaluates to `false` because `i` is not less than 5, so we do not execute the code inside the loop. The result is that `ourArray` will end up with no values added to it, and it will still look like `[]` when all of the code in the example above has completed running. Now, take a look at a `do...while` loop: ```js var ourArray = []; @@ -43,35 +41,41 @@ do { } while (i < 5); ``` -In this case, we initialize the value of i to 5, just like we did with the while loop. When we get to the next line, there is no condition to evaluate, so we go to the code inside the curly braces and execute it. We will add a single element to the array and then increment i before we get to the condition check. When we finally evaluate the condition i < 5 on the last line, we see that i is now 6, which fails the conditional check, so we exit the loop and are done. At the end of the above example, the value of ourArray is [5]. -Essentially, a do...while loop ensures that the code inside the loop will run at least once. -Let's try getting a do...while loop to work by pushing values to an array. -
+In this case, we initialize the value of `i` to 5, just like we did with the `while` loop. When we get to the next line, there is no condition to evaluate, so we go to the code inside the curly braces and execute it. We will add a single element to the array and then increment `i` before we get to the condition check. When we finally evaluate the condition `i < 5` on the last line, we see that `i` is now 6, which fails the conditional check, so we exit the loop and are done. At the end of the above example, the value of `ourArray` is `[5]`. Essentially, a `do...while` loop ensures that the code inside the loop will run at least once. Let's try getting a `do...while` loop to work by pushing values to an array. -## Instructions -
-Change the while loop in the code to a do...while loop so the loop will push only the number 10 to myArray, and i will be equal to 11 when your code has finished running. -
+# --instructions-- -## Tests -
+Change the `while` loop in the code to a `do...while` loop so the loop will push only the number `10` to `myArray`, and `i` will be equal to `11` when your code has finished running. -```yml -tests: - - text: You should be using a do...while loop for this exercise. - testString: assert(code.match(/do/g)); - - text: myArray should equal [10]. - testString: assert.deepEqual(myArray, [10]); - - text: i should equal 11 - testString: assert.equal(i, 11); +# --hints-- + +You should be using a `do...while` loop for this exercise. + +```js +assert(code.match(/do/g)); ``` -
+`myArray` should equal `[10]`. -## Challenge Seed -
+```js +assert.deepEqual(myArray, [10]); +``` -
+`i` should equal `11` + +```js +assert.equal(i, 11); +``` + +# --seed-- + +## --after-user-code-- + +```js +if(typeof myArray !== "undefined"){(function(){return myArray;})();} +``` + +## --seed-contents-- ```js // Setup @@ -85,23 +89,7 @@ while (i < 5) { } ``` -
- - -### After Test -
- -```js -if(typeof myArray !== "undefined"){(function(){return myArray;})();} -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myArray = []; @@ -111,5 +99,3 @@ do { i++; } while (i < 5) ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md index 14681be5b5..2c0807eee2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md @@ -6,16 +6,23 @@ videoUrl: 'https://scrimba.com/c/c9yNVCe' forumTopicId: 18219 --- -## Description -
+# --description-- + You can run the same code multiple times by using a loop. -The most common type of JavaScript loop is called a for loop because it runs "for" a specific number of times. + +The most common type of JavaScript loop is called a `for` loop because it runs "for" a specific number of times. + For loops are declared with three optional expressions separated by semicolons: -for ([initialization]; [condition]; [final-expression]) -The initialization statement is executed one time only before the loop starts. It is typically used to define and setup your loop variable. -The condition statement is evaluated at the beginning of every loop iteration and will continue as long as it evaluates to true. When condition is false at the start of the iteration, the loop will stop executing. This means if condition starts as false, your loop will never execute. -The final-expression is executed at the end of each loop iteration, prior to the next condition check and is usually used to increment or decrement your loop counter. -In the following example we initialize with i = 0 and iterate while our condition i < 5 is true. We'll increment i by 1 in each loop iteration with i++ as our final-expression. + +`for ([initialization]; [condition]; [final-expression])` + +The `initialization` statement is executed one time only before the loop starts. It is typically used to define and setup your loop variable. + +The `condition` statement is evaluated at the beginning of every loop iteration and will continue as long as it evaluates to `true`. When `condition` is `false` at the start of the iteration, the loop will stop executing. This means if `condition` starts as `false`, your loop will never execute. + +The `final-expression` is executed at the end of each loop iteration, prior to the next `condition` check and is usually used to increment or decrement your loop counter. + +In the following example we initialize with `i = 0` and iterate while our condition `i < 5` is true. We'll increment `i` by `1` in each loop iteration with `i++` as our `final-expression`. ```js var ourArray = []; @@ -24,59 +31,44 @@ for (var i = 0; i < 5; i++) { } ``` -ourArray will now contain [0,1,2,3,4]. -
+`ourArray` will now contain `[0,1,2,3,4]`. -## Instructions -
-Use a for loop to work to push the values 1 through 5 onto myArray. -
+# --instructions-- -## Tests -
+Use a `for` loop to work to push the values 1 through 5 onto `myArray`. -```yml -tests: - - text: You should be using a for loop for this. - testString: assert(/for\s*\([^)]+?\)/.test(code)); - - text: myArray should equal [1,2,3,4,5]. - testString: assert.deepEqual(myArray, [1,2,3,4,5]); +# --hints-- +You should be using a `for` loop for this. + +```js +assert(/for\s*\([^)]+?\)/.test(code)); ``` -
+`myArray` should equal `[1,2,3,4,5]`. -## Challenge Seed -
+```js +assert.deepEqual(myArray, [1, 2, 3, 4, 5]); +``` -
+# --seed-- + +## --after-user-code-- + +```js +if (typeof myArray !== "undefined"){(function(){return myArray;})();} +``` + +## --seed-contents-- ```js // Setup var myArray = []; // Only change code below this line - - ``` -
- - -### After Test -
- -```js -if (typeof myArray !== "undefined"){(function(){return myArray;})();} -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myArray = []; @@ -84,5 +76,3 @@ for (var i = 1; i < 6; i++) { myArray.push(i); } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops.md index ff3250966c..712c73fc47 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/c8QbnCM' forumTopicId: 18220 --- -## Description -
+# --description-- + You can run the same code multiple times by using a loop. -The first type of loop we will learn is called a while loop because it runs "while" a specified condition is true and stops once that condition is no longer true. + +The first type of loop we will learn is called a `while` loop because it runs "while" a specified condition is true and stops once that condition is no longer true. ```js var ourArray = []; @@ -20,61 +21,46 @@ while(i < 5) { } ``` -In the code example above, the while loop will execute 5 times and append the numbers 0 through 4 to ourArray. +In the code example above, the `while` loop will execute 5 times and append the numbers 0 through 4 to `ourArray`. Let's try getting a while loop to work by pushing values to an array. -
-## Instructions -
-Add the numbers 5 through 0 (inclusive) in descending order to myArray using a while loop. -
+# --instructions-- -## Tests -
+Add the numbers 5 through 0 (inclusive) in descending order to `myArray` using a `while` loop. -```yml -tests: - - text: You should be using a while loop for this. - testString: assert(code.match(/while/g)); - - text: myArray should equal [5,4,3,2,1,0]. - testString: assert.deepEqual(myArray, [5,4,3,2,1,0]); +# --hints-- +You should be using a `while` loop for this. + +```js +assert(code.match(/while/g)); ``` -
+`myArray` should equal `[5,4,3,2,1,0]`. -## Challenge Seed -
+```js +assert.deepEqual(myArray, [5, 4, 3, 2, 1, 0]); +``` -
+# --seed-- + +## --after-user-code-- + +```js +if(typeof myArray !== "undefined"){(function(){return myArray;})();} +``` + +## --seed-contents-- ```js // Setup var myArray = []; // Only change code below this line - - ``` -
- - -### After Test -
- -```js -if(typeof myArray !== "undefined"){(function(){return myArray;})();} -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myArray = []; @@ -84,5 +70,3 @@ while(i >= 0) { i--; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.md index 6a7aed09f3..7e33e7db68 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cd62NhM' forumTopicId: 18227 --- -## Description -
+# --description-- + Variables which are declared within a function, as well as the function parameters have local scope. That means, they are only visible within that function. -Here is a function myTest with a local variable called loc. + +Here is a function `myTest` with a local variable called `loc`. ```js function myTest() { @@ -20,40 +21,38 @@ myTest(); // logs "foo" console.log(loc); // loc is not defined ``` -loc is not defined outside of the function. -
+`loc` is not defined outside of the function. -## Instructions -
+# --instructions-- -The editor has two `console.log`s to help you see what is happening. Check the console as you code to see how it changes. Declare a local variable `myVar` inside `myLocalScope` and run the tests. +The editor has two `console.log`s to help you see what is happening. Check the console as you code to see how it changes. Declare a local variable `myVar` inside `myLocalScope` and run the tests. **Note:** The console will still have 'ReferenceError: myVar is not defined', but this will not cause the tests to fail. -
-## Tests -
- -```yml -tests: - - text: The code should not contain a global myVar variable. - testString: | - function declared(){ - myVar; - } - assert.throws(declared, ReferenceError); - - text: You should add a local myVar variable. - testString: assert(/functionmyLocalScope\(\)\{.+(var|let|const)myVar[\s\S]*}/.test(__helpers.removeWhiteSpace(code))); +# --hints-- +The code should not contain a global `myVar` variable. +```js +function declared() { + myVar; +} +assert.throws(declared, ReferenceError); ``` -
+You should add a local `myVar` variable. -## Challenge Seed -
+```js +assert( + /functionmyLocalScope\(\)\{.+(var|let|const)myVar[\s\S]*}/.test( + __helpers.removeWhiteSpace(code) + ) +); +``` -
+# --seed-- + +## --seed-contents-- ```js function myLocalScope() { @@ -67,16 +66,9 @@ myLocalScope(); // Run and check the console // myVar is not defined outside of myLocalScope console.log('outside myLocalScope', myVar); - ``` -
- -
- -## Solution -
- +# --solutions-- ```js function myLocalScope() { @@ -90,7 +82,4 @@ myLocalScope(); // Run and check the console // myVar is not defined outside of myLocalScope console.log('outside myLocalScope', myVar); - ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements.md index d8f0835703..26c6b28207 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements.md @@ -6,11 +6,14 @@ videoUrl: 'https://scrimba.com/c/cwNvMUV' forumTopicId: 18228 --- -## Description -
-Order is important in if, else if statements. +# --description-- + +Order is important in `if`, `else if` statements. + The function is executed from top to bottom so you will want to be careful of what statement comes first. + Take these two functions as an example. + Here's the first: ```js @@ -46,33 +49,33 @@ foo(0) // "Less than one" bar(0) // "Less than two" ``` -
+# --instructions-- -## Instructions -
Change the order of logic in the function so that it will return the correct statements in all cases. -
-## Tests -
+# --hints-- -```yml -tests: - - text: orderMyLogic(4) should return "Less than 5" - testString: assert(orderMyLogic(4) === "Less than 5"); - - text: orderMyLogic(6) should return "Less than 10" - testString: assert(orderMyLogic(6) === "Less than 10"); - - text: orderMyLogic(11) should return "Greater than or equal to 10" - testString: assert(orderMyLogic(11) === "Greater than or equal to 10"); +`orderMyLogic(4)` should return "Less than 5" +```js +assert(orderMyLogic(4) === 'Less than 5'); ``` -
+`orderMyLogic(6)` should return "Less than 10" -## Challenge Seed -
+```js +assert(orderMyLogic(6) === 'Less than 10'); +``` -
+`orderMyLogic(11)` should return "Greater than or equal to 10" + +```js +assert(orderMyLogic(11) === 'Greater than or equal to 10'); +``` + +# --seed-- + +## --seed-contents-- ```js function orderMyLogic(val) { @@ -88,15 +91,7 @@ function orderMyLogic(val) { orderMyLogic(7); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function orderMyLogic(val) { @@ -109,5 +104,3 @@ function orderMyLogic(val) { } } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.md index 5a7a14215d..f0a6ba635a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.md @@ -6,10 +6,12 @@ videoUrl: 'https://scrimba.com/c/cRbVZAB' forumTopicId: 18236 --- -## Description -
-Another way to change the data in an array is with the .pop() function. -.pop() is used to "pop" a value off of the end of an array. We can store this "popped off" value by assigning it to a variable. In other words, .pop() removes the last element from an array and returns that element. +# --description-- + +Another way to change the data in an array is with the `.pop()` function. + +`.pop()` is used to "pop" a value off of the end of an array. We can store this "popped off" value by assigning it to a variable. In other words, `.pop()` removes the last element from an array and returns that element. + Any type of entry can be "popped" off of an array - numbers, strings, even nested arrays. ```js @@ -19,33 +21,55 @@ console.log(oneDown); // Returns 6 console.log(threeArr); // Returns [1, 4] ``` -
+# --instructions-- -## Instructions -
-Use the .pop() function to remove the last item from myArray, assigning the "popped off" value to removedFromMyArray. -
+Use the `.pop()` function to remove the last item from `myArray`, assigning the "popped off" value to `removedFromMyArray`. -## Tests -
+# --hints-- -```yml -tests: - - text: myArray should only contain [["John", 23]]. - testString: assert((function(d){if(d[0][0] == 'John' && d[0][1] === 23 && d[1] == undefined){return true;}else{return false;}})(myArray)); - - text: You should use pop() on myArray. - testString: assert(/removedFromMyArray\s*=\s*myArray\s*.\s*pop\s*(\s*)/.test(code)); - - text: removedFromMyArray should only contain ["cat", 2]. - testString: assert((function(d){if(d[0] == 'cat' && d[1] === 2 && d[2] == undefined){return true;}else{return false;}})(removedFromMyArray)); +`myArray` should only contain `[["John", 23]]`. +```js +assert( + (function (d) { + if (d[0][0] == 'John' && d[0][1] === 23 && d[1] == undefined) { + return true; + } else { + return false; + } + })(myArray) +); ``` -
+You should use `pop()` on `myArray`. -## Challenge Seed -
+```js +assert(/removedFromMyArray\s*=\s*myArray\s*.\s*pop\s*(\s*)/.test(code)); +``` -
+`removedFromMyArray` should only contain `["cat", 2]`. + +```js +assert( + (function (d) { + if (d[0] == 'cat' && d[1] === 2 && d[2] == undefined) { + return true; + } else { + return false; + } + })(removedFromMyArray) +); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removedFromMyArray = ' + JSON.stringify(z);})(myArray, removedFromMyArray); +``` + +## --seed-contents-- ```js // Setup @@ -53,31 +77,11 @@ var myArray = [["John", 23], ["cat", 2]]; // Only change code below this line var removedFromMyArray; - - ``` -
- - -### After Test -
- -```js -(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removedFromMyArray = ' + JSON.stringify(z);})(myArray, removedFromMyArray); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myArray = [["John", 23], ["cat", 2]]; var removedFromMyArray = myArray.pop(); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.md index 48934342fa..4c57c0fc9d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cnqmVtJ' forumTopicId: 18237 --- -## Description -
-An easy way to append data to the end of an array is via the push() function. -.push() takes one or more parameters and "pushes" them onto the end of the array. +# --description-- + +An easy way to append data to the end of an array is via the `push()` function. + +`.push()` takes one or more parameters and "pushes" them onto the end of the array. Examples: @@ -23,60 +24,53 @@ arr2.push(["happy", "joy"]); // arr2 now equals ["Stimpson", "J", "cat", ["happy", "joy"]] ``` -
+# --instructions-- -## Instructions -
-Push ["dog", 3] onto the end of the myArray variable. -
+Push `["dog", 3]` onto the end of the `myArray` variable. -## Tests -
+# --hints-- -```yml -tests: - - text: myArray should now equal [["John", 23], ["cat", 2], ["dog", 3]]. - testString: assert((function(d){if(d[2] != undefined && d[0][0] == 'John' && d[0][1] === 23 && d[2][0] == 'dog' && d[2][1] === 3 && d[2].length == 2){return true;}else{return false;}})(myArray)); +`myArray` should now equal `[["John", 23], ["cat", 2], ["dog", 3]]`. +```js +assert( + (function (d) { + if ( + d[2] != undefined && + d[0][0] == 'John' && + d[0][1] === 23 && + d[2][0] == 'dog' && + d[2][1] === 3 && + d[2].length == 2 + ) { + return true; + } else { + return false; + } + })(myArray) +); ``` -
+# --seed-- -## Challenge Seed -
+## --after-user-code-- -
+```js +(function(z){return 'myArray = ' + JSON.stringify(z);})(myArray); +``` + +## --seed-contents-- ```js // Setup var myArray = [["John", 23], ["cat", 2]]; // Only change code below this line - - ``` -
- - -### After Test -
- -```js -(function(z){return 'myArray = ' + JSON.stringify(z);})(myArray); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myArray = [["John", 23], ["cat", 2]]; myArray.push(["dog",3]); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-shift.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-shift.md index 79da8a6a32..ffeb4432a0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-shift.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-shift.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cRbVETW' forumTopicId: 18238 --- -## Description -
-pop() always removes the last element of an array. What if you want to remove the first? -That's where .shift() comes in. It works just like .pop(), except it removes the first element instead of the last. +# --description-- + +`pop()` always removes the last element of an array. What if you want to remove the first? + +That's where `.shift()` comes in. It works just like `.pop()`, except it removes the first element instead of the last. Example: @@ -19,31 +20,53 @@ var removedFromOurArray = ourArray.shift(); // removedFromOurArray now equals "Stimpson" and ourArray now equals ["J", ["cat"]]. ``` -
+# --instructions-- -## Instructions -
-Use the .shift() function to remove the first item from myArray, assigning the "shifted off" value to removedFromMyArray. -
+Use the `.shift()` function to remove the first item from `myArray`, assigning the "shifted off" value to `removedFromMyArray`. -## Tests -
+# --hints-- -```yml -tests: - - text: myArray should now equal [["dog", 3]]. - testString: assert((function(d){if(d[0][0] == 'dog' && d[0][1] === 3 && d[1] == undefined){return true;}else{return false;}})(myArray)); - - text: removedFromMyArray should contain ["John", 23]. - testString: assert((function(d){if(d[0] == 'John' && d[1] === 23 && typeof removedFromMyArray === 'object'){return true;}else{return false;}})(removedFromMyArray)); +`myArray` should now equal `[["dog", 3]]`. +```js +assert( + (function (d) { + if (d[0][0] == 'dog' && d[0][1] === 3 && d[1] == undefined) { + return true; + } else { + return false; + } + })(myArray) +); ``` -
+`removedFromMyArray` should contain `["John", 23]`. -## Challenge Seed -
+```js +assert( + (function (d) { + if ( + d[0] == 'John' && + d[1] === 23 && + typeof removedFromMyArray === 'object' + ) { + return true; + } else { + return false; + } + })(removedFromMyArray) +); +``` -
+# --seed-- + +## --after-user-code-- + +```js +(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removedFromMyArray = ' + JSON.stringify(z);})(myArray, removedFromMyArray); +``` + +## --seed-contents-- ```js // Setup @@ -51,27 +74,9 @@ var myArray = [["John", 23], ["dog", 3]]; // Only change code below this line var removedFromMyArray; - - ``` -
- - -### After Test -
- -```js -(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removedFromMyArray = ' + JSON.stringify(z);})(myArray, removedFromMyArray); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myArray = [["John", 23], ["dog", 3]]; @@ -79,5 +84,3 @@ var myArray = [["John", 23], ["dog", 3]]; // Only change code below this line var removedFromMyArray = myArray.shift(); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md index 22f2ebff65..882984bcb1 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/ckNDESv' forumTopicId: 18239 --- -## Description -
-Not only can you shift elements off of the beginning of an array, you can also unshift elements to the beginning of an array i.e. add elements in front of the array. -.unshift() works exactly like .push(), but instead of adding the element at the end of the array, unshift() adds the element at the beginning of the array. +# --description-- + +Not only can you `shift` elements off of the beginning of an array, you can also `unshift` elements to the beginning of an array i.e. add elements in front of the array. + +`.unshift()` works exactly like `.push()`, but instead of adding the element at the end of the array, `unshift()` adds the element at the beginning of the array. Example: @@ -20,29 +21,43 @@ ourArray.unshift("Happy"); // ourArray now equals ["Happy", "J", "cat"] ``` -
+# --instructions-- -## Instructions -
-Add ["Paul",35] to the beginning of the myArray variable using unshift(). -
+Add `["Paul",35]` to the beginning of the `myArray` variable using `unshift()`. -## Tests -
+# --hints-- -```yml -tests: - - text: myArray should now have [["Paul", 35], ["dog", 3]]. - testString: assert((function(d){if(typeof d[0] === "object" && d[0][0] == 'Paul' && d[0][1] === 35 && d[1][0] != undefined && d[1][0] == 'dog' && d[1][1] != undefined && d[1][1] == 3){return true;}else{return false;}})(myArray)); +`myArray` should now have \[["Paul", 35], ["dog", 3]]. +```js +assert( + (function (d) { + if ( + typeof d[0] === 'object' && + d[0][0] == 'Paul' && + d[0][1] === 35 && + d[1][0] != undefined && + d[1][0] == 'dog' && + d[1][1] != undefined && + d[1][1] == 3 + ) { + return true; + } else { + return false; + } + })(myArray) +); ``` -
+# --seed-- -## Challenge Seed -
+## --after-user-code-- -
+```js +(function(y, z){return 'myArray = ' + JSON.stringify(y);})(myArray); +``` + +## --seed-contents-- ```js // Setup @@ -50,32 +65,12 @@ var myArray = [["John", 23], ["dog", 3]]; myArray.shift(); // Only change code below this line - - ``` -
- - -### After Test -
- -```js -(function(y, z){return 'myArray = ' + JSON.stringify(y);})(myArray); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myArray = [["John", 23], ["dog", 3]]; myArray.shift(); myArray.unshift(["Paul", 35]); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md index b55a3f3530..1564e2ed69 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md @@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/c9yNMfR' forumTopicId: 18208 --- -## Description -
+# --description-- + Sometimes you may want to store data in a flexible Data Structure. A JavaScript object is one way to handle flexible data. They allow for arbitrary combinations of strings, numbers, booleans, arrays, functions, and objects. + Here's an example of a complex data structure: ```js @@ -27,9 +28,7 @@ var ourMusic = [ ]; ``` -This is an array which contains one object inside. The object has various pieces of metadata about an album. It also has a nested "formats" array. If you want to add more album records, you can do this by adding records to the top level array. -Objects hold data in a property, which has a key-value format. In the example above, "artist": "Daft Punk" is a property that has a key of "artist" and a value of "Daft Punk". -JavaScript Object Notation or JSON is a related data interchange format used to store data. +This is an array which contains one object inside. The object has various pieces of metadata about an album. It also has a nested `"formats"` array. If you want to add more album records, you can do this by adding records to the top level array. Objects hold data in a property, which has a key-value format. In the example above, `"artist": "Daft Punk"` is a property that has a key of `"artist"` and a value of `"Daft Punk"`. [JavaScript Object Notation](http://www.json.org/) or `JSON` is a related data interchange format used to store data. ```json { @@ -45,46 +44,91 @@ Objects hold data in a property, which has a key-value format. In the example ab } ``` -Note
You will need to place a comma after every object in the array, unless it is the last object in the array. -
+**Note** +You will need to place a comma after every object in the array, unless it is the last object in the array. -## Instructions -
-Add a new album to the myMusic array. Add artist and title strings, release_year number, and a formats array of strings. -
+# --instructions-- -## Tests -
+Add a new album to the `myMusic` array. Add `artist` and `title` strings, `release_year` number, and a `formats` array of strings. -```yml -tests: - - text: myMusic should be an array - testString: assert(Array.isArray(myMusic)); - - text: myMusic should have at least two elements - testString: assert(myMusic.length > 1); - - text: myMusic[1] should be an object - testString: assert(typeof myMusic[1] === 'object'); - - text: myMusic[1] should have at least 4 properties - testString: assert(Object.keys(myMusic[1]).length > 3); - - text: myMusic[1] should contain an artist property which is a string - testString: assert(myMusic[1].hasOwnProperty('artist') && typeof myMusic[1].artist === 'string'); - - text: myMusic[1] should contain a title property which is a string - testString: assert(myMusic[1].hasOwnProperty('title') && typeof myMusic[1].title === 'string'); - - text: myMusic[1] should contain a release_year property which is a number - testString: assert(myMusic[1].hasOwnProperty('release_year') && typeof myMusic[1].release_year === 'number'); - - text: myMusic[1] should contain a formats property which is an array - testString: assert(myMusic[1].hasOwnProperty('formats') && Array.isArray(myMusic[1].formats)); - - text: formats should be an array of strings with at least two elements - testString: assert(myMusic[1].formats.every(function(item) { return (typeof item === "string")}) && myMusic[1].formats.length > 1); +# --hints-- +`myMusic` should be an array + +```js +assert(Array.isArray(myMusic)); ``` -
+`myMusic` should have at least two elements -## Challenge Seed -
+```js +assert(myMusic.length > 1); +``` -
+`myMusic[1]` should be an object + +```js +assert(typeof myMusic[1] === 'object'); +``` + +`myMusic[1]` should have at least 4 properties + +```js +assert(Object.keys(myMusic[1]).length > 3); +``` + +`myMusic[1]` should contain an `artist` property which is a string + +```js +assert( + myMusic[1].hasOwnProperty('artist') && typeof myMusic[1].artist === 'string' +); +``` + +`myMusic[1]` should contain a `title` property which is a string + +```js +assert( + myMusic[1].hasOwnProperty('title') && typeof myMusic[1].title === 'string' +); +``` + +`myMusic[1]` should contain a `release_year` property which is a number + +```js +assert( + myMusic[1].hasOwnProperty('release_year') && + typeof myMusic[1].release_year === 'number' +); +``` + +`myMusic[1]` should contain a `formats` property which is an array + +```js +assert( + myMusic[1].hasOwnProperty('formats') && Array.isArray(myMusic[1].formats) +); +``` + +`formats` should be an array of strings with at least two elements + +```js +assert( + myMusic[1].formats.every(function (item) { + return typeof item === 'string'; + }) && myMusic[1].formats.length > 1 +); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(x){ if (Array.isArray(x)) { return JSON.stringify(x); } return "myMusic is not an array"})(myMusic); +``` + +## --seed-contents-- ```js var myMusic = [ @@ -101,26 +145,9 @@ var myMusic = [ } // Add a record here ]; - ``` -
- - -### After Test -
- -```js -(function(x){ if (Array.isArray(x)) { return JSON.stringify(x); } return "myMusic is not an array"})(myMusic); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myMusic = [ @@ -147,5 +174,3 @@ var myMusic = [ } ]; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.md index f29fe291ce..a796be980d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.md @@ -6,73 +6,79 @@ videoUrl: 'https://scrimba.com/c/czQM4A8' forumTopicId: 18241 --- -## Description -
+# --description-- + Unlike strings, the entries of arrays are mutable and can be changed freely. -Example + +**Example** ```js var ourArray = [50,40,30]; ourArray[0] = 15; // equals [15,40,30] ``` -Note
There shouldn't be any spaces between the array name and the square brackets, like array [0]. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code. -
+**Note** +There shouldn't be any spaces between the array name and the square brackets, like `array [0]`. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code. -## Instructions -
-Modify the data stored at index 0 of myArray to a value of 45. -
+# --instructions-- -## Tests -
+Modify the data stored at index `0` of `myArray` to a value of `45`. -```yml -tests: - - text: myArray should now be [45,64,99]. - testString: assert((function(){if(typeof myArray != 'undefined' && myArray[0] == 45 && myArray[1] == 64 && myArray[2] == 99){return true;}else{return false;}})()); - - text: You should be using correct index to modify the value in myArray. - testString: assert((function(){if(code.match(/myArray\[0\]\s*=\s*/g)){return true;}else{return false;}})()); +# --hints-- +`myArray` should now be [45,64,99]. + +```js +assert( + (function () { + if ( + typeof myArray != 'undefined' && + myArray[0] == 45 && + myArray[1] == 64 && + myArray[2] == 99 + ) { + return true; + } else { + return false; + } + })() +); ``` -
+You should be using correct index to modify the value in `myArray`. -## Challenge Seed -
+```js +assert( + (function () { + if (code.match(/myArray\[0\]\s*=\s*/g)) { + return true; + } else { + return false; + } + })() +); +``` -
+# --seed-- + +## --after-user-code-- + +```js +if(typeof myArray !== "undefined"){(function(){return myArray;})();} +``` + +## --seed-contents-- ```js // Setup var myArray = [18,64,99]; // Only change code below this line - - ``` -
- - -### After Test -
- -```js -if(typeof myArray !== "undefined"){(function(){return myArray;})();} -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myArray = [18,64,99]; myArray[0] = 45; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md index 5327d58677..a44b3c0d37 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md @@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/c/cdBKWCV' forumTopicId: 18242 --- -## Description -
-If the break statement is omitted from a switch statement's case, the following case statement(s) are executed until a break is encountered. If you have multiple inputs with the same output, you can represent them in a switch statement like this: +# --description-- + +If the `break` statement is omitted from a `switch` statement's `case`, the following `case` statement(s) are executed until a `break` is encountered. If you have multiple inputs with the same output, you can represent them in a `switch` statement like this: ```js var result = ""; @@ -24,50 +24,88 @@ switch(val) { ``` Cases for 1, 2, and 3 will all produce the same result. -
-## Instructions -
-Write a switch statement to set answer for the following ranges:
1-3 - "Low"
4-6 - "Mid"
7-9 - "High" -Note
You will need to have a case statement for each number in the range. -
+# --instructions-- -## Tests -
+Write a switch statement to set `answer` for the following ranges: +`1-3` - "Low" +`4-6` - "Mid" +`7-9` - "High" -```yml -tests: - - text: sequentialSizes(1) should return "Low" - testString: assert(sequentialSizes(1) === "Low"); - - text: sequentialSizes(2) should return "Low" - testString: assert(sequentialSizes(2) === "Low"); - - text: sequentialSizes(3) should return "Low" - testString: assert(sequentialSizes(3) === "Low"); - - text: sequentialSizes(4) should return "Mid" - testString: assert(sequentialSizes(4) === "Mid"); - - text: sequentialSizes(5) should return "Mid" - testString: assert(sequentialSizes(5) === "Mid"); - - text: sequentialSizes(6) should return "Mid" - testString: assert(sequentialSizes(6) === "Mid"); - - text: sequentialSizes(7) should return "High" - testString: assert(sequentialSizes(7) === "High"); - - text: sequentialSizes(8) should return "High" - testString: assert(sequentialSizes(8) === "High"); - - text: sequentialSizes(9) should return "High" - testString: assert(sequentialSizes(9) === "High"); - - text: You should not use any if or else statements - testString: assert(!/else/g.test(code) || !/if/g.test(code)); - - text: You should have nine case statements - testString: assert(code.match(/case/g).length === 9); +**Note** +You will need to have a `case` statement for each number in the range. +# --hints-- + +`sequentialSizes(1)` should return "Low" + +```js +assert(sequentialSizes(1) === 'Low'); ``` -
+`sequentialSizes(2)` should return "Low" -## Challenge Seed -
+```js +assert(sequentialSizes(2) === 'Low'); +``` -
+`sequentialSizes(3)` should return "Low" + +```js +assert(sequentialSizes(3) === 'Low'); +``` + +`sequentialSizes(4)` should return "Mid" + +```js +assert(sequentialSizes(4) === 'Mid'); +``` + +`sequentialSizes(5)` should return "Mid" + +```js +assert(sequentialSizes(5) === 'Mid'); +``` + +`sequentialSizes(6)` should return "Mid" + +```js +assert(sequentialSizes(6) === 'Mid'); +``` + +`sequentialSizes(7)` should return "High" + +```js +assert(sequentialSizes(7) === 'High'); +``` + +`sequentialSizes(8)` should return "High" + +```js +assert(sequentialSizes(8) === 'High'); +``` + +`sequentialSizes(9)` should return "High" + +```js +assert(sequentialSizes(9) === 'High'); +``` + +You should not use any `if` or `else` statements + +```js +assert(!/else/g.test(code) || !/if/g.test(code)); +``` + +You should have nine `case` statements + +```js +assert(code.match(/case/g).length === 9); +``` + +# --seed-- + +## --seed-contents-- ```js function sequentialSizes(val) { @@ -81,18 +119,9 @@ function sequentialSizes(val) { } sequentialSizes(1); - ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function sequentialSizes(val) { @@ -118,5 +147,3 @@ function sequentialSizes(val) { return answer; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript.md index 745681a508..b5cbaf3f1d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript.md @@ -6,62 +6,46 @@ videoUrl: 'https://scrimba.com/c/ce2GeHq' forumTopicId: 301173 --- -## Description -
+# --description-- + In JavaScript, you can also perform calculations with decimal numbers, just like whole numbers. + Let's multiply two decimals together to get their product. -
-## Instructions -
-Change the 0.0 so that product will equal 5.0. -
+# --instructions-- -## Tests -
+Change the `0.0` so that product will equal `5.0`. -```yml -tests: - - text: The variable product should equal 5.0. - testString: assert(product === 5.0); - - text: You should use the * operator - testString: assert(/\*/.test(code)); +# --hints-- -``` - -
- -## Challenge Seed -
- -
+The variable `product` should equal `5.0`. ```js -var product = 2.0 * 0.0; - - +assert(product === 5.0); ``` -
+You should use the `*` operator +```js +assert(/\*/.test(code)); +``` -### After Test -
+# --seed-- + +## --after-user-code-- ```js (function(y){return 'product = '+y;})(product); ``` -
+## --seed-contents-- -
- -## Solution -
+```js +var product = 2.0 * 0.0; +``` +# --solutions-- ```js var product = 2.0 * 2.5; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-numbers-with-javascript.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-numbers-with-javascript.md index a0150f16ee..dc57cfb02d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-numbers-with-javascript.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-numbers-with-javascript.md @@ -6,70 +6,52 @@ videoUrl: 'https://scrimba.com/c/cP3y3Aq' forumTopicId: 18243 --- -## Description -
-We can also multiply one number by another. -JavaScript uses the * symbol for multiplication of two numbers. +# --description-- -Example +We can also multiply one number by another. + +JavaScript uses the `*` symbol for multiplication of two numbers. + +**Example** ```js myVar = 13 * 13; // assigned 169 ``` +# --instructions-- -
+Change the `0` so that product will equal `80`. -## Instructions -
-Change the 0 so that product will equal 80. -
+# --hints-- -## Tests -
- -```yml -tests: - - text: The variable product should be equal to 80. - testString: assert(product === 80); - - text: You should use the * operator. - testString: assert(/\*/.test(code)); - -``` - -
- -## Challenge Seed -
- -
+The variable `product` should be equal to 80. ```js -var product = 8 * 0; - - +assert(product === 80); ``` -
+You should use the `*` operator. +```js +assert(/\*/.test(code)); +``` -### After Test -
+# --seed-- + +## --after-user-code-- ```js (function(z){return 'product = '+z;})(product); ``` -
+## --seed-contents-- -
- -## Solution -
+```js +var product = 8 * 0; +``` +# --solutions-- ```js var product = 8 * 10; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/nest-one-array-within-another-array.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/nest-one-array-within-another-array.md index 241ccaf773..e7ab17ba44 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/nest-one-array-within-another-array.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/nest-one-array-within-another-array.md @@ -6,65 +6,45 @@ videoUrl: 'https://scrimba.com/c/crZQZf8' forumTopicId: 18247 --- -## Description -
+# --description-- + You can also nest arrays within other arrays, like below: ```js [["Bulls", 23], ["White Sox", 45]] ``` -This is also called a multi-dimensional array. -
+This is also called a multi-dimensional array. -## Instructions -
-Create a nested array called myArray. -
+# --instructions-- -## Tests -
+Create a nested array called `myArray`. -```yml -tests: - - text: myArray should have at least one array nested within another array. - testString: assert(Array.isArray(myArray) && myArray.some(Array.isArray)); +# --hints-- -``` - -
- -## Challenge Seed -
- -
+`myArray` should have at least one array nested within another array. ```js -// Only change code below this line -var myArray = []; - +assert(Array.isArray(myArray) && myArray.some(Array.isArray)); ``` -
+# --seed-- - -### After Test -
+## --after-user-code-- ```js if(typeof myArray !== "undefined"){(function(){return myArray;})();} ``` -
+## --seed-contents-- -
- -## Solution -
+```js +// Only change code below this line +var myArray = []; +``` +# --solutions-- ```js var myArray = [[1,2,3]]; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/nesting-for-loops.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/nesting-for-loops.md index db32805509..d1ec4cec8f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/nesting-for-loops.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/nesting-for-loops.md @@ -6,8 +6,8 @@ videoUrl: 'https://scrimba.com/c/cRn6GHM' forumTopicId: 18248 --- -## Description -
+# --description-- + If you have a multi-dimensional array, you can use the same logic as the prior waypoint to loop through both the array and any sub-arrays. Here is an example: ```js @@ -21,34 +21,47 @@ for (var i=0; i < arr.length; i++) { } ``` -This outputs each sub-element in arr one at a time. Note that for the inner loop, we are checking the .length of arr[i], since arr[i] is itself an array. -
+This outputs each sub-element in `arr` one at a time. Note that for the inner loop, we are checking the `.length` of `arr[i]`, since `arr[i]` is itself an array. -## Instructions -
-Modify function multiplyAll so that it returns the product of all the numbers in the sub-arrays of arr. -
+# --instructions-- -## Tests -
+Modify function `multiplyAll` so that it returns the product of all the numbers in the sub-arrays of `arr`. -```yml -tests: - - text: multiplyAll([[1],[2],[3]]) should return 6 - testString: assert(multiplyAll([[1],[2],[3]]) === 6); - - text: multiplyAll([[1,2],[3,4],[5,6,7]]) should return 5040 - testString: assert(multiplyAll([[1,2],[3,4],[5,6,7]]) === 5040); - - text: multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]]) should return 54 - testString: assert(multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]]) === 54); +# --hints-- +`multiplyAll([[1],[2],[3]])` should return `6` + +```js +assert(multiplyAll([[1], [2], [3]]) === 6); ``` -
+`multiplyAll([[1,2],[3,4],[5,6,7]])` should return `5040` -## Challenge Seed -
+```js +assert( + multiplyAll([ + [1, 2], + [3, 4], + [5, 6, 7] + ]) === 5040 +); +``` -
+`multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])` should return `54` + +```js +assert( + multiplyAll([ + [5, 1], + [0.2, 4, 0.5], + [3, 9] + ]) === 54 +); +``` + +# --seed-- + +## --seed-contents-- ```js function multiplyAll(arr) { @@ -60,18 +73,9 @@ function multiplyAll(arr) { } multiplyAll([[1,2],[3,4],[5,6,7]]); - ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function multiplyAll(arr) { @@ -86,5 +90,3 @@ function multiplyAll(arr) { multiplyAll([[1,2],[3,4],[5,6,7]]); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.md index c52e166e94..3afd077b84 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cy8rahW' forumTopicId: 18254 --- -## Description -
+# --description-- + Parameters are variables that act as placeholders for the values that are to be input to a function when it is called. When a function is defined, it is typically defined along with one or more parameters. The actual values that are input (or "passed") into a function when it is called are known as arguments. -Here is a function with two parameters, param1 and param2: + +Here is a function with two parameters, `param1` and `param2`: ```js function testFun(param1, param2) { @@ -17,48 +18,55 @@ function testFun(param1, param2) { } ``` -Then we can call testFun: -testFun("Hello", "World"); -We have passed two arguments, "Hello" and "World". Inside the function, param1 will equal "Hello" and param2 will equal "World". Note that you could call testFun again with different arguments and the parameters would take on the value of the new arguments. -
+Then we can call `testFun`: `testFun("Hello", "World");` We have passed two arguments, `"Hello"` and `"World"`. Inside the function, `param1` will equal "Hello" and `param2` will equal "World". Note that you could call `testFun` again with different arguments and the parameters would take on the value of the new arguments. + +# --instructions-- -## Instructions -
  1. Create a function called functionWithArgs that accepts two arguments and outputs their sum to the dev console.
  2. Call the function with two numbers as arguments.
-
-## Tests -
+# --hints-- -```yml -tests: - - text: functionWithArgs should be a function. - testString: assert(typeof functionWithArgs === 'function'); - - text: functionWithArgs(1,2) should output 3. - testString: if(typeof functionWithArgs === "function") { capture(); functionWithArgs(1,2); uncapture(); } assert(logOutput == 3); - - text: functionWithArgs(7,9) should output 16. - testString: if(typeof functionWithArgs === "function") { capture(); functionWithArgs(7,9); uncapture(); } assert(logOutput == 16); - - text: You should call functionWithArgs with two numbers after you define it. - testString: assert(/functionWithArgs\([-+]?\d*\.?\d*,[-+]?\d*\.?\d*\)/.test(code.replace(/\s/g, ''))); -``` - -
- -## Challenge Seed -
- -
+`functionWithArgs` should be a function. ```js - - - +assert(typeof functionWithArgs === 'function'); ``` -
+`functionWithArgs(1,2)` should output `3`. -### Before Test -
+```js +if (typeof functionWithArgs === 'function') { + capture(); + functionWithArgs(1, 2); + uncapture(); +} +assert(logOutput == 3); +``` + +`functionWithArgs(7,9)` should output `16`. + +```js +if (typeof functionWithArgs === 'function') { + capture(); + functionWithArgs(7, 9); + uncapture(); +} +assert(logOutput == 16); +``` + +You should call `functionWithArgs` with two numbers after you define it. + +```js +assert( + /functionWithArgs\([-+]?\d*\.?\d*,[-+]?\d*\.?\d*\)/.test( + code.replace(/\s/g, '') + ) +); +``` + +# --seed-- + +## --before-user-code-- ```js var logOutput = ""; @@ -83,10 +91,7 @@ function uncapture() { capture(); ``` -
- -### After Test -
+## --after-user-code-- ```js uncapture(); @@ -98,13 +103,12 @@ if (typeof functionWithArgs !== "function") { } ``` -
+## --seed-contents-- -
- -## Solution -
+```js +``` +# --solutions-- ```js function functionWithArgs(a, b) { @@ -112,5 +116,3 @@ function functionWithArgs(a, b) { } functionWithArgs(10, 5); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md index 3e5be2411f..3047058c6e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md @@ -6,51 +6,54 @@ videoUrl: 'https://scrimba.com/c/cm8PqCa' forumTopicId: 301174 --- -## Description -
-In the last two challenges, we learned about the equality operator (==) and the strict equality operator (===). Let's do a quick review and practice using these operators some more. +# --description-- + +In the last two challenges, we learned about the equality operator (`==`) and the strict equality operator (`===`). Let's do a quick review and practice using these operators some more. + If the values being compared are not of the same type, the equality operator will perform a type conversion, and then evaluate the values. However, the strict equality operator will compare both the data type and value as-is, without converting one type to the other. -Examples + +**Examples** ```js 3 == '3' // returns true because JavaScript performs type conversion from string to number 3 === '3' // returns false because the types are different and type conversion is not performed ``` -Note
In JavaScript, you can determine the type of a variable or a value with the typeof operator, as follows: +**Note** +In JavaScript, you can determine the type of a variable or a value with the `typeof` operator, as follows: ```js typeof 3 // returns 'number' typeof '3' // returns 'string' ``` -
+# --instructions-- -## Instructions -
-The compareEquality function in the editor compares two values using the equality operator. Modify the function so that it returns "Equal" only when the values are strictly equal. -
+The `compareEquality` function in the editor compares two values using the equality operator. Modify the function so that it returns "Equal" only when the values are strictly equal. -## Tests -
+# --hints-- -```yml -tests: - - text: compareEquality(10, "10") should return "Not Equal" - testString: assert(compareEquality(10, "10") === "Not Equal"); - - text: compareEquality("20", 20) should return "Not Equal" - testString: assert(compareEquality("20", 20) === "Not Equal"); - - text: You should use the === operator - testString: assert(code.match(/===/g)); +`compareEquality(10, "10")` should return "Not Equal" +```js +assert(compareEquality(10, '10') === 'Not Equal'); ``` -
+`compareEquality("20", 20)` should return "Not Equal" -## Challenge Seed -
+```js +assert(compareEquality('20', 20) === 'Not Equal'); +``` -
+You should use the `===` operator + +```js +assert(code.match(/===/g)); +``` + +# --seed-- + +## --seed-contents-- ```js // Setup @@ -64,15 +67,7 @@ function compareEquality(a, b) { compareEquality(10, "10"); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function compareEquality(a,b) { @@ -82,5 +77,3 @@ function compareEquality(a,b) { return "Not Equal"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/profile-lookup.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/profile-lookup.md index 099bf75fb9..51b1ef4b61 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/profile-lookup.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/profile-lookup.md @@ -6,47 +6,64 @@ videoUrl: 'https://scrimba.com/c/cDqW2Cg' forumTopicId: 18259 --- -## Description -
+# --description-- + We have an array of objects representing different people in our contacts lists. -A lookUpProfile function that takes name and a property (prop) as arguments has been pre-written for you. -The function should check if name is an actual contact's firstName and the given property (prop) is a property of that contact. + +A `lookUpProfile` function that takes `name` and a property (`prop`) as arguments has been pre-written for you. + +The function should check if `name` is an actual contact's `firstName` and the given property (`prop`) is a property of that contact. + If both are true, then return the "value" of that property. -If name does not correspond to any contacts then return "No such contact". -If prop does not correspond to any valid properties of a contact found to match name then return "No such property". -
-## Instructions -
+If `name` does not correspond to any contacts then return `"No such contact"`. -
+If `prop` does not correspond to any valid properties of a contact found to match `name` then return `"No such property"`. -## Tests -
+# --hints-- -```yml -tests: - - text: lookUpProfile("Kristian", "lastName") should return "Vos" - testString: assert(lookUpProfile('Kristian','lastName') === "Vos"); - - text: lookUpProfile("Sherlock", "likes") should return ["Intriguing Cases", "Violin"] - testString: assert.deepEqual(lookUpProfile("Sherlock", "likes"), ["Intriguing Cases", "Violin"]); - - text: lookUpProfile("Harry", "likes") should return an array - testString: assert(typeof lookUpProfile("Harry", "likes") === "object"); - - text: lookUpProfile("Bob", "number") should return "No such contact" - testString: assert(lookUpProfile("Bob", "number") === "No such contact"); - - text: lookUpProfile("Bob", "potato") should return "No such contact" - testString: assert(lookUpProfile("Bob", "potato") === "No such contact"); - - text: lookUpProfile("Akira", "address") should return "No such property" - testString: assert(lookUpProfile("Akira", "address") === "No such property"); +`lookUpProfile("Kristian", "lastName")` should return `"Vos"` +```js +assert(lookUpProfile('Kristian', 'lastName') === 'Vos'); ``` -
+`lookUpProfile("Sherlock", "likes")` should return `["Intriguing Cases", "Violin"]` -## Challenge Seed -
+```js +assert.deepEqual(lookUpProfile('Sherlock', 'likes'), [ + 'Intriguing Cases', + 'Violin' +]); +``` -
+`lookUpProfile("Harry", "likes")` should return an array + +```js +assert(typeof lookUpProfile('Harry', 'likes') === 'object'); +``` + +`lookUpProfile("Bob", "number")` should return "No such contact" + +```js +assert(lookUpProfile('Bob', 'number') === 'No such contact'); +``` + +`lookUpProfile("Bob", "potato")` should return "No such contact" + +```js +assert(lookUpProfile('Bob', 'potato') === 'No such contact'); +``` + +`lookUpProfile("Akira", "address")` should return "No such property" + +```js +assert(lookUpProfile('Akira', 'address') === 'No such property'); +``` + +# --seed-- + +## --seed-contents-- ```js // Setup @@ -87,15 +104,7 @@ function lookUpProfile(name, prop){ lookUpProfile("Akira", "likes"); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js var contacts = [ @@ -139,5 +148,3 @@ function lookUpProfile(name, prop){ lookUpProfile("Akira", "likes"); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.md index b10c06f1f2..ce96f61269 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.md @@ -6,8 +6,8 @@ videoUrl: 'https://scrimba.com/c/cbQmnhM' forumTopicId: 18260 --- -## Description -
+# --description-- + String values in JavaScript may be written with single or double quotes, as long as you start and end with the same type of quote. Unlike some other programming languages, single and double quotes work the same in JavaScript. ```js @@ -15,7 +15,7 @@ doubleQuoteStr = "This is a string"; singleQuoteStr = 'This is also a string'; ``` -The reason why you might want to use one type of quote over the other is if you want to use both in a string. This might happen if you want to save a conversation in a string and have the conversation in quotes. Another use for it would be saving an <a> tag with various attributes in quotes, all within a string. +The reason why you might want to use one type of quote over the other is if you want to use both in a string. This might happen if you want to save a conversation in a string and have the conversation in quotes. Another use for it would be saving an `` tag with various attributes in quotes, all within a string. ```js conversation = 'Finn exclaims to Jake, "Algebraic!"'; @@ -28,61 +28,50 @@ goodStr = 'Jake asks Finn, "Hey, let\'s go on an adventure?"'; badStr = 'Finn responds, "Let's go!"'; // Throws an error ``` -In the goodStr above, you can use both quotes safely by using the backslash \ as an escape character. -Note
The backslash \ should not be confused with the forward slash /. They do not do the same thing. -
+In the goodStr above, you can use both quotes safely by using the backslash `\` as an escape character. **Note** +The backslash `\` should not be confused with the forward slash `/`. They do not do the same thing. + +# --instructions-- -## Instructions -
Change the provided string to a string with single quotes at the beginning and end and no escape characters. -Right now, the <a> tag in the string uses double quotes everywhere. You will need to change the outer quotes to single quotes so you can remove the escape characters. -
-## Tests -
+Right now, the `` tag in the string uses double quotes everywhere. You will need to change the outer quotes to single quotes so you can remove the escape characters. -```yml -tests: - - text: You should remove all the backslashes (\). - testString: assert(!/\\/g.test(code) && myStr.match('\\s*\\s*Link\\s*\\s*')); - - text: You should have two single quotes ' and four double quotes ". - testString: assert(code.match(/"/g).length === 4 && code.match(/'/g).length === 2); +# --hints-- -``` - -
- -## Challenge Seed -
- -
+You should remove all the `backslashes` (`\`). ```js -var myStr = "Link"; - - +assert( + !/\\/g.test(code) && + myStr.match( + '\\s*\\s*Link\\s*\\s*' + ) +); ``` -
+You should have two single quotes `'` and four double quotes `"`. +```js +assert(code.match(/"/g).length === 4 && code.match(/'/g).length === 2); +``` -### After Test -
+# --seed-- + +## --after-user-code-- ```js (function() { return "myStr = " + myStr; })(); ``` -
+## --seed-contents-- -
- -## Solution -
+```js +var myStr = "Link"; +``` +# --solutions-- ```js var myStr = 'Link'; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md index 4ab8f46d43..e0d103b8b6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md @@ -5,57 +5,112 @@ challengeType: 1 forumTopicId: 18261 --- -## Description - -
+# --description-- You are given a JSON object representing a part of your musical album collection. Each album has a unique id number as its key and several other properties. Not all albums have complete information. You start with an `updateRecords` function that takes an object like `collection`, an `id`, a `prop` (like `artist` or `tracks`), and a `value`. Complete the function using the rules below to modify the object passed to the function. -- Your function must always return the entire object. -- If `prop` isn't `tracks` and `value` isn't an empty string, update or set that album's `prop` to `value`. -- If `prop` is `tracks` but the album doesn't have a `tracks` property, create an empty array and add `value` to it. -- If `prop` is `tracks` and `value` isn't an empty string, add `value` to the end of the album's existing `tracks` array. -- If `value` is an empty string, delete the given `prop` property from the album. +- Your function must always return the entire object. +- If `prop` isn't `tracks` and `value` isn't an empty string, update or set that album's `prop` to `value`. +- If `prop` is `tracks` but the album doesn't have a `tracks` property, create an empty array and add `value` to it. +- If `prop` is `tracks` and `value` isn't an empty string, add `value` to the end of the album's existing `tracks` array. +- If `value` is an empty string, delete the given `prop` property from the album. **Note:** A copy of the `collection` object is used for the tests. -
-## Instructions +# --hints-- -
+After `updateRecords(collection, 5439, "artist", "ABBA")`, `artist` should be `ABBA` -
- -## Tests - -
- -```yml -tests: - - text: After updateRecords(collection, 5439, "artist", "ABBA"), artist should be ABBA - testString: assert(updateRecords(_recordCollection, 5439, "artist", "ABBA")[5439]["artist"] === "ABBA"); - - text: After updateRecords(collection, 5439, "tracks", "Take a Chance on Me"), tracks should have Take a Chance on Me as the last element. - testString: assert(updateRecords(_recordCollection, 5439, "tracks", "Take a Chance on Me")[5439]["tracks"].pop() === "Take a Chance on Me"); - - text: After updateRecords(collection, 2548, "artist", ""), artist should not be set - testString: updateRecords(_recordCollection, 2548, "artist", ""); assert(!_recordCollection[2548].hasOwnProperty("artist")); - - text: After updateRecords(collection, 1245, "tracks", "Addicted to Love"), tracks should have Addicted to Love as the last element. - testString: assert(updateRecords(_recordCollection, 1245, "tracks", "Addicted to Love")[1245]["tracks"].pop() === "Addicted to Love"); - - text: After updateRecords(collection, 2468, "tracks", "Free"), tracks should have 1999 as the first element. - testString: assert(updateRecords(_recordCollection, 2468, "tracks", "Free")[2468]["tracks"][0] === "1999"); - - text: After updateRecords(collection, 2548, "tracks", ""), tracks should not be set - testString: updateRecords(_recordCollection, 2548, "tracks", ""); assert(!_recordCollection[2548].hasOwnProperty("tracks")); - - text: After updateRecords(collection, 1245, "albumTitle", "Riptide"), albumTitle should be Riptide - testString: assert(updateRecords(_recordCollection, 1245, "albumTitle", "Riptide")[1245]["albumTitle"] === "Riptide"); +```js +assert( + updateRecords(_recordCollection, 5439, 'artist', 'ABBA')[5439]['artist'] === + 'ABBA' +); ``` -
+After `updateRecords(collection, 5439, "tracks", "Take a Chance on Me")`, `tracks` should have `Take a Chance on Me` as the last element. -## Challenge Seed +```js +assert( + updateRecords(_recordCollection, 5439, 'tracks', 'Take a Chance on Me')[5439][ + 'tracks' + ].pop() === 'Take a Chance on Me' +); +``` -
-
+After `updateRecords(collection, 2548, "artist", "")`, `artist` should not be set + +```js +updateRecords(_recordCollection, 2548, 'artist', ''); +assert(!_recordCollection[2548].hasOwnProperty('artist')); +``` + +After `updateRecords(collection, 1245, "tracks", "Addicted to Love")`, `tracks` should have `Addicted to Love` as the last element. + +```js +assert( + updateRecords(_recordCollection, 1245, 'tracks', 'Addicted to Love')[1245][ + 'tracks' + ].pop() === 'Addicted to Love' +); +``` + +After `updateRecords(collection, 2468, "tracks", "Free")`, `tracks` should have `1999` as the first element. + +```js +assert( + updateRecords(_recordCollection, 2468, 'tracks', 'Free')[2468][ + 'tracks' + ][0] === '1999' +); +``` + +After `updateRecords(collection, 2548, "tracks", "")`, `tracks` should not be set + +```js +updateRecords(_recordCollection, 2548, 'tracks', ''); +assert(!_recordCollection[2548].hasOwnProperty('tracks')); +``` + +After `updateRecords(collection, 1245, "albumTitle", "Riptide")`, `albumTitle` should be `Riptide` + +```js +assert( + updateRecords(_recordCollection, 1245, 'albumTitle', 'Riptide')[1245][ + 'albumTitle' + ] === 'Riptide' +); +``` + +# --seed-- + +## --before-user-code-- + +```js +const _recordCollection = { + 2548: { + albumTitle: 'Slippery When Wet', + artist: 'Bon Jovi', + tracks: ['Let It Rock', 'You Give Love a Bad Name'] + }, + 2468: { + albumTitle: '1999', + artist: 'Prince', + tracks: ['1999', 'Little Red Corvette'] + }, + 1245: { + artist: 'Robert Palmer', + tracks: [] + }, + 5439: { + albumTitle: 'ABBA Gold' + } +}; +``` + +## --seed-contents-- ```js // Setup @@ -87,41 +142,7 @@ function updateRecords(object, id, prop, value) { updateRecords(collection, 5439, 'artist', 'ABBA'); ``` -
- -## Before Test - -
- -```js -const _recordCollection = { - 2548: { - albumTitle: 'Slippery When Wet', - artist: 'Bon Jovi', - tracks: ['Let It Rock', 'You Give Love a Bad Name'] - }, - 2468: { - albumTitle: '1999', - artist: 'Prince', - tracks: ['1999', 'Little Red Corvette'] - }, - 1245: { - artist: 'Robert Palmer', - tracks: [] - }, - 5439: { - albumTitle: 'ABBA Gold' - } -}; -``` - -
- -
- -## Solution - -
+# --solutions-- ```js var collection = { @@ -157,5 +178,3 @@ function updateRecords(object, id, prop, value) { return object; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion.md index ac1953f4a1..8845bb2e22 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion.md @@ -2,13 +2,14 @@ id: 5cfa3679138e7d9595b9d9d4 title: Replace Loops using Recursion challengeType: 1 -videoUrl: 'https://www.freecodecamp.org/news/how-recursion-works-explained-with-flowcharts-and-a-video-de61f40cb7f9/' +videoUrl: >- + https://www.freecodecamp.org/news/how-recursion-works-explained-with-flowcharts-and-a-video-de61f40cb7f9/ forumTopicId: 301175 --- -## Description -
-Recursion is the concept that a function can be expressed in terms of itself. To help understand this, start by thinking about the following task: multiply the first n elements of an array to create the product of those elements. Using a for loop, you could do this: +# --description-- + +Recursion is the concept that a function can be expressed in terms of itself. To help understand this, start by thinking about the following task: multiply the first `n` elements of an array to create the product of those elements. Using a `for` loop, you could do this: ```js function multiply(arr, n) { @@ -20,7 +21,7 @@ Recursion is the concept that a function can be expressed in terms of itself. To } ``` -However, notice that multiply(arr, n) == multiply(arr, n - 1) * arr[n - 1]. That means you can rewrite multiply in terms of itself and never need to use a loop. +However, notice that `multiply(arr, n) == multiply(arr, n - 1) * arr[n - 1]`. That means you can rewrite `multiply` in terms of itself and never need to use a loop. ```js function multiply(arr, n) { @@ -32,42 +33,55 @@ However, notice that multiply(arr, n) == multiply(arr, n - 1) * arr[n - 1] } ``` -The recursive version of multiply breaks down like this. In the base case, where n <= 0, it returns 1. For larger values of n, it calls itself, but with n - 1. That function call is evaluated in the same way, calling multiply again until n <= 0. At this point, all the functions can return and the original multiply returns the answer. +The recursive version of `multiply` breaks down like this. In the base case, where `n <= 0`, it returns 1. For larger values of `n`, it calls itself, but with `n - 1`. That function call is evaluated in the same way, calling `multiply` again until `n <= 0`. At this point, all the functions can return and the original `multiply` returns the answer. -Note: Recursive functions must have a base case when they return without calling the function again (in this example, when n <= 0), otherwise they can never finish executing. +**Note:** Recursive functions must have a base case when they return without calling the function again (in this example, when `n <= 0`), otherwise they can never finish executing. -
+# --instructions-- -## Instructions -
+Write a recursive function, `sum(arr, n)`, that returns the sum of the first `n` elements of an array `arr`. -Write a recursive function, sum(arr, n), that returns the sum of the first n elements of an array arr. +# --hints-- -
+`sum([1], 0)` should equal 0. -## Tests -
- -``` yml -tests: - - text: sum([1], 0) should equal 0. - testString: assert.equal(sum([1], 0), 0); - - text: sum([2, 3, 4], 1) should equal 2. - testString: assert.equal(sum([2, 3, 4], 1), 2); - - text: sum([2, 3, 4, 5], 3) should equal 9. - testString: assert.equal(sum([2, 3, 4, 5], 3), 9); - - text: Your code should not rely on any kind of loops (for or while or higher order functions such as forEach, map, filter, or reduce.). - testString: assert(!__helpers.removeJSComments(code).match(/for|while|forEach|map|filter|reduce/g)); - - text: You should use recursion to solve this problem. - testString: assert(__helpers.removeJSComments(sum.toString()).match(/sum\(.*\)/g).length > 1); +```js +assert.equal(sum([1], 0), 0); ``` -
+`sum([2, 3, 4], 1)` should equal 2. -## Challenge Seed -
+```js +assert.equal(sum([2, 3, 4], 1), 2); +``` -
+`sum([2, 3, 4, 5], 3)` should equal 9. + +```js +assert.equal(sum([2, 3, 4, 5], 3), 9); +``` + +Your code should not rely on any kind of loops (`for` or `while` or higher order functions such as `forEach`, `map`, `filter`, or `reduce`.). + +```js +assert( + !__helpers + .removeJSComments(code) + .match(/for|while|forEach|map|filter|reduce/g) +); +``` + +You should use recursion to solve this problem. + +```js +assert( + __helpers.removeJSComments(sum.toString()).match(/sum\(.*\)/g).length > 1 +); +``` + +# --seed-- + +## --seed-contents-- ```js function sum(arr, n) { @@ -75,15 +89,9 @@ function sum(arr, n) { // Only change code above this line } - ``` -
- -
- -## Solution -
+# --solutions-- ```js function sum(arr, n) { @@ -95,7 +103,4 @@ function sum(arr, n) { } // Only change code above this line } - ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md index 593174311d..e48842ed02 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md @@ -6,9 +6,9 @@ videoUrl: 'https://scrimba.com/c/c3JE8fy' forumTopicId: 18266 --- -## Description -
-If you have many options to choose from, a switch statement can be easier to write than many chained if/else if statements. The following: +# --description-- + +If you have many options to choose from, a `switch` statement can be easier to write than many chained `if`/`else if` statements. The following: ```js if (val === 1) { @@ -35,47 +35,75 @@ switch(val) { } ``` -
+# --instructions-- -## Instructions -
-Change the chained if/else if statements into a switch statement. -
+Change the chained `if`/`else if` statements into a `switch` statement. -## Tests -
+# --hints-- -```yml -tests: - - text: You should not use any else statements anywhere in the editor - testString: assert(!/else/g.test(code)); - - text: You should not use any if statements anywhere in the editor - testString: assert(!/if/g.test(code)); - - text: You should have at least four break statements - testString: assert(code.match(/break/g).length >= 4); - - text: chainToSwitch("bob") should be "Marley" - testString: assert(chainToSwitch("bob") === "Marley"); - - text: chainToSwitch(42) should be "The Answer" - testString: assert(chainToSwitch(42) === "The Answer"); - - text: "chainToSwitch(1) should be \"There is no #1\"" - testString: "assert(chainToSwitch(1) === \"There is no #1\");" - - text: chainToSwitch(99) should be "Missed me by this much!" - testString: assert(chainToSwitch(99) === "Missed me by this much!"); - - text: chainToSwitch(7) should be "Ate Nine" - testString: assert(chainToSwitch(7) === "Ate Nine"); - - text: chainToSwitch("John") should be "" (empty string) - testString: assert(chainToSwitch("John") === ""); - - text: chainToSwitch(156) should be "" (empty string) - testString: assert(chainToSwitch(156) === ""); +You should not use any `else` statements anywhere in the editor +```js +assert(!/else/g.test(code)); ``` -
+You should not use any `if` statements anywhere in the editor -## Challenge Seed -
+```js +assert(!/if/g.test(code)); +``` -
+You should have at least four `break` statements + +```js +assert(code.match(/break/g).length >= 4); +``` + +`chainToSwitch("bob")` should be "Marley" + +```js +assert(chainToSwitch('bob') === 'Marley'); +``` + +`chainToSwitch(42)` should be "The Answer" + +```js +assert(chainToSwitch(42) === 'The Answer'); +``` + +`chainToSwitch(1)` should be "There is no #1" + +```js +assert(chainToSwitch(1) === 'There is no #1'); +``` + +`chainToSwitch(99)` should be "Missed me by this much!" + +```js +assert(chainToSwitch(99) === 'Missed me by this much!'); +``` + +`chainToSwitch(7)` should be "Ate Nine" + +```js +assert(chainToSwitch(7) === 'Ate Nine'); +``` + +`chainToSwitch("John")` should be "" (empty string) + +```js +assert(chainToSwitch('John') === ''); +``` + +`chainToSwitch(156)` should be "" (empty string) + +```js +assert(chainToSwitch(156) === ''); +``` + +# --seed-- + +## --seed-contents-- ```js function chainToSwitch(val) { @@ -99,18 +127,9 @@ function chainToSwitch(val) { } chainToSwitch(7); - ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function chainToSwitch(val) { @@ -135,5 +154,3 @@ function chainToSwitch(val) { return answer; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.md index 5bac9966f6..33fc2e2e21 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cy87wue' forumTopicId: 18271 --- -## Description -
-We can pass values into a function with arguments. You can use a return statement to send a value back out of a function. -Example +# --description-- + +We can pass values into a function with arguments. You can use a `return` statement to send a value back out of a function. + +**Example** ```js function plusThree(num) { @@ -18,52 +19,46 @@ function plusThree(num) { var answer = plusThree(5); // 8 ``` -plusThree takes an argument for num and returns a value equal to num + 3. -
+`plusThree` takes an argument for `num` and returns a value equal to `num + 3`. -## Instructions -
-Create a function timesFive that accepts one argument, multiplies it by 5, and returns the new value. See the last line in the editor for an example of how you can test your timesFive function. -
+# --instructions-- -## Tests -
+Create a function `timesFive` that accepts one argument, multiplies it by `5`, and returns the new value. See the last line in the editor for an example of how you can test your `timesFive` function. -```yml -tests: - - text: timesFive should be a function - testString: assert(typeof timesFive === 'function'); - - text: timesFive(5) should return 25 - testString: assert(timesFive(5) === 25); - - text: timesFive(2) should return 10 - testString: assert(timesFive(2) === 10); - - text: timesFive(0) should return 0 - testString: assert(timesFive(0) === 0); +# --hints-- -``` - -
- -## Challenge Seed -
- -
+`timesFive` should be a function ```js - - - +assert(typeof timesFive === 'function'); ``` -
+`timesFive(5)` should return `25` +```js +assert(timesFive(5) === 25); +``` +`timesFive(2)` should return `10` -
+```js +assert(timesFive(2) === 10); +``` -## Solution -
+`timesFive(0)` should return `0` +```js +assert(timesFive(0) === 0); +``` + +# --seed-- + +## --seed-contents-- + +```js +``` + +# --solutions-- ```js function timesFive(num) { @@ -71,5 +66,3 @@ function timesFive(num) { } timesFive(10); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md index 3b78abc0c2..feca98c894 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cQe39Sq' forumTopicId: 18272 --- -## Description -
-When a return statement is reached, the execution of the current function stops and control returns to the calling location. -Example +# --description-- + +When a `return` statement is reached, the execution of the current function stops and control returns to the calling location. + +**Example** ```js function myFun() { @@ -20,43 +21,62 @@ function myFun() { myFun(); ``` -The above outputs "Hello" to the console, returns "World", but "byebye" is never output, because the function exits at the return statement. -
+The above outputs "Hello" to the console, returns "World", but `"byebye"` is never output, because the function exits at the `return` statement. -## Instructions -
-Modify the function abTest so that if a or b are less than 0 the function will immediately exit with a value of undefined. -Hint
Remember that undefined is a keyword, not a string. -
+# --instructions-- -## Tests -
+Modify the function `abTest` so that if `a` or `b` are less than `0` the function will immediately exit with a value of `undefined`. -```yml -tests: - - text: abTest(2,2) should return a number - testString: assert(typeof abTest(2,2) === 'number' ); - - text: abTest(2,2) should return 8 - testString: assert(abTest(2,2) === 8 ); - - text: abTest(-2,2) should return undefined - testString: assert(abTest(-2,2) === undefined ); - - text: abTest(2,-2) should return undefined - testString: assert(abTest(2,-2) === undefined ); - - text: abTest(2,8) should return 18 - testString: assert(abTest(2,8) === 18 ); - - text: abTest(3,3) should return 12 - testString: assert(abTest(3,3) === 12 ); - - text: abTest(0,0) should return 0 - testString: assert(abTest(0,0) === 0); - +**Hint** +Remember that [`undefined` is a keyword](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables), not a string. + +# --hints-- + +`abTest(2,2)` should return a number + +```js +assert(typeof abTest(2, 2) === 'number'); ``` -
+`abTest(2,2)` should return `8` -## Challenge Seed -
+```js +assert(abTest(2, 2) === 8); +``` -
+`abTest(-2,2)` should return `undefined` + +```js +assert(abTest(-2, 2) === undefined); +``` + +`abTest(2,-2)` should return `undefined` + +```js +assert(abTest(2, -2) === undefined); +``` + +`abTest(2,8)` should return `18` + +```js +assert(abTest(2, 8) === 18); +``` + +`abTest(3,3)` should return `12` + +```js +assert(abTest(3, 3) === 12); +``` + +`abTest(0,0)` should return `0` + +```js +assert(abTest(0, 0) === 0); +``` + +# --seed-- + +## --seed-contents-- ```js // Setup @@ -73,15 +93,7 @@ function abTest(a, b) { abTest(2,2); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function abTest(a, b) { @@ -91,5 +103,3 @@ function abTest(a, b) { return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2)); } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.md index 669f4b016d..d74b365e28 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.md @@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cp62qAQ' forumTopicId: 18273 --- -## Description -
-You may recall from Comparison with the Equality Operator that all comparison operators return a boolean true or false value. +# --description-- + +You may recall from [Comparison with the Equality Operator](/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator) that all comparison operators return a boolean `true` or `false` value. + Sometimes people use an if/else statement to do a comparison, like this: ```js @@ -21,7 +22,7 @@ function isEqual(a,b) { } ``` -But there's a better way to do this. Since === returns true or false, we can return the result of the comparison: +But there's a better way to do this. Since `===` returns `true` or `false`, we can return the result of the comparison: ```js function isEqual(a,b) { @@ -29,33 +30,33 @@ function isEqual(a,b) { } ``` -
+# --instructions-- -## Instructions -
-Fix the function isLess to remove the if/else statements. -
+Fix the function `isLess` to remove the `if/else` statements. -## Tests -
+# --hints-- -```yml -tests: - - text: isLess(10,15) should return true - testString: assert(isLess(10,15) === true); - - text: isLess(15,10) should return false - testString: assert(isLess(15, 10) === false); - - text: You should not use any if or else statements - testString: assert(!/if|else/g.test(code)); +`isLess(10,15)` should return `true` +```js +assert(isLess(10, 15) === true); ``` -
+`isLess(15,10)` should return `false` -## Challenge Seed -
+```js +assert(isLess(15, 10) === false); +``` -
+You should not use any `if` or `else` statements + +```js +assert(!/if|else/g.test(code)); +``` + +# --seed-- + +## --seed-contents-- ```js function isLess(a, b) { @@ -71,20 +72,10 @@ function isLess(a, b) { isLess(10, 15); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function isLess(a, b) { return a < b; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md index e34faced05..8c3e361898 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/c4mv4fm' forumTopicId: 18277 --- -## Description -
-If you have many options to choose from, use a switch statement. A switch statement tests a value and can have many case statements which define various possible values. Statements are executed from the first matched case value until a break is encountered. -Here is an example of a switch statement: +# --description-- + +If you have many options to choose from, use a switch statement. A `switch` statement tests a value and can have many case statements which define various possible values. Statements are executed from the first matched `case` value until a `break` is encountered. + +Here is an example of a `switch` statement: ```js switch(lowercaseLetter) { @@ -22,40 +23,57 @@ switch(lowercaseLetter) { } ``` -case values are tested with strict equality (===). The break tells JavaScript to stop executing statements. If the break is omitted, the next statement will be executed. -
+`case` values are tested with strict equality (`===`). The `break` tells JavaScript to stop executing statements. If the `break` is omitted, the next statement will be executed. -## Instructions -
-Write a switch statement which tests val and sets answer for the following conditions:
1 - "alpha"
2 - "beta"
3 - "gamma"
4 - "delta" -
+# --instructions-- -## Tests -
+Write a switch statement which tests `val` and sets `answer` for the following conditions: +`1` - "alpha" +`2` - "beta" +`3` - "gamma" +`4` - "delta" -```yml -tests: - - text: caseInSwitch(1) should have a value of "alpha" - testString: assert(caseInSwitch(1) === "alpha"); - - text: caseInSwitch(2) should have a value of "beta" - testString: assert(caseInSwitch(2) === "beta"); - - text: caseInSwitch(3) should have a value of "gamma" - testString: assert(caseInSwitch(3) === "gamma"); - - text: caseInSwitch(4) should have a value of "delta" - testString: assert(caseInSwitch(4) === "delta"); - - text: You should not use any if or else statements - testString: assert(!/else/g.test(code) || !/if/g.test(code)); - - text: You should have at least 3 break statements - testString: assert(code.match(/break/g).length > 2); +# --hints-- +`caseInSwitch(1)` should have a value of "alpha" + +```js +assert(caseInSwitch(1) === 'alpha'); ``` -
+`caseInSwitch(2)` should have a value of "beta" -## Challenge Seed -
+```js +assert(caseInSwitch(2) === 'beta'); +``` -
+`caseInSwitch(3)` should have a value of "gamma" + +```js +assert(caseInSwitch(3) === 'gamma'); +``` + +`caseInSwitch(4)` should have a value of "delta" + +```js +assert(caseInSwitch(4) === 'delta'); +``` + +You should not use any `if` or `else` statements + +```js +assert(!/else/g.test(code) || !/if/g.test(code)); +``` + +You should have at least 3 `break` statements + +```js +assert(code.match(/break/g).length > 2); +``` + +# --seed-- + +## --seed-contents-- ```js function caseInSwitch(val) { @@ -69,18 +87,9 @@ function caseInSwitch(val) { } caseInSwitch(1); - ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function caseInSwitch(val) { @@ -102,5 +111,3 @@ function caseInSwitch(val) { return answer; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/shopping-list.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/shopping-list.md index e7287ab45b..c323b2d426 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/shopping-list.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/shopping-list.md @@ -6,53 +6,45 @@ videoUrl: 'https://scrimba.com/c/c9MEKHZ' forumTopicId: 18280 --- -## Description -
-Create a shopping list in the variable myList. The list should be a multi-dimensional array containing several sub-arrays. +# --description-- + +Create a shopping list in the variable `myList`. The list should be a multi-dimensional array containing several sub-arrays. + The first element in each sub-array should contain a string with the name of the item. The second element should be a number representing the quantity i.e. -["Chocolate Bar", 15] + +`["Chocolate Bar", 15]` + There should be at least 5 sub-arrays in the list. -
-## Instructions -
+# --hints-- -
- -## Tests -
- -```yml -tests: - - text: myList should be an array. - testString: assert(isArray); - - text: The first elements in each of your sub-arrays should all be strings. - testString: assert(hasString); - - text: The second elements in each of your sub-arrays should all be numbers. - testString: assert(hasNumber); - - text: You should have at least 5 items in your list. - testString: assert(count > 4); - -``` - -
- -## Challenge Seed -
- -
+`myList` should be an array. ```js -var myList = []; - - +assert(isArray); ``` -
+The first elements in each of your sub-arrays should all be strings. +```js +assert(hasString); +``` -### After Test -
+The second elements in each of your sub-arrays should all be numbers. + +```js +assert(hasNumber); +``` + +You should have at least 5 items in your list. + +```js +assert(count > 4); +``` + +# --seed-- + +## --after-user-code-- ```js var count = 0; @@ -83,13 +75,13 @@ var hasNumber = false; })(myList); ``` -
+## --seed-contents-- -
- -## Solution -
+```js +var myList = []; +``` +# --solutions-- ```js var myList = [ @@ -100,5 +92,3 @@ var myList = [ ["Toads", 9] ]; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/stand-in-line.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/stand-in-line.md index 3985166c51..4106d41743 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/stand-in-line.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/stand-in-line.md @@ -6,67 +6,52 @@ videoUrl: 'https://scrimba.com/c/ca8Q8tP' forumTopicId: 18307 --- -## Description -
+# --description-- + In Computer Science a queue is an abstract Data Structure where items are kept in order. New items can be added at the back of the queue and old items are taken off from the front of the queue. -Write a function nextInLine which takes an array (arr) and a number (item) as arguments. + +Write a function `nextInLine` which takes an array (`arr`) and a number (`item`) as arguments. + Add the number to the end of the array, then remove the first element of the array. -The nextInLine function should then return the element that was removed. -
-## Instructions -
+The `nextInLine` function should then return the element that was removed. -
+# --hints-- -## Tests -
- -```yml -tests: - - text: nextInLine([], 5) should return a number. - testString: assert.isNumber(nextInLine([],5)); - - text: nextInLine([], 1) should return 1 - testString: assert(nextInLine([],1) === 1); - - text: nextInLine([2], 1) should return 2 - testString: assert(nextInLine([2],1) === 2); - - text: nextInLine([5,6,7,8,9], 1) should return 5 - testString: assert(nextInLine([5,6,7,8,9],1) === 5); - - text: After nextInLine(testArr, 10), testArr[4] should be 10 - testString: nextInLine(testArr, 10); assert(testArr[4] === 10); - -``` - -
- -## Challenge Seed -
- -
+`nextInLine([], 5)` should return a number. ```js -function nextInLine(arr, item) { - // Only change code below this line - - return item; - // Only change code above this line - - -} - -// Setup -var testArr = [1,2,3,4,5]; - -// Display code -console.log("Before: " + JSON.stringify(testArr)); -console.log(nextInLine(testArr, 6)); -console.log("After: " + JSON.stringify(testArr)); +assert.isNumber(nextInLine([], 5)); ``` -
+`nextInLine([], 1)` should return `1` -### Before Test -
+```js +assert(nextInLine([], 1) === 1); +``` + +`nextInLine([2], 1)` should return `2` + +```js +assert(nextInLine([2], 1) === 2); +``` + +`nextInLine([5,6,7,8,9], 1)` should return `5` + +```js +assert(nextInLine([5, 6, 7, 8, 9], 1) === 5); +``` + +After `nextInLine(testArr, 10)`, `testArr[4]` should be `10` + +```js +nextInLine(testArr, 10); +assert(testArr[4] === 10); +``` + +# --seed-- + +## --before-user-code-- ```js var logOutput = []; @@ -91,10 +76,7 @@ function uncapture() { capture(); ``` -
- -### After Test -
+## --after-user-code-- ```js uncapture(); @@ -102,13 +84,28 @@ testArr = [1,2,3,4,5]; (function() { return logOutput.join("\n");})(); ``` -
+## --seed-contents-- -
+```js +function nextInLine(arr, item) { + // Only change code below this line + + return item; + // Only change code above this line + -## Solution -
+} +// Setup +var testArr = [1,2,3,4,5]; + +// Display code +console.log("Before: " + JSON.stringify(testArr)); +console.log(nextInLine(testArr, 6)); +console.log("After: " + JSON.stringify(testArr)); +``` + +# --solutions-- ```js var testArr = [ 1,2,3,4,5]; @@ -118,5 +115,3 @@ function nextInLine(arr, item) { return arr.shift(); } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays.md index b875852fc6..4e163659b0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays.md @@ -6,66 +6,58 @@ videoUrl: 'https://scrimba.com/c/crZQWAm' forumTopicId: 18309 --- -## Description -
-With JavaScript array variables, we can store several pieces of data in one place. +# --description-- + +With JavaScript `array` variables, we can store several pieces of data in one place. + You start an array declaration with an opening square bracket, end it with a closing square bracket, and put a comma between each entry, like this: -var sandwich = ["peanut butter", "jelly", "bread"]. -
-## Instructions -
-Modify the new array myArray so that it contains both a string and a number (in that order). -Hint
Refer to the example code in the text editor if you get stuck. -
+`var sandwich = ["peanut butter", "jelly", "bread"]`. -## Tests -
+# --instructions-- -```yml -tests: - - text: myArray should be an array. - testString: assert(typeof myArray == 'object'); - - text: The first item in myArray should be a string. - testString: assert(typeof myArray[0] !== 'undefined' && typeof myArray[0] == 'string'); - - text: The second item in myArray should be a number. - testString: assert(typeof myArray[1] !== 'undefined' && typeof myArray[1] == 'number'); +Modify the new array `myArray` so that it contains both a `string` and a `number` (in that order). -``` +**Hint** +Refer to the example code in the text editor if you get stuck. -
+# --hints-- -## Challenge Seed -
- -
+`myArray` should be an `array`. ```js -// Only change code below this line -var myArray = []; - +assert(typeof myArray == 'object'); ``` -
+The first item in `myArray` should be a `string`. +```js +assert(typeof myArray[0] !== 'undefined' && typeof myArray[0] == 'string'); +``` -### After Test -
+The second item in `myArray` should be a `number`. + +```js +assert(typeof myArray[1] !== 'undefined' && typeof myArray[1] == 'number'); +``` + +# --seed-- + +## --after-user-code-- ```js (function(z){return z;})(myArray); ``` -
+## --seed-contents-- -
- -## Solution -
+```js +// Only change code below this line +var myArray = []; +``` +# --solutions-- ```js var myArray = ["The Answer", 42]; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.md index 7c31545956..479f9a1421 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.md @@ -6,57 +6,44 @@ videoUrl: 'https://scrimba.com/c/cEanysE' forumTopicId: 18310 --- -## Description -
-In JavaScript, you can store a value in a variable with the assignment operator (=). -myVariable = 5; -This assigns the Number value 5 to myVariable. -If there are any calculations to the right of the = operator, those are performed before the value is assigned to the variable on the left of the operator. +# --description-- + +In JavaScript, you can store a value in a variable with the assignment operator (`=`). + +`myVariable = 5;` + +This assigns the `Number` value `5` to `myVariable`. + +If there are any calculations to the right of the `=` operator, those are performed before the value is assigned to the variable on the left of the operator. ```js var myVar; myVar = 5; ``` -First, this code creates a variable named myVar. Then, the code assigns 5 to myVar. Now, if myVar appears again in the code, the program will treat it as if it is 5. -
+First, this code creates a variable named `myVar`. Then, the code assigns `5` to `myVar`. Now, if `myVar` appears again in the code, the program will treat it as if it is `5`. -## Instructions -
-Assign the value 7 to variable a. -
+# --instructions-- -## Tests -
+Assign the value `7` to variable `a`. -```yml -tests: - - text: You should not change code above the specified comment. - testString: assert(/var a;/.test(code)); - - text: a should have a value of 7. - testString: assert(typeof a === 'number' && a === 7); +# --hints-- -``` - -
- -## Challenge Seed -
- -
+You should not change code above the specified comment. ```js -// Setup -var a; - -// Only change code below this line - +assert(/var a;/.test(code)); ``` -
+`a` should have a value of 7. -### Before Test -
+```js +assert(typeof a === 'number' && a === 7); +``` + +# --seed-- + +## --before-user-code-- ```js if (typeof a != 'undefined') { @@ -64,26 +51,24 @@ if (typeof a != 'undefined') { } ``` -
- -### After Test -
+## --after-user-code-- ```js (function(a){return "a = " + a;})(a); ``` -
+## --seed-contents-- -
+```js +// Setup +var a; -## Solution -
+// Only change code below this line +``` +# --solutions-- ```js var a; a = 7; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md index ee430d8bc5..14d130864d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md @@ -6,69 +6,52 @@ videoUrl: 'https://scrimba.com/c/cP3yQtk' forumTopicId: 18314 --- -## Description -
-We can also subtract one number from another. -JavaScript uses the - symbol for subtraction. +# --description-- -Example +We can also subtract one number from another. + +JavaScript uses the `-` symbol for subtraction. + +**Example** ```js myVar = 12 - 6; // assigned 6 ``` +# --instructions-- -
+Change the `0` so the difference is `12`. -## Instructions -
-Change the 0 so the difference is 12. -
+# --hints-- -## Tests -
- -```yml -tests: - - text: The variable difference should be equal to 12. - testString: assert(difference === 12); - - text: You should only subtract one number from 45. - testString: assert(/difference=45-33;?/.test(__helpers.removeWhiteSpace(code))); -``` - -
- -## Challenge Seed -
- -
+The variable `difference` should be equal to 12. ```js -var difference = 45 - 0; - - +assert(difference === 12); ``` -
+You should only subtract one number from 45. +```js +assert(/difference=45-33;?/.test(__helpers.removeWhiteSpace(code))); +``` -### After Test -
+# --seed-- + +## --after-user-code-- ```js (function(z){return 'difference = '+z;})(difference); ``` -
+## --seed-contents-- -
- -## Solution -
+```js +var difference = 45 - 0; +``` +# --solutions-- ```js var difference = 45 - 33; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md index ac6a766013..25afe89ab7 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/c6Wz4ySr' forumTopicId: 18324 --- -## Description -
-Sometimes it is useful to check if the property of a given object exists or not. We can use the .hasOwnProperty(propname) method of objects to determine if that object has the given property name. .hasOwnProperty() returns true or false if the property is found or not. -Example +# --description-- + +Sometimes it is useful to check if the property of a given object exists or not. We can use the `.hasOwnProperty(propname)` method of objects to determine if that object has the given property name. `.hasOwnProperty()` returns `true` or `false` if the property is found or not. + +**Example** ```js var myObj = { @@ -20,38 +21,58 @@ myObj.hasOwnProperty("top"); // true myObj.hasOwnProperty("middle"); // false ``` -
+# --instructions-- -## Instructions -
-Modify the function checkObj to test if an object passed to the function (obj) contains a specific property (checkProp). If the property is found, return that property's value. If not, return "Not Found". -
+Modify the function `checkObj` to test if an object passed to the function (`obj`) contains a specific property (`checkProp`). If the property is found, return that property's value. If not, return `"Not Found"`. -## Tests -
+# --hints-- -```yml -tests: - - text: 'checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "gift") should return "pony".' - testString: 'assert(checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "gift") === "pony");' - - text: 'checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "pet") should return "kitten".' - testString: 'assert(checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "pet") === "kitten");' - - text: 'checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "house") should return "Not Found".' - testString: 'assert(checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "house") === "Not Found");' - - text: 'checkObj({city: "Seattle"}, "city") should return "Seattle".' - testString: 'assert(checkObj({city: "Seattle"}, "city") === "Seattle");' - - text: 'checkObj({city: "Seattle"}, "district") should return "Not Found".' - testString: 'assert(checkObj({city: "Seattle"}, "district") === "Not Found");' - - text: 'checkObj({pet: "kitten", bed: "sleigh"}, "gift") should return "Not Found".' - testString: 'assert(checkObj({pet: "kitten", bed: "sleigh"}, "gift") === "Not Found");' +`checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "gift")` should return `"pony"`. + +```js +assert( + checkObj({ gift: 'pony', pet: 'kitten', bed: 'sleigh' }, 'gift') === 'pony' +); ``` -
+`checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "pet")` should return `"kitten"`. -## Challenge Seed -
+```js +assert( + checkObj({ gift: 'pony', pet: 'kitten', bed: 'sleigh' }, 'pet') === 'kitten' +); +``` -
+`checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "house")` should return `"Not Found"`. + +```js +assert( + checkObj({ gift: 'pony', pet: 'kitten', bed: 'sleigh' }, 'house') === + 'Not Found' +); +``` + +`checkObj({city: "Seattle"}, "city")` should return `"Seattle"`. + +```js +assert(checkObj({ city: 'Seattle' }, 'city') === 'Seattle'); +``` + +`checkObj({city: "Seattle"}, "district")` should return `"Not Found"`. + +```js +assert(checkObj({ city: 'Seattle' }, 'district') === 'Not Found'); +``` + +`checkObj({pet: "kitten", bed: "sleigh"}, "gift")` should return `"Not Found"`. + +```js +assert(checkObj({ pet: 'kitten', bed: 'sleigh' }, 'gift') === 'Not Found'); +``` + +# --seed-- + +## --seed-contents-- ```js function checkObj(obj, checkProp) { @@ -59,15 +80,9 @@ function checkObj(obj, checkProp) { return "Change Me!"; // Only change code above this line } - ``` -
- -
- -## Solution -
+# --solutions-- ```js function checkObj(obj, checkProp) { @@ -78,5 +93,3 @@ function checkObj(obj, checkProp) { } } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md index b76588238d..5dfe55a0c0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md @@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cWPVaUR' forumTopicId: 18331 --- -## Description -
-In JavaScript, String values are immutable, which means that they cannot be altered once created. +# --description-- + +In JavaScript, `String` values are immutable, which means that they cannot be altered once created. + For example, the following code: ```js @@ -16,38 +17,40 @@ var myStr = "Bob"; myStr[0] = "J"; ``` -cannot change the value of myStr to "Job", because the contents of myStr cannot be altered. Note that this does not mean that myStr cannot be changed, just that the individual characters of a string literal cannot be changed. The only way to change myStr would be to assign it with a new string, like this: +cannot change the value of `myStr` to "Job", because the contents of `myStr` cannot be altered. Note that this does *not* mean that `myStr` cannot be changed, just that the individual characters of a string literal cannot be changed. The only way to change `myStr` would be to assign it with a new string, like this: ```js var myStr = "Bob"; myStr = "Job"; ``` -
+# --instructions-- -## Instructions -
-Correct the assignment to myStr so it contains the string value of Hello World using the approach shown in the example above. -
+Correct the assignment to `myStr` so it contains the string value of `Hello World` using the approach shown in the example above. -## Tests -
+# --hints-- -```yml -tests: - - text: myStr should have a value of Hello World. - testString: assert(myStr === "Hello World"); - - text: You should not change the code above the specified comment. - testString: assert(/myStr = "Jello World"/.test(code)); +`myStr` should have a value of `Hello World`. +```js +assert(myStr === 'Hello World'); ``` -
+You should not change the code above the specified comment. -## Challenge Seed -
+```js +assert(/myStr = "Jello World"/.test(code)); +``` -
+# --seed-- + +## --after-user-code-- + +```js +(function(v){return "myStr = " + v;})(myStr); +``` + +## --seed-contents-- ```js // Setup @@ -56,30 +59,11 @@ var myStr = "Jello World"; // Only change code below this line myStr[0] = "H"; // Change this line // Only change code above this line - ``` -
- - -### After Test -
- -```js -(function(v){return "myStr = " + v;})(myStr); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myStr = "Jello World"; myStr = "Hello World"; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md index 097fd26dd0..de5ce1cf13 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md @@ -6,35 +6,40 @@ videoUrl: 'https://scrimba.com/c/c9Me8t4' forumTopicId: 301176 --- -## Description -
-Another data type is the Boolean. Booleans may only be one of two values: true or false. They are basically little on-off switches, where true is "on" and false is "off." These two states are mutually exclusive. -Note
Boolean values are never written with quotes. The strings "true" and "false" are not Boolean and have no special meaning in JavaScript. -
+# --description-- -## Instructions -
-Modify the welcomeToBooleans function so that it returns true instead of false when the run button is clicked. -
+Another data type is the Boolean. `Booleans` may only be one of two values: `true` or `false`. They are basically little on-off switches, where `true` is "on" and `false` is "off." These two states are mutually exclusive. -## Tests -
+**Note** +`Boolean` values are never written with quotes. The `strings` `"true"` and `"false"` are not `Boolean` and have no special meaning in JavaScript. -```yml -tests: - - text: The welcomeToBooleans() function should return a boolean (true/false) value. - testString: assert(typeof welcomeToBooleans() === 'boolean'); - - text: welcomeToBooleans() should return true. - testString: assert(welcomeToBooleans() === true); +# --instructions-- +Modify the `welcomeToBooleans` function so that it returns `true` instead of `false` when the run button is clicked. + +# --hints-- + +The `welcomeToBooleans()` function should return a boolean (true/false) value. + +```js +assert(typeof welcomeToBooleans() === 'boolean'); ``` -
+`welcomeToBooleans()` should return true. -## Challenge Seed -
+```js +assert(welcomeToBooleans() === true); +``` -
+# --seed-- + +## --after-user-code-- + +```js +welcomeToBooleans(); +``` + +## --seed-contents-- ```js function welcomeToBooleans() { @@ -47,28 +52,10 @@ function welcomeToBooleans() { } ``` -
- - -### After Test -
- -```js -welcomeToBooleans(); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js function welcomeToBooleans() { return true; // Change this line } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.md index 1e95af1ac1..70fb45531a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.md @@ -6,13 +6,17 @@ videoUrl: 'https://scrimba.com/c/cd6GDcD' forumTopicId: 18334 --- -## Description -
+# --description-- + In JavaScript all variables and function names are case sensitive. This means that capitalization matters. -MYVAR is not the same as MyVar nor myvar. It is possible to have multiple distinct variables with the same name but different casing. It is strongly recommended that for the sake of clarity, you do not use this language feature. + +`MYVAR` is not the same as `MyVar` nor `myvar`. It is possible to have multiple distinct variables with the same name but different casing. It is strongly recommended that for the sake of clarity, you *do not* use this language feature. +

Best Practice

+ Write variable names in JavaScript in camelCase. In camelCase, multi-word variable names have the first word in lowercase and the first letter of each subsequent word is capitalized. -Examples: + +**Examples:** ```js var someVariable; @@ -20,39 +24,54 @@ var anotherVariableName; var thisVariableNameIsSoLong; ``` -
+# --instructions-- -## Instructions -
-Modify the existing declarations and assignments so their names use camelCase.
Do not create any new variables. -
+Modify the existing declarations and assignments so their names use camelCase. +Do not create any new variables. -## Tests -
+# --hints-- -```yml -tests: - - text: studlyCapVar should be defined and have a value of 10. - testString: assert(typeof studlyCapVar !== 'undefined' && studlyCapVar === 10); - - text: properCamelCase should be defined and have a value of "A String". - testString: assert(typeof properCamelCase !== 'undefined' && properCamelCase === "A String"); - - text: titleCaseOver should be defined and have a value of 9000. - testString: assert(typeof titleCaseOver !== 'undefined' && titleCaseOver === 9000); - - text: studlyCapVar should use camelCase in both declaration and assignment sections. - testString: assert(code.match(/studlyCapVar/g).length === 2); - - text: properCamelCase should use camelCase in both declaration and assignment sections. - testString: assert(code.match(/properCamelCase/g).length === 2); - - text: titleCaseOver should use camelCase in both declaration and assignment sections. - testString: assert(code.match(/titleCaseOver/g).length === 2); +`studlyCapVar` should be defined and have a value of `10`. +```js +assert(typeof studlyCapVar !== 'undefined' && studlyCapVar === 10); ``` -
+`properCamelCase` should be defined and have a value of `"A String"`. -## Challenge Seed -
+```js +assert( + typeof properCamelCase !== 'undefined' && properCamelCase === 'A String' +); +``` -
+`titleCaseOver` should be defined and have a value of `9000`. + +```js +assert(typeof titleCaseOver !== 'undefined' && titleCaseOver === 9000); +``` + +`studlyCapVar` should use camelCase in both declaration and assignment sections. + +```js +assert(code.match(/studlyCapVar/g).length === 2); +``` + +`properCamelCase` should use camelCase in both declaration and assignment sections. + +```js +assert(code.match(/properCamelCase/g).length === 2); +``` + +`titleCaseOver` should use camelCase in both declaration and assignment sections. + +```js +assert(code.match(/titleCaseOver/g).length === 2); +``` + +# --seed-- + +## --seed-contents-- ```js // Variable declarations @@ -66,15 +85,7 @@ PRoperCAmelCAse = "A String"; tITLEcASEoVER = 9000; ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js var studlyCapVar; @@ -85,5 +96,3 @@ studlyCapVar = 10; properCamelCase = "A String"; titleCaseOver = 9000; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.md index 430712ec91..407e88d248 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/ce2p7cL' forumTopicId: 301177 --- -## Description -
-A function can include the return statement but it does not have to. In the case that the function doesn't have a return statement, when you call it, the function processes the inner code but the returned value is undefined. -Example +# --description-- + +A function can include the `return` statement but it does not have to. In the case that the function doesn't have a `return` statement, when you call it, the function processes the inner code but the returned value is `undefined`. + +**Example** ```js var sum = 0; @@ -19,36 +20,43 @@ function addSum(num) { addSum(3); // sum will be modified but returned value is undefined ``` -addSum is a function without a return statement. The function will change the global sum variable but the returned value of the function is undefined. -
+`addSum` is a function without a `return` statement. The function will change the global `sum` variable but the returned value of the function is `undefined`. -## Instructions -
-Create a function addFive without any arguments. This function adds 5 to the sum variable, but its returned value is undefined. -
+# --instructions-- -## Tests -
+Create a function `addFive` without any arguments. This function adds 5 to the `sum` variable, but its returned value is `undefined`. -```yml -tests: - - text: addFive should be a function. - testString: assert(typeof addFive === 'function'); - - text: Once both functions have ran, the sum should be equal to 8. - testString: assert(sum === 8); - - text: Returned value from addFive should be undefined. - testString: assert(addFive() === undefined); - - text: Inside the addFive function, you should add 5 to the sum variable. - testString: assert(__helpers.removeWhiteSpace(addFive.toString()).match(/sum=sum\+5|sum\+=5/)); +# --hints-- +`addFive` should be a function. + +```js +assert(typeof addFive === 'function'); ``` -
+Once both functions have ran, the `sum` should be equal to 8. -## Challenge Seed -
+```js +assert(sum === 8); +``` -
+Returned value from `addFive` should be `undefined`. + +```js +assert(addFive() === undefined); +``` + +Inside the `addFive` function, you should add `5` to the `sum` variable. + +```js +assert( + __helpers.removeWhiteSpace(addFive.toString()).match(/sum=sum\+5|sum\+=5/) +); +``` + +# --seed-- + +## --seed-contents-- ```js // Setup @@ -67,12 +75,7 @@ addThree(); addFive(); ``` -
- - -## Solution -
- +# --solutions-- ```js var sum = 0; @@ -88,5 +91,3 @@ function addFive() { addThree(); addFive(); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md index 3ed7cf9923..2960b6f4d4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md @@ -6,38 +6,53 @@ videoUrl: 'https://scrimba.com/c/cBa2JAL' forumTopicId: 18335 --- -## Description -
-When JavaScript variables are declared, they have an initial value of undefined. If you do a mathematical operation on an undefined variable your result will be NaN which means "Not a Number". If you concatenate a string with an undefined variable, you will get a literal string of "undefined". -
+# --description-- -## Instructions -
-Initialize the three variables a, b, and c with 5, 10, and "I am a" respectively so that they will not be undefined. -
+When JavaScript variables are declared, they have an initial value of `undefined`. If you do a mathematical operation on an `undefined` variable your result will be `NaN` which means "Not a Number". If you concatenate a string with an `undefined` variable, you will get a literal string of `"undefined"`. -## Tests -
+# --instructions-- -```yml -tests: - - text: a should be defined and evaluated to have the value of 6. - testString: assert(typeof a === 'number' && a === 6); - - text: b should be defined and evaluated to have the value of 15. - testString: assert(typeof b === 'number' && b === 15); - - text: c should not contain undefined and should have a value of "I am a String!" - testString: assert(!/undefined/.test(c) && c === "I am a String!"); - - text: You should not change code below the specified comment. - testString: assert(/a = a \+ 1;/.test(code) && /b = b \+ 5;/.test(code) && /c = c \+ " String!";/.test(code)); +Initialize the three variables `a`, `b`, and `c` with `5`, `10`, and `"I am a"` respectively so that they will not be `undefined`. +# --hints-- + +`a` should be defined and evaluated to have the value of `6`. + +```js +assert(typeof a === 'number' && a === 6); ``` -
+`b` should be defined and evaluated to have the value of `15`. -## Challenge Seed -
+```js +assert(typeof b === 'number' && b === 15); +``` -
+`c` should not contain `undefined` and should have a value of "I am a String!" + +```js +assert(!/undefined/.test(c) && c === 'I am a String!'); +``` + +You should not change code below the specified comment. + +```js +assert( + /a = a \+ 1;/.test(code) && + /b = b \+ 5;/.test(code) && + /c = c \+ " String!";/.test(code) +); +``` + +# --seed-- + +## --after-user-code-- + +```js +(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = '" + c + "'"; })(a,b,c); +``` + +## --seed-contents-- ```js // Only change code below this line @@ -51,23 +66,7 @@ b = b + 5; c = c + " String!"; ``` -
- - -### After Test -
- -```js -(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = '" + c + "'"; })(a,b,c); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var a = 5; @@ -77,5 +76,3 @@ a = a + 1; b = b + 5; c = c + " String!"; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.md index eec44540df..0b723aa89f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/c9yEJT4' forumTopicId: 18336 --- -## Description -
+# --description-- + After you've created a JavaScript object, you can update its properties at any time just like you would update any other variable. You can use either dot or bracket notation to update. -For example, let's look at ourDog: + +For example, let's look at `ourDog`: ```js var ourDog = { @@ -20,35 +21,35 @@ var ourDog = { }; ``` -Since he's a particularly happy dog, let's change his name to "Happy Camper". Here's how we update his object's name property: -ourDog.name = "Happy Camper"; or -ourDog["name"] = "Happy Camper"; -Now when we evaluate ourDog.name, instead of getting "Camper", we'll get his new name, "Happy Camper". -
+Since he's a particularly happy dog, let's change his name to "Happy Camper". Here's how we update his object's name property: `ourDog.name = "Happy Camper";` or `ourDog["name"] = "Happy Camper";` Now when we evaluate `ourDog.name`, instead of getting "Camper", we'll get his new name, "Happy Camper". -## Instructions -
-Update the myDog object's name property. Let's change her name from "Coder" to "Happy Coder". You can use either dot or bracket notation. -
+# --instructions-- -## Tests -
+Update the `myDog` object's name property. Let's change her name from "Coder" to "Happy Coder". You can use either dot or bracket notation. -```yml -tests: - - text: You should update myDog's "name" property to equal "Happy Coder". - testString: assert(/happy coder/gi.test(myDog.name)); - - text: You should not edit the myDog definition. - testString: 'assert(/"name": "Coder"/.test(code));' +# --hints-- +You should update `myDog`'s `"name"` property to equal "Happy Coder". + +```js +assert(/happy coder/gi.test(myDog.name)); ``` -
+You should not edit the `myDog` definition. -## Challenge Seed -
+```js +assert(/"name": "Coder"/.test(code)); +``` -
+# --seed-- + +## --after-user-code-- + +```js +(function(z){return z;})(myDog); +``` + +## --seed-contents-- ```js // Setup @@ -60,27 +61,9 @@ var myDog = { }; // Only change code below this line - - ``` -
- - -### After Test -
- -```js -(function(z){return z;})(myDog); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myDog = { @@ -91,5 +74,3 @@ var myDog = { }; myDog.name = "Happy Coder"; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-first-character-in-a-string.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-first-character-in-a-string.md index 61f2352ef4..30767fcb4d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-first-character-in-a-string.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-first-character-in-a-string.md @@ -6,11 +6,13 @@ videoUrl: 'https://scrimba.com/c/ca8JwhW' forumTopicId: 18341 --- -## Description -
-Bracket notation is a way to get a character at a specific index within a string. +# --description-- + +Bracket notation is a way to get a character at a specific `index` within a string. + Most modern programming languages, like JavaScript, don't start counting at 1 like humans do. They start at 0. This is referred to as Zero-based indexing. -For example, the character at index 0 in the word "Charles" is "C". So if var firstName = "Charles", you can get the value of the first letter of the string by using firstName[0]. + +For example, the character at index 0 in the word "Charles" is "C". So if `var firstName = "Charles"`, you can get the value of the first letter of the string by using `firstName[0]`. Example: @@ -19,32 +21,35 @@ var firstName = "Charles"; var firstLetter = firstName[0]; // firstLetter is "C" ``` -
+# --instructions-- -## Instructions -
-Use bracket notation to find the first character in the lastName variable and assign it to firstLetterOfLastName. -Hint: Try looking at the example above if you get stuck. -
+Use bracket notation to find the first character in the `lastName` variable and assign it to `firstLetterOfLastName`. -## Tests -
+**Hint:** Try looking at the example above if you get stuck. -```yml -tests: - - text: The firstLetterOfLastName variable should have the value of L. - testString: assert(firstLetterOfLastName === 'L'); - - text: You should use bracket notation. - testString: assert(code.match(/firstLetterOfLastName\s*?=\s*?lastName\[.*?\]/)); +# --hints-- +The `firstLetterOfLastName` variable should have the value of `L`. + +```js +assert(firstLetterOfLastName === 'L'); ``` -
+You should use bracket notation. -## Challenge Seed -
+```js +assert(code.match(/firstLetterOfLastName\s*?=\s*?lastName\[.*?\]/)); +``` -
+# --seed-- + +## --after-user-code-- + +```js +(function(v){return v;})(firstLetterOfLastName); +``` + +## --seed-contents-- ```js // Setup @@ -53,26 +58,9 @@ var lastName = "Lovelace"; // Only change code below this line firstLetterOfLastName = lastName; // Change this line - ``` -
- - -### After Test -
- -```js -(function(v){return v;})(firstLetterOfLastName); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var firstLetterOfLastName = ""; @@ -81,5 +69,3 @@ var lastName = "Lovelace"; // Only change code below this line firstLetterOfLastName = lastName[0]; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-last-character-in-a-string.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-last-character-in-a-string.md index 90d4148343..fdd9ccb05f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-last-character-in-a-string.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-last-character-in-a-string.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cBZQGcv' forumTopicId: 18342 --- -## Description -
+# --description-- + In order to get the last letter of a string, you can subtract one from the string's length. -For example, if var firstName = "Charles", you can get the value of the last letter of the string by using firstName[firstName.length - 1]. + +For example, if `var firstName = "Charles"`, you can get the value of the last letter of the string by using `firstName[firstName.length - 1]`. Example: @@ -18,32 +19,35 @@ var firstName = "Charles"; var lastLetter = firstName[firstName.length - 1]; // lastLetter is "s" ``` -
+# --instructions-- -## Instructions -
-Use bracket notation to find the last character in the lastName variable. -Hint: Try looking at the example above if you get stuck. -
+Use bracket notation to find the last character in the `lastName` variable. -## Tests -
+**Hint:** Try looking at the example above if you get stuck. -```yml -tests: - - text: lastLetterOfLastName should be "e". - testString: assert(lastLetterOfLastName === "e"); - - text: You should use .length to get the last letter. - testString: assert(code.match(/\.length/g).length > 0); +# --hints-- +`lastLetterOfLastName` should be "e". + +```js +assert(lastLetterOfLastName === 'e'); ``` -
+You should use `.length` to get the last letter. -## Challenge Seed -
+```js +assert(code.match(/\.length/g).length > 0); +``` -
+# --seed-- + +## --after-user-code-- + +```js +(function(v){return v;})(lastLetterOfLastName); +``` + +## --seed-contents-- ```js // Setup @@ -51,31 +55,11 @@ var lastName = "Lovelace"; // Only change code below this line var lastLetterOfLastName = lastName; // Change this line - - ``` -
- - -### After Test -
- -```js -(function(v){return v;})(lastLetterOfLastName); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var lastName = "Lovelace"; var lastLetterOfLastName = lastName[lastName.length - 1]; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-character-in-a-string.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-character-in-a-string.md index e412e1baf4..60dcc4456e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-character-in-a-string.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-character-in-a-string.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cWPVJua' forumTopicId: 18343 --- -## Description -
+# --description-- + You can also use bracket notation to get the character at other positions within a string. -Remember that computers start counting at 0, so the first character is actually the zeroth character. + +Remember that computers start counting at `0`, so the first character is actually the zeroth character. Example: @@ -18,32 +19,35 @@ var firstName = "Ada"; var secondLetterOfFirstName = firstName[1]; // secondLetterOfFirstName is "d" ``` -
+# --instructions-- -## Instructions -
-Let's try to set thirdLetterOfLastName to equal the third letter of the lastName variable using bracket notation. -Hint: Try looking at the example above if you get stuck. -
+Let's try to set `thirdLetterOfLastName` to equal the third letter of the `lastName` variable using bracket notation. -## Tests -
+**Hint:** Try looking at the example above if you get stuck. -```yml -tests: - - text: The thirdLetterOfLastName variable should have the value of v. - testString: assert(thirdLetterOfLastName === 'v'); - - text: You should use bracket notation. - testString: assert(code.match(/thirdLetterOfLastName\s*?=\s*?lastName\[.*?\]/)); +# --hints-- +The `thirdLetterOfLastName` variable should have the value of `v`. + +```js +assert(thirdLetterOfLastName === 'v'); ``` -
+You should use bracket notation. -## Challenge Seed -
+```js +assert(code.match(/thirdLetterOfLastName\s*?=\s*?lastName\[.*?\]/)); +``` -
+# --seed-- + +## --after-user-code-- + +```js +(function(v){return v;})(thirdLetterOfLastName); +``` + +## --seed-contents-- ```js // Setup @@ -51,31 +55,11 @@ var lastName = "Lovelace"; // Only change code below this line var thirdLetterOfLastName = lastName; // Change this line - - ``` -
- - -### After Test -
- -```js -(function(v){return v;})(thirdLetterOfLastName); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var lastName = "Lovelace"; var thirdLetterOfLastName = lastName[2]; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-to-last-character-in-a-string.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-to-last-character-in-a-string.md index a886608a1d..fef721418a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-to-last-character-in-a-string.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-to-last-character-in-a-string.md @@ -6,10 +6,11 @@ videoUrl: 'https://scrimba.com/c/cw4vkh9' forumTopicId: 18344 --- -## Description -
+# --description-- + You can use the same principle we just used to retrieve the last character in a string to retrieve the Nth-to-last character. -For example, you can get the value of the third-to-last letter of the var firstName = "Charles" string by using firstName[firstName.length - 3] + +For example, you can get the value of the third-to-last letter of the `var firstName = "Charles"` string by using `firstName[firstName.length - 3]` Example: @@ -18,32 +19,35 @@ var firstName = "Charles"; var thirdToLastLetter = firstName[firstName.length - 3]; // thirdToLastLetter is "l" ``` -
+# --instructions-- -## Instructions -
-Use bracket notation to find the second-to-last character in the lastName string. -Hint: Try looking at the example above if you get stuck. -
+Use bracket notation to find the second-to-last character in the `lastName` string. -## Tests -
+**Hint:** Try looking at the example above if you get stuck. -```yml -tests: - - text: secondToLastLetterOfLastName should be "c". - testString: assert(secondToLastLetterOfLastName === 'c'); - - text: You should use .length to get the second last letter. - testString: assert(code.match(/\.length/g).length > 0); +# --hints-- +`secondToLastLetterOfLastName` should be "c". + +```js +assert(secondToLastLetterOfLastName === 'c'); ``` -
+You should use `.length` to get the second last letter. -## Challenge Seed -
+```js +assert(code.match(/\.length/g).length > 0); +``` -
+# --seed-- + +## --after-user-code-- + +```js +(function(v){return v;})(secondToLastLetterOfLastName); +``` + +## --seed-contents-- ```js // Setup @@ -51,31 +55,11 @@ var lastName = "Lovelace"; // Only change code below this line var secondToLastLetterOfLastName = lastName; // Change this line - - ``` -
- - -### After Test -
- -```js -(function(v){return v;})(secondToLastLetterOfLastName); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var lastName = "Lovelace"; var secondToLastLetterOfLastName = lastName[lastName.length - 2]; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md index a246f88fde..32bc38eb82 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md @@ -6,13 +6,17 @@ videoUrl: 'https://scrimba.com/c/cy87mf3' forumTopicId: 18348 --- -## Description -
-If statements are used to make decisions in code. The keyword if tells JavaScript to execute the code in the curly braces under certain conditions, defined in the parentheses. These conditions are known as Boolean conditions and they may only be true or false. -When the condition evaluates to true, the program executes the statement inside the curly braces. When the Boolean condition evaluates to false, the statement inside the curly braces will not execute. -Pseudocode -
if (condition is true) {
  statement is executed
}
-Example +# --description-- + +`If` statements are used to make decisions in code. The keyword `if` tells JavaScript to execute the code in the curly braces under certain conditions, defined in the parentheses. These conditions are known as `Boolean` conditions and they may only be `true` or `false`. + +When the condition evaluates to `true`, the program executes the statement inside the curly braces. When the Boolean condition evaluates to `false`, the statement inside the curly braces will not execute. + +**Pseudocode** + +
if (condition is true) {
  statement is executed
}
+ +**Example** ```js function test (myCondition) { @@ -25,38 +29,47 @@ test(true); // returns "It was true" test(false); // returns "It was false" ``` -When test is called with a value of true, the if statement evaluates myCondition to see if it is true or not. Since it is true, the function returns "It was true". When we call test with a value of false, myCondition is not true and the statement in the curly braces is not executed and the function returns "It was false". -
+When `test` is called with a value of `true`, the `if` statement evaluates `myCondition` to see if it is `true` or not. Since it is `true`, the function returns `"It was true"`. When we call `test` with a value of `false`, `myCondition` is *not* `true` and the statement in the curly braces is not executed and the function returns `"It was false"`. -## Instructions -
-Create an if statement inside the function to return "Yes, that was true" if the parameter wasThatTrue is true and return "No, that was false" otherwise. -
+# --instructions-- -## Tests -
+Create an `if` statement inside the function to return `"Yes, that was true"` if the parameter `wasThatTrue` is `true` and return `"No, that was false"` otherwise. -```yml -tests: - - text: trueOrFalse should be a function - testString: assert(typeof trueOrFalse === "function"); - - text: trueOrFalse(true) should return a string - testString: assert(typeof trueOrFalse(true) === "string"); - - text: trueOrFalse(false) should return a string - testString: assert(typeof trueOrFalse(false) === "string"); - - text: trueOrFalse(true) should return "Yes, that was true" - testString: assert(trueOrFalse(true) === "Yes, that was true"); - - text: trueOrFalse(false) should return "No, that was false" - testString: assert(trueOrFalse(false) === "No, that was false"); +# --hints-- +`trueOrFalse` should be a function + +```js +assert(typeof trueOrFalse === 'function'); ``` -
+`trueOrFalse(true)` should return a string -## Challenge Seed -
+```js +assert(typeof trueOrFalse(true) === 'string'); +``` -
+`trueOrFalse(false)` should return a string + +```js +assert(typeof trueOrFalse(false) === 'string'); +``` + +`trueOrFalse(true)` should return "Yes, that was true" + +```js +assert(trueOrFalse(true) === 'Yes, that was true'); +``` + +`trueOrFalse(false)` should return "No, that was false" + +```js +assert(trueOrFalse(false) === 'No, that was false'); +``` + +# --seed-- + +## --seed-contents-- ```js function trueOrFalse(wasThatTrue) { @@ -69,15 +82,7 @@ function trueOrFalse(wasThatTrue) { } ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function trueOrFalse(wasThatTrue) { @@ -87,5 +92,3 @@ function trueOrFalse(wasThatTrue) { return "No, that was false"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.md index 991874f04e..287d915f49 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.md @@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cyWJBT4' forumTopicId: 301179 --- -## Description -
+# --description-- + In the previous challenge, you used a single conditional operator. You can also chain them together to check for multiple conditions. + The following function uses if, else if, and else statements to check multiple conditions: ```js @@ -43,35 +44,39 @@ function findGreaterOrEqual(a, b) { } ``` -
+# --instructions-- -## Instructions -
-In the checkSign function, use multiple conditional operators - following the recommended format used in findGreaterOrEqual - to check if a number is positive, negative or zero. The function should return "positive", "negative" or "zero". -
+In the `checkSign` function, use multiple conditional operators - following the recommended format used in `findGreaterOrEqual` - to check if a number is positive, negative or zero. The function should return `"positive"`, `"negative"` or `"zero"`. -## Tests -
+# --hints-- -```yml -tests: - - text: checkSign should use multiple conditional operators - testString: assert(/.+?\s*?\?\s*?.+?\s*?:\s*?.+?\s*?\?\s*?.+?\s*?:\s*?.+?/gi.test(code)); - - text: checkSign(10) should return "positive". Note that capitalization matters - testString: assert(checkSign(10) === 'positive'); - - text: checkSign(-12) should return "negative". Note that capitalization matters - testString: assert(checkSign(-12) === 'negative'); - - text: checkSign(0) should return "zero". Note that capitalization matters - testString: assert(checkSign(0) === 'zero'); +`checkSign` should use multiple conditional operators +```js +assert(/.+?\s*?\?\s*?.+?\s*?:\s*?.+?\s*?\?\s*?.+?\s*?:\s*?.+?/gi.test(code)); ``` -
+`checkSign(10)` should return "positive". Note that capitalization matters -## Challenge Seed -
+```js +assert(checkSign(10) === 'positive'); +``` -
+`checkSign(-12)` should return "negative". Note that capitalization matters + +```js +assert(checkSign(-12) === 'negative'); +``` + +`checkSign(0)` should return "zero". Note that capitalization matters + +```js +assert(checkSign(0) === 'zero'); +``` + +# --seed-- + +## --seed-contents-- ```js function checkSign(num) { @@ -81,19 +86,10 @@ function checkSign(num) { checkSign(10); ``` -
- - - -
- -## Solution -
+# --solutions-- ```js function checkSign(num) { return (num > 0) ? 'positive' : (num < 0) ? 'negative' : 'zero'; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md index f043708d27..98183edf24 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md @@ -5,14 +5,13 @@ challengeType: 1 forumTopicId: 305925 --- -## Description -
+# --description-- -In a [previous challenge](/learn/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion), you learned how to use recursion to replace a for loop. Now, let's look at a more complex function that returns an array of consecutive integers starting with 1 through the number passed to the function. +In a [previous challenge](/learn/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion), you learned how to use recursion to replace a for loop. Now, let's look at a more complex function that returns an array of consecutive integers starting with `1` through the number passed to the function. -As mentioned in the previous challenge, there will be a base case. The base case tells the recursive function when it no longer needs to call itself. It is a simple case where the return value is already known. There will also be a recursive call which executes the original function with different arguments. If the function is written correctly, eventually the base case will be reached. +As mentioned in the previous challenge, there will be a base case. The base case tells the recursive function when it no longer needs to call itself. It is a simple case where the return value is already known. There will also be a recursive call which executes the original function with different arguments. If the function is written correctly, eventually the base case will be reached. -For example, say you want to write a recursive function that returns an array containing the numbers 1 through n. This function will need to accept an argument, n, representing the final number. Then it will need to call itself with progressively smaller values of n until it reaches 1. You could write the function as follows: +For example, say you want to write a recursive function that returns an array containing the numbers `1` through `n`. This function will need to accept an argument, `n`, representing the final number. Then it will need to call itself with progressively smaller values of `n` until it reaches `1`. You could write the function as follows: ```javascript function countup(n) { @@ -27,46 +26,55 @@ function countup(n) { console.log(countup(5)); // [ 1, 2, 3, 4, 5 ] ``` -At first, this seems counterintuitive since the value of `n` decreases, but the values in the final array are increasing. This happens because the push happens last, after the recursive call has returned. At the point where `n` is pushed into the array, `countup(n - 1)` has already been evaluated and returned `[1, 2, ..., n - 1]`. +At first, this seems counterintuitive since the value of `n` *decreases*, but the values in the final array are *increasing*. This happens because the push happens last, after the recursive call has returned. At the point where `n` is pushed into the array, `countup(n - 1)` has already been evaluated and returned `[1, 2, ..., n - 1]`. -
+# --instructions-- -## Instructions -
+We have defined a function called `countdown` with one parameter (`n`). The function should use recursion to return an array containing the integers `n` through `1` based on the `n` parameter. If the function is called with a number less than 1, the function should return an empty array. For example, calling this function with `n = 5` should return the array `[5, 4, 3, 2, 1]`. Your function must use recursion by calling itself and must not use loops of any kind. -We have defined a function called countdown with one parameter (n). The function should use recursion to return an array containing the integers n through 1 based on the n parameter. If the function is called with a number less than 1, the function should return an empty array. -For example, calling this function with n = 5 should return the array [5, 4, 3, 2, 1]. -Your function must use recursion by calling itself and must not use loops of any kind. +# --hints-- -
- -## Tests -
- -``` yml -tests: - - text: countdown(-1) should return an empty array. - testString: assert.isEmpty(countdown(-1)); - - text: countdown(10) should return [10, 9, 8, 7, 6, 5, 4, 3, 2, 1] - testString: assert.deepStrictEqual(countdown(10), [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]); - - text: countdown(5) should return [5, 4, 3, 2, 1] - testString: assert.deepStrictEqual(countdown(5), [5, 4, 3, 2, 1]); - - text: Your code should not rely on any kind of loops (for, while or higher order functions such as forEach, map, filter, and reduce). - testString: assert(!__helpers.removeJSComments(code).match(/for|while|forEach|map|filter|reduce/g)); - - text: You should use recursion to solve this problem. - testString: assert(__helpers.removeJSComments(countdown.toString()).match(/countdown\s*\(.+\)/)); -``` - -
- -## Challenge Seed -
- -
+`countdown(-1)` should return an empty array. ```js +assert.isEmpty(countdown(-1)); +``` +`countdown(10)` should return `[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]` +```js +assert.deepStrictEqual(countdown(10), [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]); +``` + +`countdown(5)` should return `[5, 4, 3, 2, 1]` + +```js +assert.deepStrictEqual(countdown(5), [5, 4, 3, 2, 1]); +``` + +Your code should not rely on any kind of loops (`for`, `while` or higher order functions such as `forEach`, `map`, `filter`, and `reduce`). + +```js +assert( + !__helpers + .removeJSComments(code) + .match(/for|while|forEach|map|filter|reduce/g) +); +``` + +You should use recursion to solve this problem. + +```js +assert( + __helpers.removeJSComments(countdown.toString()).match(/countdown\s*\(.+\)/) +); +``` + +# --seed-- + +## --seed-contents-- + +```js // Only change code below this line function countdown(n){ return; @@ -74,17 +82,10 @@ function countdown(n){ // Only change code above this line ``` -
- -
- -## Solution -
+# --solutions-- ```js function countdown(n){ return n < 1 ? [] : [n].concat(countdown(n - 1)); } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers.md index 74f6b7fc9c..8467d4c5e5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers.md @@ -5,43 +5,63 @@ challengeType: 1 forumTopicId: 301180 --- -## Description -
+# --description-- Continuing from the previous challenge, we provide you another opportunity to create a recursive function to solve a problem. -
+# --instructions-- -## Instructions -
-We have defined a function named rangeOfNumbers with two parameters. The function should return an array of integers which begins with a number represented by the startNum parameter and ends with a number represented by the endNum parameter. The starting number will always be less than or equal to the ending number. Your function must use recursion by calling itself and not use loops of any kind. It should also work for cases where both startNum and endNum are the same. -
+We have defined a function named `rangeOfNumbers` with two parameters. The function should return an array of integers which begins with a number represented by the `startNum` parameter and ends with a number represented by the `endNum` parameter. The starting number will always be less than or equal to the ending number. Your function must use recursion by calling itself and not use loops of any kind. It should also work for cases where both `startNum` and `endNum` are the same. -## Tests -
+# --hints-- -``` yml -tests: - - text: Your function should return an array. - testString: assert(Array.isArray(rangeOfNumbers(5, 10))); - - text: Your code should not use any loop syntax (for or while or higher order functions such as forEach, map, filter, or reduce). - testString: assert(!__helpers.removeJSComments(code).match(/for|while|forEach|map|filter|reduce/g)); - - text: rangeOfNumbers should use recursion (call itself) to solve this challenge. - testString: assert(__helpers.removeJSComments(rangeOfNumbers.toString()).match(/rangeOfNumbers\s*\(.+\)/)); - - text: rangeOfNumbers(1, 5) should return [1, 2, 3, 4, 5]. - testString: assert.deepStrictEqual(rangeOfNumbers(1, 5), [1, 2, 3, 4, 5]); - - text: rangeOfNumbers(6, 9) should return [6, 7, 8, 9]. - testString: assert.deepStrictEqual(rangeOfNumbers(6, 9), [6, 7, 8, 9]); - - text: rangeOfNumbers(4, 4) should return [4]. - testString: assert.deepStrictEqual(rangeOfNumbers(4, 4), [4]); +Your function should return an array. + +```js +assert(Array.isArray(rangeOfNumbers(5, 10))); ``` -
+Your code should not use any loop syntax (`for` or `while` or higher order functions such as `forEach`, `map`, `filter`, or `reduce`). -## Challenge Seed -
+```js +assert( + !__helpers + .removeJSComments(code) + .match(/for|while|forEach|map|filter|reduce/g) +); +``` -
+`rangeOfNumbers` should use recursion (call itself) to solve this challenge. + +```js +assert( + __helpers + .removeJSComments(rangeOfNumbers.toString()) + .match(/rangeOfNumbers\s*\(.+\)/) +); +``` + +`rangeOfNumbers(1, 5)` should return `[1, 2, 3, 4, 5]`. + +```js +assert.deepStrictEqual(rangeOfNumbers(1, 5), [1, 2, 3, 4, 5]); +``` + +`rangeOfNumbers(6, 9)` should return `[6, 7, 8, 9]`. + +```js +assert.deepStrictEqual(rangeOfNumbers(6, 9), [6, 7, 8, 9]); +``` + +`rangeOfNumbers(4, 4)` should return `[4]`. + +```js +assert.deepStrictEqual(rangeOfNumbers(4, 4), [4]); +``` + +# --seed-- + +## --seed-contents-- ```js function rangeOfNumbers(startNum, endNum) { @@ -49,12 +69,7 @@ function rangeOfNumbers(startNum, endNum) { }; ``` -
- -
- -## Solution -
+# --solutions-- ```js function rangeOfNumbers(startNum, endNum) { @@ -67,5 +82,3 @@ function rangeOfNumbers(startNum, endNum) { } } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator.md index 8961926e31..e2efa479bd 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator.md @@ -5,11 +5,14 @@ challengeType: 1 forumTopicId: 301181 --- -## Description -
+# --description-- + The conditional operator, also called the ternary operator, can be used as a one line if-else expression. + The syntax is: -condition ? expression-if-true : expression-if-false; + +`condition ? expression-if-true : expression-if-false;` + The following function uses an if-else statement to check a condition: ```js @@ -23,7 +26,7 @@ function findGreater(a, b) { } ``` -This can be re-written using the conditional operator: +This can be re-written using the `conditional operator`: ```js function findGreater(a, b) { @@ -31,34 +34,39 @@ function findGreater(a, b) { } ``` -
+# --instructions-- -## Instructions -
-Use the conditional operator in the checkEqual function to check if two numbers are equal or not. The function should return either "Equal" or "Not Equal". -
+Use the `conditional operator` in the `checkEqual` function to check if two numbers are equal or not. The function should return either "Equal" or "Not Equal". -## Tests -
+# --hints-- -```yml -tests: - - text: checkEqual should use the conditional operator - testString: assert(/.+?\s*?\?\s*?.+?\s*?:\s*?.+?/.test(code)); - - text: checkEqual(1, 2) should return "Not Equal" - testString: assert(checkEqual(1, 2) === "Not Equal"); - - text: checkEqual(1, 1) should return "Equal" - testString: assert(checkEqual(1, 1) === "Equal"); - - text: checkEqual(1, -1) should return "Not Equal" - testString: assert(checkEqual(1, -1) === "Not Equal"); +`checkEqual` should use the `conditional operator` + +```js +assert(/.+?\s*?\?\s*?.+?\s*?:\s*?.+?/.test(code)); ``` -
+`checkEqual(1, 2)` should return "Not Equal" -## Challenge Seed -
+```js +assert(checkEqual(1, 2) === 'Not Equal'); +``` -
+`checkEqual(1, 1)` should return "Equal" + +```js +assert(checkEqual(1, 1) === 'Equal'); +``` + +`checkEqual(1, -1)` should return "Not Equal" + +```js +assert(checkEqual(1, -1) === 'Not Equal'); +``` + +# --seed-- + +## --seed-contents-- ```js function checkEqual(a, b) { @@ -68,19 +76,10 @@ function checkEqual(a, b) { checkEqual(1, 2); ``` -
- - - -
- -## Solution -
+# --solutions-- ```js function checkEqual(a, b) { return a === b ? "Equal" : "Not Equal"; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function-with-a-radix.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function-with-a-radix.md index 19a3bb6dcf..92015817a8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function-with-a-radix.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function-with-a-radix.md @@ -6,45 +6,59 @@ videoUrl: 'https://scrimba.com/c/c6K4Kh3' forumTopicId: 301182 --- -## Description -
-The parseInt() function parses a string and returns an integer. It takes a second argument for the radix, which specifies the base of the number in the string. The radix can be an integer between 2 and 36. +# --description-- + +The `parseInt()` function parses a string and returns an integer. It takes a second argument for the radix, which specifies the base of the number in the string. The radix can be an integer between 2 and 36. + The function call looks like: -parseInt(string, radix); + +`parseInt(string, radix);` + And here's an example: -var a = parseInt("11", 2); + +`var a = parseInt("11", 2);` + The radix variable says that "11" is in the binary system, or base 2. This example converts the string "11" to an integer 3. -
-## Instructions -
-Use parseInt() in the convertToInteger function so it converts a binary number to an integer and returns it. -
+# --instructions-- -## Tests -
+Use `parseInt()` in the `convertToInteger` function so it converts a binary number to an integer and returns it. -```yml -tests: - - text: convertToInteger should use the parseInt() function - testString: assert(/parseInt/g.test(code)); - - text: convertToInteger("10011") should return a number - testString: assert(typeof(convertToInteger("10011")) === "number"); - - text: convertToInteger("10011") should return 19 - testString: assert(convertToInteger("10011") === 19); - - text: convertToInteger("111001") should return 57 - testString: assert(convertToInteger("111001") === 57); - - text: convertToInteger("JamesBond") should return NaN - testString: assert.isNaN(convertToInteger("JamesBond")); +# --hints-- +`convertToInteger` should use the `parseInt()` function + +```js +assert(/parseInt/g.test(code)); ``` -
+`convertToInteger("10011")` should return a number -## Challenge Seed -
+```js +assert(typeof convertToInteger('10011') === 'number'); +``` -
+`convertToInteger("10011")` should return 19 + +```js +assert(convertToInteger('10011') === 19); +``` + +`convertToInteger("111001")` should return 57 + +```js +assert(convertToInteger('111001') === 57); +``` + +`convertToInteger("JamesBond")` should return NaN + +```js +assert.isNaN(convertToInteger('JamesBond')); +``` + +# --seed-- + +## --seed-contents-- ```js function convertToInteger(str) { @@ -54,19 +68,10 @@ function convertToInteger(str) { convertToInteger("10011"); ``` -
- - - -
- -## Solution -
+# --solutions-- ```js function convertToInteger(str) { return parseInt(str, 2); } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function.md index 46b373a3ac..908de0c398 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function.md @@ -6,42 +6,53 @@ videoUrl: 'https://scrimba.com/c/cm83LSW' forumTopicId: 301183 --- -## Description -
-The parseInt() function parses a string and returns an integer. Here's an example: -var a = parseInt("007"); -The above function converts the string "007" to an integer 7. If the first character in the string can't be converted into a number, then it returns NaN. -
+# --description-- -## Instructions -
-Use parseInt() in the convertToInteger function so it converts the input string str into an integer, and returns it. -
+The `parseInt()` function parses a string and returns an integer. Here's an example: -## Tests -
+`var a = parseInt("007");` -```yml -tests: - - text: convertToInteger should use the parseInt() function - testString: assert(/parseInt/g.test(code)); - - text: convertToInteger("56") should return a number - testString: assert(typeof(convertToInteger("56")) === "number"); - - text: convertToInteger("56") should return 56 - testString: assert(convertToInteger("56") === 56); - - text: convertToInteger("77") should return 77 - testString: assert(convertToInteger("77") === 77); - - text: convertToInteger("JamesBond") should return NaN - testString: assert.isNaN(convertToInteger("JamesBond")); +The above function converts the string "007" to an integer 7. If the first character in the string can't be converted into a number, then it returns `NaN`. +# --instructions-- + +Use `parseInt()` in the `convertToInteger` function so it converts the input string `str` into an integer, and returns it. + +# --hints-- + +`convertToInteger` should use the `parseInt()` function + +```js +assert(/parseInt/g.test(code)); ``` -
+`convertToInteger("56")` should return a number -## Challenge Seed -
+```js +assert(typeof convertToInteger('56') === 'number'); +``` -
+`convertToInteger("56")` should return 56 + +```js +assert(convertToInteger('56') === 56); +``` + +`convertToInteger("77")` should return 77 + +```js +assert(convertToInteger('77') === 77); +``` + +`convertToInteger("JamesBond")` should return NaN + +```js +assert.isNaN(convertToInteger('JamesBond')); +``` + +# --seed-- + +## --seed-contents-- ```js function convertToInteger(str) { @@ -51,19 +62,10 @@ function convertToInteger(str) { convertToInteger("56"); ``` -
- - - -
- -## Solution -
+# --solutions-- ```js function convertToInteger(str) { return parseInt(str); } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md index cfdfdcbbf2..2756daa8be 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md @@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cdBk8sM' forumTopicId: 18373 --- -## Description -
-Objects can be thought of as a key/value storage, like a dictionary. If you have tabular data, you can use an object to "lookup" values rather than a switch statement or an if/else chain. This is most useful when you know that your input data is limited to a certain range. +# --description-- + +Objects can be thought of as a key/value storage, like a dictionary. If you have tabular data, you can use an object to "lookup" values rather than a `switch` statement or an `if/else` chain. This is most useful when you know that your input data is limited to a certain range. + Here is an example of a simple reverse alphabet lookup: ```js @@ -29,45 +30,71 @@ var value = 2; alpha[value]; // "Y" ``` -
+# --instructions-- -## Instructions -
-Convert the switch statement into an object called lookup. Use it to look up val and assign the associated string to the result variable. -
+Convert the switch statement into an object called `lookup`. Use it to look up `val` and assign the associated string to the `result` variable. -## Tests -
+# --hints-- -```yml -tests: - - text: phoneticLookup("alpha") should equal "Adams" - testString: assert(phoneticLookup("alpha") === 'Adams'); - - text: phoneticLookup("bravo") should equal "Boston" - testString: assert(phoneticLookup("bravo") === 'Boston'); - - text: phoneticLookup("charlie") should equal "Chicago" - testString: assert(phoneticLookup("charlie") === 'Chicago'); - - text: phoneticLookup("delta") should equal "Denver" - testString: assert(phoneticLookup("delta") === 'Denver'); - - text: phoneticLookup("echo") should equal "Easy" - testString: assert(phoneticLookup("echo") === 'Easy'); - - text: phoneticLookup("foxtrot") should equal "Frank" - testString: assert(phoneticLookup("foxtrot") === 'Frank'); - - text: phoneticLookup("") should equal undefined - testString: assert(typeof phoneticLookup("") === 'undefined'); - - text: You should not modify the return statement - testString: assert(code.match(/return\sresult;/)); - - text: You should not use case, switch, or if statements - testString: assert(!/case|switch|if/g.test(code.replace(/([/]{2}.*)|([/][*][^/*]*[*][/])/g,''))); +`phoneticLookup("alpha")` should equal `"Adams"` +```js +assert(phoneticLookup('alpha') === 'Adams'); ``` -
+`phoneticLookup("bravo")` should equal `"Boston"` -## Challenge Seed -
+```js +assert(phoneticLookup('bravo') === 'Boston'); +``` -
+`phoneticLookup("charlie")` should equal `"Chicago"` + +```js +assert(phoneticLookup('charlie') === 'Chicago'); +``` + +`phoneticLookup("delta")` should equal `"Denver"` + +```js +assert(phoneticLookup('delta') === 'Denver'); +``` + +`phoneticLookup("echo")` should equal `"Easy"` + +```js +assert(phoneticLookup('echo') === 'Easy'); +``` + +`phoneticLookup("foxtrot")` should equal `"Frank"` + +```js +assert(phoneticLookup('foxtrot') === 'Frank'); +``` + +`phoneticLookup("")` should equal `undefined` + +```js +assert(typeof phoneticLookup('') === 'undefined'); +``` + +You should not modify the `return` statement + +```js +assert(code.match(/return\sresult;/)); +``` + +You should not use `case`, `switch`, or `if` statements + +```js +assert( + !/case|switch|if/g.test(code.replace(/([/]{2}.*)|([/][*][^/*]*[*][/])/g, '')) +); +``` + +# --seed-- + +## --seed-contents-- ```js // Setup @@ -102,15 +129,7 @@ function phoneticLookup(val) { phoneticLookup("charlie"); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js function phoneticLookup(val) { @@ -130,5 +149,3 @@ function phoneticLookup(val) { return result; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md index 82fcd6de60..e7e2365199 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md @@ -6,47 +6,81 @@ videoUrl: 'https://scrimba.com/c/caqn8zuP' forumTopicId: 18377 --- -## Description -
-We will now use our knowledge of strings to build a "Mad Libs" style word game we're calling "Word Blanks". You will create an (optionally humorous) "Fill in the Blanks" style sentence. +# --description-- + +We will now use our knowledge of strings to build a "[Mad Libs](https://en.wikipedia.org/wiki/Mad_Libs)" style word game we're calling "Word Blanks". You will create an (optionally humorous) "Fill in the Blanks" style sentence. + In a "Mad Libs" game, you are provided sentences with some missing words, like nouns, verbs, adjectives and adverbs. You then fill in the missing pieces with words of your choice in a way that the completed sentence makes sense. -Consider this sentence - "It was really ____, and we ____ ourselves ____". This sentence has three missing pieces- an adjective, a verb and an adverb, and we can add words of our choice to complete it. We can then assign the completed sentence to a variable as follows: + +Consider this sentence - "It was really **\_\_\_\_**, and we **\_\_\_\_** ourselves **\_\_\_\_**". This sentence has three missing pieces- an adjective, a verb and an adverb, and we can add words of our choice to complete it. We can then assign the completed sentence to a variable as follows: ```js var sentence = "It was really " + "hot" + ", and we " + "laughed" + " ourselves " + "silly" + "."; ``` -
+# --instructions-- -## Instructions -
In this challenge, we provide you with a noun, a verb, an adjective and an adverb. You need to form a complete sentence using words of your choice, along with the words we provide. -You will need to use the string concatenation operator + to build a new string, using the provided variables: myNoun, myAdjective, myVerb, and myAdverb. You will then assign the formed string to the wordBlanks variable. You should not change the words assigned to the variables. + +You will need to use the string concatenation operator `+` to build a new string, using the provided variables: `myNoun`, `myAdjective`, `myVerb`, and `myAdverb`. You will then assign the formed string to the `wordBlanks` variable. You should not change the words assigned to the variables. + You will also need to account for spaces in your string, so that the final sentence has spaces between all the words. The result should be a complete sentence. -
-## Tests -
+# --hints-- -```yml -tests: - - text: wordBlanks should be a string. - testString: assert(typeof wordBlanks === 'string'); - - text: You should not change the values assigned to myNoun, myVerb, myAdjective or myAdverb. - testString: assert(myNoun === "dog" && myVerb === "ran" && myAdjective === "big" && myAdverb === "quickly"); - - text: You should not directly use the values "dog", "ran", "big", or "quickly" to create wordBlanks. - testString: const newCode = removeAssignments(code); assert(!/dog/.test(newCode) && !/ran/.test(newCode) && !/big/.test(newCode) && !/quickly/.test(newCode)); - - text: wordBlanks should contain all of the words assigned to the variables myNoun, myVerb, myAdjective and myAdverb separated by non-word characters (and any additional words in your madlib). - testString: assert(/\bdog\b/.test(wordBlanks) && /\bbig\b/.test(wordBlanks) && /\bran\b/.test(wordBlanks) && /\bquickly\b/.test(wordBlanks)); +`wordBlanks` should be a string. +```js +assert(typeof wordBlanks === 'string'); ``` -
+You should not change the values assigned to `myNoun`, `myVerb`, `myAdjective` or `myAdverb`. -## Challenge Seed -
+```js +assert( + myNoun === 'dog' && + myVerb === 'ran' && + myAdjective === 'big' && + myAdverb === 'quickly' +); +``` -
+You should not directly use the values "dog", "ran", "big", or "quickly" to create `wordBlanks`. + +```js +const newCode = removeAssignments(code); +assert( + !/dog/.test(newCode) && + !/ran/.test(newCode) && + !/big/.test(newCode) && + !/quickly/.test(newCode) +); +``` + +`wordBlanks` should contain all of the words assigned to the variables `myNoun`, `myVerb`, `myAdjective` and `myAdverb` separated by non-word characters (and any additional words in your madlib). + +```js +assert( + /\bdog\b/.test(wordBlanks) && + /\bbig\b/.test(wordBlanks) && + /\bran\b/.test(wordBlanks) && + /\bquickly\b/.test(wordBlanks) +); +``` + +# --seed-- + +## --after-user-code-- + +```js +const removeAssignments = str => str + .replace(/myNoun\s*=\s*["']dog["']/g, '') + .replace(/myAdjective\s*=\s*["']big["']/g, '') + .replace(/myVerb\s*=\s*["']ran["']/g, '') + .replace(/myAdverb\s*=\s*["']quickly["']/g, ''); +``` + +## --seed-contents-- ```js var myNoun = "dog"; @@ -59,25 +93,7 @@ var wordBlanks = ""; // Change this line // Only change code above this line ``` -
- -
- -```js -const removeAssignments = str => str - .replace(/myNoun\s*=\s*["']dog["']/g, '') - .replace(/myAdjective\s*=\s*["']big["']/g, '') - .replace(/myVerb\s*=\s*["']ran["']/g, '') - .replace(/myAdverb\s*=\s*["']quickly["']/g, ''); -``` - -
- -
- -## Solution -
- +# --solutions-- ```js var myNoun = "dog"; @@ -88,5 +104,3 @@ var myAdverb = "quickly"; var wordBlanks = "Once there was a " + myNoun + " which was very " + myAdjective + ". "; wordBlanks += "It " + myVerb + " " + myAdverb + " around the yard."; ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions.md index 1128e6584e..7b7de2b156 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions.md @@ -6,9 +6,10 @@ videoUrl: 'https://scrimba.com/c/cL6dqfy' forumTopicId: 18378 --- -## Description -
+# --description-- + In JavaScript, we can divide up our code into reusable parts called functions. + Here's an example of a function: ```js @@ -17,47 +18,35 @@ function functionName() { } ``` -You can call or invoke this function by using its name followed by parentheses, like this: -functionName(); -Each time the function is called it will print out the message "Hello World" on the dev console. All of the code between the curly braces will be executed every time the function is called. -
+You can call or invoke this function by using its name followed by parentheses, like this: `functionName();` Each time the function is called it will print out the message `"Hello World"` on the dev console. All of the code between the curly braces will be executed every time the function is called. + +# --instructions-- -## Instructions -
  1. Create a function called reusableFunction which prints "Hi World" to the dev console.
  2. Call the function.
-
-## Tests -
+# --hints-- -```yml -tests: - - text: reusableFunction should be a function. - testString: assert(typeof reusableFunction === 'function'); - - text: reusableFunction should output "Hi World" to the dev console. - testString: assert(hiWorldWasLogged); - - text: You should call reusableFunction after you define it. - testString: assert(/^\s*reusableFunction\(\)\s*/m.test(code)); - -``` - -
- -## Challenge Seed -
- -
+`reusableFunction` should be a function. ```js - - - +assert(typeof reusableFunction === 'function'); ``` -
+`reusableFunction` should output "Hi World" to the dev console. -### Before Test -
+```js +assert(hiWorldWasLogged); +``` + +You should call `reusableFunction` after you define it. + +```js +assert(/^\s*reusableFunction\(\)\s*/m.test(code)); +``` + +# --seed-- + +## --before-user-code-- ```js var logOutput = ""; @@ -84,10 +73,7 @@ function uncapture() { capture(); ``` -
- -### After Test -
+## --after-user-code-- ```js uncapture(); @@ -99,13 +85,12 @@ if (typeof reusableFunction !== "function") { } ``` -
+## --seed-contents-- -
- -## Solution -
+```js +``` +# --solutions-- ```js function reusableFunction() { @@ -113,5 +98,3 @@ function reusableFunction() { } reusableFunction(); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-arguments-passed-in-the-wrong-order-when-calling-a-function.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-arguments-passed-in-the-wrong-order-when-calling-a-function.md index e83571e6e1..d6bccb7c97 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-arguments-passed-in-the-wrong-order-when-calling-a-function.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-arguments-passed-in-the-wrong-order-when-calling-a-function.md @@ -5,34 +5,31 @@ challengeType: 1 forumTopicId: 301184 --- -## Description -
+# --description-- + Continuing the discussion on calling functions, the next bug to watch out for is when a function's arguments are supplied in the incorrect order. If the arguments are different types, such as a function expecting an array and an integer, this will likely throw a runtime error. If the arguments are the same type (all integers, for example), then the logic of the code won't make sense. Make sure to supply all required arguments, in the proper order to avoid these issues. -
-## Instructions -
-The function raiseToPower raises a base to an exponent. Unfortunately, it's not called properly - fix the code so the value of power is the expected 8. -
+# --instructions-- -## Tests -
+The function `raiseToPower` raises a base to an exponent. Unfortunately, it's not called properly - fix the code so the value of `power` is the expected 8. -```yml -tests: - - text: Your code should fix the variable power so it equals 2 raised to the 3rd power, not 3 raised to the 2nd power. - testString: assert(power == 8); - - text: Your code should use the correct order of the arguments for the raiseToPower function call. - testString: assert(code.match(/raiseToPower\(\s*?base\s*?,\s*?exp\s*?\);/g)); +# --hints-- +Your code should fix the variable `power` so it equals 2 raised to the 3rd power, not 3 raised to the 2nd power. + +```js +assert(power == 8); ``` -
+Your code should use the correct order of the arguments for the `raiseToPower` function call. -## Challenge Seed -
+```js +assert(code.match(/raiseToPower\(\s*?base\s*?,\s*?exp\s*?\);/g)); +``` -
+# --seed-- + +## --seed-contents-- ```js function raiseToPower(b, e) { @@ -45,14 +42,7 @@ let power = raiseToPower(exp, base); console.log(power); ``` -
- - - -
- -## Solution -
+# --solutions-- ```js function raiseToPower(b, e) { @@ -64,5 +54,3 @@ let exp = 3; let power = raiseToPower(base, exp); console.log(power); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-missing-open-and-closing-parenthesis-after-a-function-call.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-missing-open-and-closing-parenthesis-after-a-function-call.md index 67d02564da..33ad2aeef9 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-missing-open-and-closing-parenthesis-after-a-function-call.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-missing-open-and-closing-parenthesis-after-a-function-call.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 301185 --- -## Description -
+# --description-- + When a function or method doesn't take any arguments, you may forget to include the (empty) opening and closing parentheses when calling it. Often times the result of a function call is saved in a variable for other use in your code. This error can be detected by logging variable values (or their types) to the console and seeing that one is set to a function reference, instead of the expected value the function returns. + The variables in the following example are different: ```js @@ -18,31 +19,27 @@ let varOne = myFunction; // set to equal a function let varTwo = myFunction(); // set to equal the string "You rock!" ``` -
+# --instructions-- -## Instructions -
-Fix the code so the variable result is set to the value returned from calling the function getNine. -
+Fix the code so the variable `result` is set to the value returned from calling the function `getNine`. -## Tests -
+# --hints-- -```yml -tests: - - text: Your code should fix the variable result so it is set to the number that the function getNine returns. - testString: assert(result == 9); - - text: Your code should call the getNine function. - testString: assert(code.match(/getNine\(\)/g).length == 2); +Your code should fix the variable `result` so it is set to the number that the function `getNine` returns. +```js +assert(result == 9); ``` -
+Your code should call the `getNine` function. -## Challenge Seed -
+```js +assert(code.match(/getNine\(\)/g).length == 2); +``` -
+# --seed-- + +## --seed-contents-- ```js function getNine() { @@ -55,14 +52,7 @@ let result = getNine; console.log(result); ``` -
- - - -
- -## Solution -
+# --solutions-- ```js function getNine() { @@ -74,5 +64,3 @@ function getNine() { let result = getNine(); console.log(result); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md index 11518d592e..3479e17dd2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md @@ -5,41 +5,51 @@ challengeType: 1 forumTopicId: 301186 --- -## Description -
-The console.log() and typeof methods are the two primary ways to check intermediate values and types of program output. Now it's time to get into the common forms that bugs take. One syntax-level issue that fast typers can commiserate with is the humble spelling error. +# --description-- + +The `console.log()` and `typeof` methods are the two primary ways to check intermediate values and types of program output. Now it's time to get into the common forms that bugs take. One syntax-level issue that fast typers can commiserate with is the humble spelling error. + Transposed, missing, or mis-capitalized characters in a variable or function name will have the browser looking for an object that doesn't exist - and complain in the form of a reference error. JavaScript variable and function names are case-sensitive. -
-## Instructions -
-Fix the two spelling errors in the code so the netWorkingCapital calculation works. -
+# --instructions-- -## Tests -
+Fix the two spelling errors in the code so the `netWorkingCapital` calculation works. -```yml -tests: - - text: 'Check the spelling of the two variables used in the netWorkingCapital calculation, the console output should show that "Net working capital is: 2".' - testString: 'assert(netWorkingCapital === 2);' - - text: There should be no instances of mis-spelled variables in the code. - testString: assert(!code.match(/recievables/g)); - - text: The receivables variable should be declared and used properly in the code. - testString: assert(code.match(/receivables/g).length == 2); - - text: There should be no instances of mis-spelled variables in the code. - testString: assert(!code.match(/payable;/g)); - - text: The payables variable should be declared and used properly in the code. - testString: assert(code.match(/payables/g).length == 2); +# --hints-- +Check the spelling of the two variables used in the netWorkingCapital calculation, the console output should show that "Net working capital is: 2". + +```js +assert(netWorkingCapital === 2); ``` -
+There should be no instances of mis-spelled variables in the code. -## Challenge Seed -
+```js +assert(!code.match(/recievables/g)); +``` -
+The `receivables` variable should be declared and used properly in the code. + +```js +assert(code.match(/receivables/g).length == 2); +``` + +There should be no instances of mis-spelled variables in the code. + +```js +assert(!code.match(/payable;/g)); +``` + +The `payables` variable should be declared and used properly in the code. + +```js +assert(code.match(/payables/g).length == 2); +``` + +# --seed-- + +## --seed-contents-- ```js let receivables = 10; @@ -48,14 +58,7 @@ let netWorkingCapital = recievables - payable; console.log(`Net working capital is: ${netWorkingCapital}`); ``` -
- - - -
- -## Solution -
+# --solutions-- ```js let receivables = 10; @@ -63,5 +66,3 @@ let payables = 8; let netWorkingCapital = receivables - payables; console.log(`Net working capital is: ${netWorkingCapital}`); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.md index 4732000573..4676522875 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.md @@ -5,10 +5,12 @@ challengeType: 1 forumTopicId: 301188 --- -## Description -
-JavaScript allows the use of both single (') and double (") quotes to declare a string. Deciding which one to use generally comes down to personal preference, with some exceptions. +# --description-- + +JavaScript allows the use of both single (`'`) and double (`"`) quotes to declare a string. Deciding which one to use generally comes down to personal preference, with some exceptions. + Having two choices is great when a string has contractions or another piece of text that's in quotes. Just be careful that you don't close the string too early, which causes a syntax error. + Here are some examples of mixing quotes: ```js @@ -19,56 +21,43 @@ const quoteInString = "Groucho Marx once said 'Quote me as saying I was mis-quot const uhOhGroucho = 'I've had a perfectly wonderful evening, but this wasn't it.'; ``` -Of course, it is okay to use only one style of quotes. You can escape the quotes inside the string by using the backslash (\\) escape character: +Of course, it is okay to use only one style of quotes. You can escape the quotes inside the string by using the backslash (`\`) escape character: ```js // Correct use of same quotes: const allSameQuotes = 'I\'ve had a perfectly wonderful evening, but this wasn\'t it.'; ``` -
+# --instructions-- -## Instructions -
-Fix the string so it either uses different quotes for the href value, or escape the existing ones. Keep the double quote marks around the entire string. -
+Fix the string so it either uses different quotes for the `href` value, or escape the existing ones. Keep the double quote marks around the entire string. -## Tests -
+# --hints-- -```yml -tests: - - text: Your code should fix the quotes around the href value "#Home" by either changing or escaping them. - testString: assert(code.match(//g)); - - text: Your code should keep the double quotes around the entire string. - testString: assert(code.match(/"

.*?<\/p>";/g)); +Your code should fix the quotes around the `href` value "#Home" by either changing or escaping them. +```js +assert(code.match(//g)); ``` -

+Your code should keep the double quotes around the entire string. -## Challenge Seed -
+```js +assert(code.match(/"

.*?<\/p>";/g)); +``` -

 - - - -
- -## Solution -
+# --solutions-- ```js let innerHtml = "

Click here to return home

"; console.log(innerHtml); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-off-by-one-errors-when-using-indexing.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-off-by-one-errors-when-using-indexing.md index 2a3ef9d968..bbd5cdafa0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-off-by-one-errors-when-using-indexing.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-off-by-one-errors-when-using-indexing.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 301189 --- -## Description -
-Off by one errors (sometimes called OBOE) crop up when you're trying to target a specific index of a string or array (to slice or access a segment), or when looping over the indices of them. JavaScript indexing starts at zero, not one, which means the last index is always one less than the length of the item. If you try to access an index equal to the length, the program may throw an "index out of range" reference error or print undefined. +# --description-- + +Off by one errors (sometimes called OBOE) crop up when you're trying to target a specific index of a string or array (to slice or access a segment), or when looping over the indices of them. JavaScript indexing starts at zero, not one, which means the last index is always one less than the length of the item. If you try to access an index equal to the length, the program may throw an "index out of range" reference error or print `undefined`. + When you use string or array methods that take index ranges as arguments, it helps to read the documentation and understand if they are inclusive (the item at the given index is part of what's returned) or not. Here are some examples of off by one errors: ```js @@ -27,35 +28,39 @@ for (let k = 0; k < len; k++) { } ``` -
+# --instructions-- -## Instructions -
Fix the two indexing errors in the following function so all the numbers 1 through 5 are printed to the console. -
-## Tests -
+# --hints-- -```yml -tests: - - text: Your code should set the initial condition of the loop so it starts at the first index. - testString: assert(code.match(/i\s*?=\s*?0\s*?;/g).length == 1); - - text: Your code should fix the initial condition of the loop so that the index starts at 0. - testString: assert(!code.match(/i\s?=\s*?1\s*?;/g)); - - text: Your code should set the terminal condition of the loop so it stops at the last index. - testString: assert(code.match(/i\s*?<\s*?len\s*?;/g).length == 1); - - text: Your code should fix the terminal condition of the loop so that it stops at 1 before the length. - testString: assert(!code.match(/i\s*?<=\s*?len;/g)); +Your code should set the initial condition of the loop so it starts at the first index. +```js +assert(code.match(/i\s*?=\s*?0\s*?;/g).length == 1); ``` -
+Your code should fix the initial condition of the loop so that the index starts at 0. -## Challenge Seed -
+```js +assert(!code.match(/i\s?=\s*?1\s*?;/g)); +``` -
+Your code should set the terminal condition of the loop so it stops at the last index. + +```js +assert(code.match(/i\s*?<\s*?len\s*?;/g).length == 1); +``` + +Your code should fix the terminal condition of the loop so that it stops at 1 before the length. + +```js +assert(!code.match(/i\s*?<=\s*?len;/g)); +``` + +# --seed-- + +## --seed-contents-- ```js function countToFive() { @@ -71,14 +76,7 @@ function countToFive() { countToFive(); ``` -
- - - -
- -## Solution -
+# --solutions-- ```js function countToFive() { @@ -93,5 +91,3 @@ function countToFive() { countToFive(); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-unclosed-parentheses-brackets-braces-and-quotes.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-unclosed-parentheses-brackets-braces-and-quotes.md index 49ea32f7ab..f1eb09e29e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-unclosed-parentheses-brackets-braces-and-quotes.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-unclosed-parentheses-brackets-braces-and-quotes.md @@ -5,35 +5,33 @@ challengeType: 1 forumTopicId: 301190 --- -## Description -
+# --description-- + Another syntax error to be aware of is that all opening parentheses, brackets, curly braces, and quotes have a closing pair. Forgetting a piece tends to happen when you're editing existing code and inserting items with one of the pair types. Also, take care when nesting code blocks into others, such as adding a callback function as an argument to a method. + One way to avoid this mistake is as soon as the opening character is typed, immediately include the closing match, then move the cursor back between them and continue coding. Fortunately, most modern code editors generate the second half of the pair automatically. -
-## Instructions -
+# --instructions-- + Fix the two pair errors in the code. -
-## Tests -
+# --hints-- -```yml -tests: - - text: Your code should fix the missing piece of the array. - testString: assert(code.match(/myArray\s*?=\s*?\[\s*?1\s*?,\s*?2\s*?,\s*?3\s*?\];/g)); - - text: 'Your code should fix the missing piece of the .reduce() method. The console output should show that "Sum of array values is: 6".' - testString: 'assert(arraySum === 6);' +Your code should fix the missing piece of the array. +```js +assert(code.match(/myArray\s*?=\s*?\[\s*?1\s*?,\s*?2\s*?,\s*?3\s*?\];/g)); ``` -
+Your code should fix the missing piece of the `.reduce()` method. The console output should show that "Sum of array values is: 6". -## Challenge Seed -
+```js +assert(arraySum === 6); +``` -
+# --seed-- + +## --seed-contents-- ```js let myArray = [1, 2, 3; @@ -41,19 +39,10 @@ let arraySum = myArray.reduce((previous, current => previous + current); console.log(`Sum of array values is: ${arraySum}`); ``` -
- - - -
- -## Solution -
+# --solutions-- ```js let myArray = [1, 2, 3]; let arraySum = myArray.reduce((previous, current) => previous + current); console.log(`Sum of array values is: ${arraySum}`); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.md index 8d0435e6b0..2baeca537a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.md @@ -5,12 +5,15 @@ challengeType: 1 forumTopicId: 301191 --- -## Description -
-Branching programs, i.e. ones that do different things if certain conditions are met, rely on if, else if, and else statements in JavaScript. The condition sometimes takes the form of testing whether a result is equal to a value. -This logic is spoken (in English, at least) as "if x equals y, then ..." which can literally translate into code using the =, or assignment operator. This leads to unexpected control flow in your program. -As covered in previous challenges, the assignment operator (=) in JavaScript assigns a value to a variable name. And the == and === operators check for equality (the triple === tests for strict equality, meaning both value and type are the same). -The code below assigns x to be 2, which evaluates as true. Almost every value on its own in JavaScript evaluates to true, except what are known as the "falsy" values: false, 0, "" (an empty string), NaN, undefined, and null. +# --description-- + +Branching programs, i.e. ones that do different things if certain conditions are met, rely on `if`, `else if`, and `else` statements in JavaScript. The condition sometimes takes the form of testing whether a result is equal to a value. + +This logic is spoken (in English, at least) as "if x equals y, then ..." which can literally translate into code using the `=`, or assignment operator. This leads to unexpected control flow in your program. + +As covered in previous challenges, the assignment operator (`=`) in JavaScript assigns a value to a variable name. And the `==` and `===` operators check for equality (the triple `===` tests for strict equality, meaning both value and type are the same). + +The code below assigns `x` to be 2, which evaluates as `true`. Almost every value on its own in JavaScript evaluates to `true`, except what are known as the "falsy" values: `false`, `0`, `""` (an empty string), `NaN`, `undefined`, and `null`. ```js let x = 1; @@ -22,31 +25,27 @@ if (x = y) { } ``` -
+# --instructions-- -## Instructions -
-Fix the condition so the program runs the right branch, and the appropriate value is assigned to result. -
+Fix the condition so the program runs the right branch, and the appropriate value is assigned to `result`. -## Tests -
+# --hints-- -```yml -tests: - - text: Your code should fix the condition so it checks for equality, instead of using assignment. - testString: assert(result == "Not equal!"); - - text: The condition should use either == or === to test for equality. - testString: assert(code.match(/x\s*?===?\s*?y/g)); +Your code should fix the condition so it checks for equality, instead of using assignment. +```js +assert(result == 'Not equal!'); ``` -
+The condition should use either `==` or `===` to test for equality. -## Challenge Seed -
+```js +assert(code.match(/x\s*?===?\s*?y/g)); +``` -
+# --seed-- + +## --seed-contents-- ```js let x = 7; @@ -62,14 +61,7 @@ if(x = y) { console.log(result); ``` -
- - - -
- -## Solution -
+# --solutions-- ```js let x = 7; @@ -84,5 +76,3 @@ if(x === y) { console.log(result); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.md index 3a95b7fc52..a859d6c7f8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301192 --- -## Description -
+# --description-- + The final topic is the dreaded infinite loop. Loops are great tools when you need your program to run a code block a certain number of times or until a condition is met, but they need a terminal condition that ends the looping. Infinite loops are likely to freeze or crash the browser, and cause general program execution mayhem, which no one wants. -There was an example of an infinite loop in the introduction to this section - it had no terminal condition to break out of the while loop inside loopy(). Do NOT call this function! + +There was an example of an infinite loop in the introduction to this section - it had no terminal condition to break out of the `while` loop inside `loopy()`. Do NOT call this function! ```js function loopy() { @@ -19,31 +20,28 @@ function loopy() { ``` It's the programmer's job to ensure that the terminal condition, which tells the program when to break out of the loop code, is eventually reached. One error is incrementing or decrementing a counter variable in the wrong direction from the terminal condition. Another one is accidentally resetting a counter or index variable within the loop code, instead of incrementing or decrementing it. -
-## Instructions -
-The myFunc() function contains an infinite loop because the terminal condition i != 4 will never evaluate to false (and break the looping) - i will increment by 2 each pass, and jump right over 4 since i is odd to start. Fix the comparison operator in the terminal condition so the loop only runs for i less than or equal to 4. -
+# --instructions-- -## Tests -
+The `myFunc()` function contains an infinite loop because the terminal condition `i != 4` will never evaluate to `false` (and break the looping) - `i` will increment by 2 each pass, and jump right over 4 since `i` is odd to start. Fix the comparison operator in the terminal condition so the loop only runs for `i` less than or equal to 4. -```yml -tests: - - text: Your code should change the comparison operator in the terminal condition (the middle part) of the for loop. - testString: assert(code.match(/i\s*?<=\s*?4;/g).length == 1); - - text: Your code should fix the comparison operator in the terminal condition of the loop. - testString: assert(!code.match(/i\s*?!=\s*?4;/g)); +# --hints-- +Your code should change the comparison operator in the terminal condition (the middle part) of the `for` loop. + +```js +assert(code.match(/i\s*?<=\s*?4;/g).length == 1); ``` -
+Your code should fix the comparison operator in the terminal condition of the loop. -## Challenge Seed -
+```js +assert(!code.match(/i\s*?!=\s*?4;/g)); +``` -
+# --seed-- + +## --seed-contents-- ```js function myFunc() { @@ -53,14 +51,7 @@ function myFunc() { } ``` -
- - - -
- -## Solution -
+# --solutions-- ```js function myFunc() { @@ -69,5 +60,3 @@ function myFunc() { } } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.md index 6e9dc56b6d..c282cd45ed 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.md @@ -5,41 +5,47 @@ challengeType: 1 forumTopicId: 301193 --- -## Description -
+# --description-- + You may have noticed that some freeCodeCamp JavaScript challenges include their own console. This console behaves a little differently than the browser console you used in the last challenge. + The following challenge is meant to highlight the main difference between the freeCodeCamp console and your browser console. -When you run ordinary JavaScript, the browser's console will display your console.log() statements the exact number of times it is called. -The freeCodeCamp console will print your console.log() statements a short time after the editor detects a change in the script, as well as during testing. + +When you run ordinary JavaScript, the browser's console will display your `console.log()` statements the exact number of times it is called. + +The freeCodeCamp console will print your `console.log()` statements a short time after the editor detects a change in the script, as well as during testing. + The freeCodeCamp console is cleared before the tests are run and, to avoid spam, only prints the logs during the first test (see the note below for exceptions). -If you would like to see every log for every test, run the tests, and open the browser console. If you prefer to use the browser console, and want it to mimic the freeCodeCamp console, place console.clear() before any other console calls, to clear the browser console. + +If you would like to see every log for every test, run the tests, and open the browser console. If you prefer to use the browser console, and want it to mimic the freeCodeCamp console, place `console.clear()` before any other `console` calls, to clear the browser console. **Note:** `console.log`s inside functions are printed to the freeCodeCamp console whenever those functions are called, this can help debugging functions that are called during testing. -
-## Instructions -
-First, use console.log to log the output variable. Then, use console.clear to clear the browser console. -
+# --instructions-- -## Tests -
+First, use `console.log` to log the `output` variable. Then, use `console.clear` to clear the browser console. -```yml -tests: - - text: You should use console.clear() to clear the browser console. - testString: assert(__helpers.removeWhiteSpace(__helpers.removeJSComments(code)).match(/console.clear\(\)/)); - - text: You should use console.log() to print the output variable. - testString: assert(__helpers.removeWhiteSpace(code).match(/console\.log\(output\)/)); +# --hints-- +You should use `console.clear()` to clear the browser console. + +```js +assert( + __helpers + .removeWhiteSpace(__helpers.removeJSComments(code)) + .match(/console.clear\(\)/) +); ``` -
+You should use `console.log()` to print the `output` variable. -## Challenge Seed -
+```js +assert(__helpers.removeWhiteSpace(code).match(/console\.log\(output\)/)); +``` -
+# --seed-- + +## --seed-contents-- ```js // Open your browser console. @@ -51,13 +57,7 @@ let output = "Get this to log once in the freeCodeCamp console and twice in the // Now, add console.clear() before your console.log() to clear the browser console, and pass the tests. ``` -
- -
- -## Solution -
- +# --solutions-- ```js // Open your browser console. @@ -70,5 +70,3 @@ console.log(output); // Now, add console.clear() before your console.log() to clear the browser console, and pass the tests. ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop.md index c3667519a9..70cb60863e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop.md @@ -5,37 +5,41 @@ challengeType: 1 forumTopicId: 301194 --- -## Description -
+# --description-- + Sometimes it's necessary to save information, increment counters, or re-set variables within a loop. A potential issue is when variables either should be reinitialized, and aren't, or vice versa. This is particularly dangerous if you accidentally reset the variable being used for the terminal condition, causing an infinite loop. -Printing variable values with each cycle of your loop by using console.log() can uncover buggy behavior related to resetting, or failing to reset a variable. -
-## Instructions -
-The following function is supposed to create a two-dimensional array with m rows and n columns of zeroes. Unfortunately, it's not producing the expected output because the row variable isn't being reinitialized (set back to an empty array) in the outer loop. Fix the code so it returns a correct 3x2 array of zeroes, which looks like [[0, 0], [0, 0], [0, 0]]. -
+Printing variable values with each cycle of your loop by using `console.log()` can uncover buggy behavior related to resetting, or failing to reset a variable. -## Tests -
+# --instructions-- -```yml -tests: - - text: Your code should set the matrix variable to an array holding 3 rows of 2 columns of zeroes each. - testString: assert(JSON.stringify(matrix) == "[[0,0],[0,0],[0,0]]"); - - text: The matrix variable should have 3 rows. - testString: assert(matrix.length == 3); - - text: The matrix variable should have 2 columns in each row. - testString: assert(matrix[0].length == 2 && matrix[1].length === 2 && matrix[2].length === 2); +The following function is supposed to create a two-dimensional array with `m` rows and `n` columns of zeroes. Unfortunately, it's not producing the expected output because the `row` variable isn't being reinitialized (set back to an empty array) in the outer loop. Fix the code so it returns a correct 3x2 array of zeroes, which looks like `[[0, 0], [0, 0], [0, 0]]`. +# --hints-- + +Your code should set the `matrix` variable to an array holding 3 rows of 2 columns of zeroes each. + +```js +assert(JSON.stringify(matrix) == '[[0,0],[0,0],[0,0]]'); ``` -
+The `matrix` variable should have 3 rows. -## Challenge Seed -
+```js +assert(matrix.length == 3); +``` -
+The `matrix` variable should have 2 columns in each row. + +```js +assert( + matrix[0].length == 2 && matrix[1].length === 2 && matrix[2].length === 2 +); +``` + +# --seed-- + +## --seed-contents-- ```js function zeroArray(m, n) { @@ -59,14 +63,7 @@ let matrix = zeroArray(3, 2); console.log(matrix); ``` -
- - - -
- -## Solution -
+# --solutions-- ```js function zeroArray(m, n) { @@ -89,5 +86,3 @@ function zeroArray(m, n) { let matrix = zeroArray(3, 2); console.log(matrix); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-the-javascript-console-to-check-the-value-of-a-variable.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-the-javascript-console-to-check-the-value-of-a-variable.md index 4a72d21d74..50318cb098 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-the-javascript-console-to-check-the-value-of-a-variable.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-the-javascript-console-to-check-the-value-of-a-variable.md @@ -5,36 +5,33 @@ challengeType: 1 forumTopicId: 18372 --- -## Description -
+# --description-- + Both Chrome and Firefox have excellent JavaScript consoles, also known as DevTools, for debugging your JavaScript. + You can find Developer tools in your Chrome's menu or Web Console in Firefox's menu. If you're using a different browser, or a mobile phone, we strongly recommend switching to desktop Firefox or Chrome. -The console.log() method, which "prints" the output of what's within its parentheses to the console, will likely be the most helpful debugging tool. Placing it at strategic points in your code can show you the intermediate values of variables. It's good practice to have an idea of what the output should be before looking at what it is. Having check points to see the status of your calculations throughout your code will help narrow down where the problem is. + +The `console.log()` method, which "prints" the output of what's within its parentheses to the console, will likely be the most helpful debugging tool. Placing it at strategic points in your code can show you the intermediate values of variables. It's good practice to have an idea of what the output should be before looking at what it is. Having check points to see the status of your calculations throughout your code will help narrow down where the problem is. + Here's an example to print 'Hello world!' to the console: -console.log('Hello world!'); -
-## Instructions -
-Use the console.log() method to print the value of the variable a where noted in the code. -
+`console.log('Hello world!');` -## Tests -
+# --instructions-- -```yml -tests: - - text: Your code should use console.log() to check the value of the variable a. - testString: assert(code.match(/console\.log\(a\)/g)); +Use the `console.log()` method to print the value of the variable `a` where noted in the code. +# --hints-- + +Your code should use `console.log()` to check the value of the variable `a`. + +```js +assert(code.match(/console\.log\(a\)/g)); ``` -
+# --seed-- -## Challenge Seed -
- -
+## --seed-contents-- ```js let a = 5; @@ -47,18 +44,8 @@ let sumAB = a + b; console.log(sumAB); ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js var a = 5; console.log(a); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md index 25497f96f7..eddddd078f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 18374 --- -## Description -
-You can use typeof to check the data structure, or type, of a variable. This is useful in debugging when working with multiple data types. If you think you're adding two numbers, but one is actually a string, the results can be unexpected. Type errors can lurk in calculations or function calls. Be careful especially when you're accessing and working with external data in the form of a JavaScript Object Notation (JSON) object. -Here are some examples using typeof: +# --description-- + +You can use `typeof` to check the data structure, or type, of a variable. This is useful in debugging when working with multiple data types. If you think you're adding two numbers, but one is actually a string, the results can be unexpected. Type errors can lurk in calculations or function calls. Be careful especially when you're accessing and working with external data in the form of a JavaScript Object Notation (JSON) object. + +Here are some examples using `typeof`: ```js console.log(typeof ""); // outputs "string" @@ -17,56 +18,46 @@ console.log(typeof []); // outputs "object" console.log(typeof {}); // outputs "object" ``` -JavaScript recognizes six primitive (immutable) data types: Boolean, Null, Undefined, Number, String, and Symbol (new with ES6) and one type for mutable items: Object. Note that in JavaScript, arrays are technically a type of object. -
+JavaScript recognizes six primitive (immutable) data types: `Boolean`, `Null`, `Undefined`, `Number`, `String`, and `Symbol` (new with ES6) and one type for mutable items: `Object`. Note that in JavaScript, arrays are technically a type of object. -## Instructions -
-Add two console.log() statements to check the typeof each of the two variables seven and three in the code. -
+# --instructions-- -## Tests -
+Add two `console.log()` statements to check the `typeof` each of the two variables `seven` and `three` in the code. -```yml -tests: - - text: Your code should use typeof in two console.log() statements to check the type of the variables. - testString: assert(code.match(/console\.log\(typeof[\( ].*\)?\)/g).length == 2); - - text: Your code should use typeof to check the type of the variable seven. - testString: assert(code.match(/typeof[\( ]seven\)?/g)); - - text: Your code should use typeof to check the type of the variable three. - testString: assert(code.match(/typeof[\( ]three\)?/g)); +# --hints-- +Your code should use `typeof` in two `console.log()` statements to check the type of the variables. + +```js +assert(code.match(/console\.log\(typeof[\( ].*\)?\)/g).length == 2); ``` -
+Your code should use `typeof` to check the type of the variable `seven`. -## Challenge Seed -
+```js +assert(code.match(/typeof[\( ]seven\)?/g)); +``` -
+Your code should use `typeof` to check the type of the variable `three`. + +```js +assert(code.match(/typeof[\( ]three\)?/g)); +``` + +# --seed-- + +## --seed-contents-- ```js let seven = 7; let three = "3"; console.log(seven + three); // Only change code below this line - ``` -
- - - -
- -## Solution -
- +# --solutions-- ```js let seven = 7;let three = "3";console.log(typeof seven); console.log(typeof three); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md index 5cb7c08f20..c137e6a349 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md @@ -5,10 +5,12 @@ challengeType: 1 forumTopicId: 301195 --- -## Description -
-When you declare a variable with the var keyword, it is declared globally, or locally if declared inside a function. -The let keyword behaves similarly, but with some extra features. When you declare a variable with the let keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression. +# --description-- + +When you declare a variable with the `var` keyword, it is declared globally, or locally if declared inside a function. + +The `let` keyword behaves similarly, but with some extra features. When you declare a variable with the `let` keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression. + For example: ```js @@ -22,7 +24,7 @@ console.log(i); // returns 3 ``` -With the var keyword, i is declared globally. So when i++ is executed, it updates the global variable. This code is similar to the following: +With the `var` keyword, `i` is declared globally. So when `i++` is executed, it updates the global variable. This code is similar to the following: ```js var numArray = []; @@ -36,7 +38,7 @@ console.log(i); // returns 3 ``` -This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the i variable. This is because the stored function will always refer to the value of the updated global i variable. +This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the `i` variable. This is because the stored function will always refer to the value of the updated global `i` variable. ```js var printNumTwo; @@ -51,7 +53,7 @@ console.log(printNumTwo()); // returns 3 ``` -As you can see, printNumTwo() prints 3 and not 2. This is because the value assigned to i was updated and the printNumTwo() returns the global i and not the value i had when the function was created in the for loop. The let keyword does not follow this behavior: +As you can see, `printNumTwo()` prints 3 and not 2. This is because the value assigned to `i` was updated and the `printNumTwo()` returns the global `i` and not the value `i` had when the function was created in the for loop. The `let` keyword does not follow this behavior: ```js let printNumTwo; @@ -68,35 +70,40 @@ console.log(i); // returns "i is not defined" ``` -i is not defined because it was not declared in the global scope. It is only declared within the for loop statement. printNumTwo() returned the correct value because three different i variables with unique values (0, 1, and 2) were created by the let keyword within the loop statement. -
+`i` is not defined because it was not declared in the global scope. It is only declared within the for loop statement. `printNumTwo()` returned the correct value because three different `i` variables with unique values (0, 1, and 2) were created by the `let` keyword within the loop statement. -## Instructions -
-Fix the code so that i declared in the if statement is a separate variable than i declared in the first line of the function. Be certain not to use the var keyword anywhere in your code. -This exercise is designed to illustrate the difference between how var and let keywords assign scope to the declared variable. When programming a function similar to the one used in this exercise, it is often better to use different variable names to avoid confusion. -
+# --instructions-- -## Tests -
+Fix the code so that `i` declared in the if statement is a separate variable than `i` declared in the first line of the function. Be certain not to use the `var` keyword anywhere in your code. -```yml -tests: - - text: var should not exist in code. - testString: getUserInput => assert(!getUserInput('index').match(/var/g)); - - text: The variable i declared in the if statement should equal "block scope". - testString: getUserInput => assert(getUserInput('index').match(/(i\s*=\s*).*\s*.*\s*.*\1('|")block\s*scope\2/g)); - - text: checkScope() should return "function scope" - testString: assert(checkScope() === "function scope"); +This exercise is designed to illustrate the difference between how `var` and `let` keywords assign scope to the declared variable. When programming a function similar to the one used in this exercise, it is often better to use different variable names to avoid confusion. +# --hints-- + +`var` should not exist in code. + +```js +(getUserInput) => assert(!getUserInput('index').match(/var/g)); ``` -
+The variable `i` declared in the if statement should equal "block scope". -## Challenge Seed -
+```js +(getUserInput) => + assert( + getUserInput('index').match(/(i\s*=\s*).*\s*.*\s*.*\1('|")block\s*scope\2/g) + ); +``` -
+`checkScope()` should return "function scope" + +```js +assert(checkScope() === 'function scope'); +``` + +# --seed-- + +## --seed-contents-- ```js function checkScope() { @@ -110,14 +117,7 @@ function checkScope() { } ``` -
- - - -
- -## Solution -
+# --solutions-- ```js function checkScope() { @@ -131,5 +131,3 @@ function checkScope() { return i; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md index b67a808b1e..adb9f2d80b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301196 --- -## Description -
-A promise has three states: pending, fulfilled, and rejected. The promise you created in the last challenge is forever stuck in the pending state because you did not add a way to complete the promise. The resolve and reject parameters given to the promise argument are used to do this. resolve is used when you want your promise to succeed, and reject is used when you want it to fail. These are methods that take an argument, as seen below. +# --description-- + +A promise has three states: `pending`, `fulfilled`, and `rejected`. The promise you created in the last challenge is forever stuck in the `pending` state because you did not add a way to complete the promise. The `resolve` and `reject` parameters given to the promise argument are used to do this. `resolve` is used when you want your promise to succeed, and `reject` is used when you want it to fail. These are methods that take an argument, as seen below. ```js const myPromise = new Promise((resolve, reject) => { @@ -20,50 +20,55 @@ const myPromise = new Promise((resolve, reject) => { ``` The example above uses strings for the argument of these functions, but it can really be anything. Often, it might be an object, that you would use data from, to put on your website or elsewhere. -
-## Instructions -
-Make the promise handle success and failure. If responseFromServer is true, call the resolve method to successfully complete the promise. Pass resolve a string with the value We got the data. If responseFromServer is false, use the reject method instead and pass it the string: Data not received. -
+# --instructions-- -## Tests -
+Make the promise handle success and failure. If `responseFromServer` is `true`, call the `resolve` method to successfully complete the promise. Pass `resolve` a string with the value `We got the data`. If `responseFromServer` is `false`, use the `reject` method instead and pass it the string: `Data not received`. -```yml -tests: - - text: resolve should be called with the expected string when the if condition is true. - testString: assert(__helpers.removeJSComments(code).match(/if\s*\(\s*responseFromServer\s*\)\s*{\s*resolve\s*\(\s*('|"|`)We got the data\1\s*\)(\s*|\s*;\s*)}/g)); - - text: reject should be called with the expected string when the if condition is false. - testString: assert(__helpers.removeJSComments(code).match(/}\s*else\s*{\s*reject\s*\(\s*('|"|`)Data not received\1\s*\)(\s*|\s*;\s*)}/g)); +# --hints-- +`resolve` should be called with the expected string when the `if` condition is `true`. + +```js +assert( + __helpers + .removeJSComments(code) + .match( + /if\s*\(\s*responseFromServer\s*\)\s*{\s*resolve\s*\(\s*('|"|`)We got the data\1\s*\)(\s*|\s*;\s*)}/g + ) +); ``` -
+`reject` should be called with the expected string when the `if` condition is `false`. -## Challenge Seed -
-
+```js +assert( + __helpers + .removeJSComments(code) + .match( + /}\s*else\s*{\s*reject\s*\(\s*('|"|`)Data not received\1\s*\)(\s*|\s*;\s*)}/g + ) +); +``` + +# --seed-- + +## --seed-contents-- ```js const makeServerRequest = new Promise((resolve, reject) => { // responseFromServer represents a response from a server let responseFromServer; - + if(responseFromServer) { // Change this line - } else { + } else { // Change this line } }); ``` -
- -
- -## Solution -
+# --solutions-- ```js const makeServerRequest = new Promise((resolve, reject) => { @@ -72,10 +77,8 @@ const makeServerRequest = new Promise((resolve, reject) => { if(responseFromServer) { resolve("We got the data"); - } else { + } else { reject("Data not received"); } }); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.md index 2064404147..3ebbcc41fc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301197 --- -## Description -
-A promise in JavaScript is exactly what it sounds like - you use it to make a promise to do something, usually asynchronously. When the task completes, you either fulfill your promise or fail to do so. Promise is a constructor function, so you need to use the new keyword to create one. It takes a function, as its argument, with two parameters - resolve and reject. These are methods used to determine the outcome of the promise. The syntax looks like this: +# --description-- + +A promise in JavaScript is exactly what it sounds like - you use it to make a promise to do something, usually asynchronously. When the task completes, you either fulfill your promise or fail to do so. `Promise` is a constructor function, so you need to use the `new` keyword to create one. It takes a function, as its argument, with two parameters - `resolve` and `reject`. These are methods used to determine the outcome of the promise. The syntax looks like this: ```js const myPromise = new Promise((resolve, reject) => { @@ -15,44 +15,39 @@ const myPromise = new Promise((resolve, reject) => { }); ``` -
+# --instructions-- -## Instructions -
-Create a new promise called makeServerRequest. Pass in a function with resolve and reject parameters to the constructor. -
+Create a new promise called `makeServerRequest`. Pass in a function with `resolve` and `reject` parameters to the constructor. -## Tests -
+# --hints-- -```yml -tests: - - text: You should assign a promise to a declared variable named makeServerRequest. - testString: assert(makeServerRequest instanceof Promise); - - text: Your promise should receive a function with resolve and reject as parameters. - testString: assert(code.match(/Promise\(\s*(function\s*\(\s*resolve\s*,\s*reject\s*\)\s*{|\(\s*resolve\s*,\s*reject\s*\)\s*=>\s*{)[^}]*}/g)); -``` - -
- -## Challenge Seed -
-
+You should assign a promise to a declared variable named `makeServerRequest`. ```js - +assert(makeServerRequest instanceof Promise); ``` -
-
+Your promise should receive a function with `resolve` and `reject` as parameters. -## Solution -
+```js +assert( + code.match( + /Promise\(\s*(function\s*\(\s*resolve\s*,\s*reject\s*\)\s*{|\(\s*resolve\s*,\s*reject\s*\)\s*=>\s*{)[^}]*}/g + ) +); +``` + +# --seed-- + +## --seed-contents-- + +```js +``` + +# --solutions-- ```js const makeServerRequest = new Promise((resolve, reject) => { }); ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.md index 6f16307c67..5ba95f4484 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.md @@ -5,40 +5,51 @@ challengeType: 6 forumTopicId: 301198 --- -## Description -
-JavaScript started with a small role to play on an otherwise mostly HTML web. Today, it’s huge, and some websites are built almost entirely with JavaScript. In order to make JavaScript more modular, clean, and maintainable; ES6 introduced a way to easily share code among JavaScript files. This involves exporting parts of a file for use in one or more other files, and importing the parts you need, where you need them. In order to take advantage of this functionality, you need to create a script in your HTML document with a type of module. Here’s an example: +# --description-- + +JavaScript started with a small role to play on an otherwise mostly HTML web. Today, it’s huge, and some websites are built almost entirely with JavaScript. In order to make JavaScript more modular, clean, and maintainable; ES6 introduced a way to easily share code among JavaScript files. This involves exporting parts of a file for use in one or more other files, and importing the parts you need, where you need them. In order to take advantage of this functionality, you need to create a script in your HTML document with a type of `module`. Here’s an example: ```html ``` -A script that uses this module type can now use the import and export features you will learn about in the upcoming challenges. -
+A script that uses this `module` type can now use the `import` and `export` features you will learn about in the upcoming challenges. -## Instructions -
-Add a script to the HTML document of type module and give it the source file of index.js -
+# --instructions-- -## Tests -
+Add a script to the HTML document of type `module` and give it the source file of `index.js` -```yml -tests: - - text: You should create a script tag. - testString: assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g)); - - text: Your script tag should be of type module. - testString: assert(code.match(/<\s*script\s+[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g)); - - text: Your script tag should have a src of index.js. - testString: assert(code.match(/<\s*script\s+[^s]*src\s*=\s*('|")index\.js\1[^>]*>\s*<\/\s*script\s*>/g)); +# --hints-- + +You should create a `script` tag. + +```js +assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g)); ``` -
+Your `script` tag should be of type `module`. -## Challenge Seed -
-
+```js +assert( + code.match( + /<\s*script\s+[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g + ) +); +``` + +Your `script` tag should have a `src` of `index.js`. + +```js +assert( + code.match( + /<\s*script\s+[^s]*src\s*=\s*('|")index\.js\1[^>]*>\s*<\/\s*script\s*>/g + ) +); +``` + +# --seed-- + +## --seed-contents-- ```html @@ -50,11 +61,7 @@ tests: ``` -
-
- -## Solution -
+# --solutions-- ```html @@ -63,5 +70,3 @@ tests: ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md index 31c180ee5b..ff0ddc1eb8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md @@ -5,11 +5,13 @@ challengeType: 1 forumTopicId: 301199 --- -## Description -
-In the export lesson, you learned about the syntax referred to as a named export. This allowed you to make multiple functions and variables available for use in other files. -There is another export syntax you need to know, known as export default. Usually you will use this syntax if only one value is being exported from a file. It is also used to create a fallback value for a file or module. -Below are examples using export default: +# --description-- + +In the `export` lesson, you learned about the syntax referred to as a named export. This allowed you to make multiple functions and variables available for use in other files. + +There is another `export` syntax you need to know, known as export default. Usually you will use this syntax if only one value is being exported from a file. It is also used to create a fallback value for a file or module. + +Below are examples using `export default`: ```js // named function @@ -23,28 +25,27 @@ export default function(x, y) { } ``` -Since export default is used to declare a fallback value for a module or file, you can only have one value be a default export in each module or file. Additionally, you cannot use export default with var, let, or const -
+Since `export default` is used to declare a fallback value for a module or file, you can only have one value be a default export in each module or file. Additionally, you cannot use `export default` with `var`, `let`, or `const` + +# --instructions-- -## Instructions -
The following function should be the fallback value for the module. Please add the necessary code to do so. -
-## Tests -
+# --hints-- -```yml -tests: - - text: Your code should use export fallback. - testString: assert(code.match(/export\s+default\s+function(\s+subtract\s*|\s*)\(\s*x,\s*y\s*\)\s*{/g)); +Your code should use `export` fallback. + +```js +assert( + code.match( + /export\s+default\s+function(\s+subtract\s*|\s*)\(\s*x,\s*y\s*\)\s*{/g + ) +); ``` -
+# --seed-- -## Challenge Seed -
-
+## --seed-contents-- ```js function subtract(x, y) { @@ -52,16 +53,10 @@ function subtract(x, y) { } ``` -
-
- -## Solution -
+# --solutions-- ```js export default function subtract(x, y) { return x - y; } ``` - -
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md index 9bef6bff4b..0c794b5f40 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md @@ -5,10 +5,12 @@ challengeType: 1 forumTopicId: 301200 --- -## Description -
+# --description-- + A new feature of ES6 is the template literal. This is a special type of string that makes creating complex strings easier. + Template literals allow you to create multi-line strings and to use string interpolation features to create strings. + Consider the code below: ```js @@ -27,16 +29,12 @@ console.log(greeting); // prints ``` -A lot of things happened there. -Firstly, the example uses backticks (`), not quotes (' or "), to wrap the string. -Secondly, notice that the string is multi-line, both in the code and the output. This saves inserting \n within strings. -The ${variable} syntax used above is a placeholder. Basically, you won't have to use concatenation with the + operator anymore. To add variables to strings, you just drop the variable in a template string and wrap it with ${ and }. Similarly, you can include other expressions in your string literal, for example ${a + b}. -This new way of creating strings gives you more flexibility to create robust strings. -
+A lot of things happened there. Firstly, the example uses backticks (`` ` ``), not quotes (`'` or `"`), to wrap the string. Secondly, notice that the string is multi-line, both in the code and the output. This saves inserting `\n` within strings. The `${variable}` syntax used above is a placeholder. Basically, you won't have to use concatenation with the `+` operator anymore. To add variables to strings, you just drop the variable in a template string and wrap it with `${` and `}`. Similarly, you can include other expressions in your string literal, for example `${a + b}`. This new way of creating strings gives you more flexibility to create robust strings. + +# --instructions-- + +Use template literal syntax with backticks to create an array of list element (`li`) strings. Each list element's text should be one of the array elements from the `failure` property on the `result` object and have a `class` attribute with the value `text-warning`. The `makeList` function should return the array of list item strings. -## Instructions -
-Use template literal syntax with backticks to create an array of list element (li) strings. Each list element's text should be one of the array elements from the failure property on the result object and have a class attribute with the value text-warning. The makeList function should return the array of list item strings. Use an iterator method (any kind of loop) to get the desired output (shown below). ```js @@ -47,29 +45,44 @@ Use an iterator method (any kind of loop) to get the desired output (shown below ] ``` -
+# --hints-- -## Tests -
+`failuresList` should be an array containing `result failure` messages. -```yml -tests: - - text: failuresList should be an array containing result failure messages. - testString: assert(typeof makeList(result.failure) === 'object' && failuresList.length === 3); - - text: failuresList should be equal to the specified output. - testString: assert(makeList(result.failure).every((v, i) => v === `
  • ${result.failure[i]}
    • ` || v === `
  • ${result.failure[i]}
    • `)); - - text: Template strings and expression interpolation should be used. - testString: getUserInput => assert(getUserInput('index').match(/(`.*\${.*}.*`)/)); - - text: An iterator should be used. - testString: getUserInput => assert(getUserInput('index').match(/for|map|reduce|forEach|while/)); +```js +assert( + typeof makeList(result.failure) === 'object' && failuresList.length === 3 +); ``` -
    +`failuresList` should be equal to the specified output. -## Challenge Seed -
    +```js +assert( + makeList(result.failure).every( + (v, i) => + v === `
  • ${result.failure[i]}
    • ` || + v === `
  • ${result.failure[i]}
    • ` + ) +); +``` -
    +Template strings and expression interpolation should be used. + +```js +(getUserInput) => assert(getUserInput('index').match(/(`.*\${.*}.*`)/)); +``` + +An iterator should be used. + +```js +(getUserInput) => + assert(getUserInput('index').match(/for|map|reduce|forEach|while/)); +``` + +# --seed-- + +## --seed-contents-- ```js const result = { @@ -88,14 +101,7 @@ function makeList(arr) { const failuresList = makeList(result.failure); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js const result = { @@ -109,5 +115,3 @@ function makeList(arr) { const failuresList = makeList(result.failure); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/declare-a-read-only-variable-with-the-const-keyword.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/declare-a-read-only-variable-with-the-const-keyword.md index c127d57b5f..3449ed6f13 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/declare-a-read-only-variable-with-the-const-keyword.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/declare-a-read-only-variable-with-the-const-keyword.md @@ -5,48 +5,55 @@ challengeType: 1 forumTopicId: 301201 --- -## Description -
    -The keyword let is not the only new way to declare variables. In ES6, you can also declare variables using the const keyword. -const has all the awesome features that let has, with the added bonus that variables declared using const are read-only. They are a constant value, which means that once a variable is assigned with const, it cannot be reassigned. +# --description-- + +The keyword `let` is not the only new way to declare variables. In ES6, you can also declare variables using the `const` keyword. + +`const` has all the awesome features that `let` has, with the added bonus that variables declared using `const` are read-only. They are a constant value, which means that once a variable is assigned with `const`, it cannot be reassigned. ```js const FAV_PET = "Cats"; FAV_PET = "Dogs"; // returns error ``` -As you can see, trying to reassign a variable declared with const will throw an error. You should always name variables you don't want to reassign using the const keyword. This helps when you accidentally attempt to reassign a variable that is meant to stay constant. A common practice when naming constants is to use all uppercase letters, with words separated by an underscore. - - Note: It is common for developers to use uppercase variable identifiers for immutable values and lowercase or camelCase for mutable values (objects and arrays). In a later challenge you will see an example of a lowercase variable identifier being used for an array. -
    +As you can see, trying to reassign a variable declared with `const` will throw an error. You should always name variables you don't want to reassign using the `const` keyword. This helps when you accidentally attempt to reassign a variable that is meant to stay constant. A common practice when naming constants is to use all uppercase letters, with words separated by an underscore. -## Instructions -
    -Change the code so that all variables are declared using let or const. Use let when you want the variable to change, and const when you want the variable to remain constant. Also, rename variables declared with const to conform to common practices, meaning constants should be in all caps. -
    +**Note:** It is common for developers to use uppercase variable identifiers for immutable values and lowercase or camelCase for mutable values (objects and arrays). In a later challenge you will see an example of a lowercase variable identifier being used for an array. -## Tests -
    +# --instructions-- -```yml -tests: - - text: var should not exist in your code. - testString: getUserInput => assert(!getUserInput('index').match(/var/g)); - - text: SENTENCE should be a constant variable declared with const. - testString: getUserInput => assert(getUserInput('index').match(/(const SENTENCE)/g)); - - text: i should be declared with let. - testString: getUserInput => assert(getUserInput('index').match(/(let i)/g)); - - text: console.log should be changed to print the SENTENCE variable. - testString: getUserInput => assert(getUserInput('index').match(/console\.log\(\s*SENTENCE\s*\)\s*;?/g)); +Change the code so that all variables are declared using `let` or `const`. Use `let` when you want the variable to change, and `const` when you want the variable to remain constant. Also, rename variables declared with `const` to conform to common practices, meaning constants should be in all caps. +# --hints-- + +`var` should not exist in your code. + +```js +(getUserInput) => assert(!getUserInput('index').match(/var/g)); ``` -
    +`SENTENCE` should be a constant variable declared with `const`. -## Challenge Seed -
    +```js +(getUserInput) => assert(getUserInput('index').match(/(const SENTENCE)/g)); +``` -
    +`i` should be declared with `let`. + +```js +(getUserInput) => assert(getUserInput('index').match(/(let i)/g)); +``` + +`console.log` should be changed to print the `SENTENCE` variable. + +```js +(getUserInput) => + assert(getUserInput('index').match(/console\.log\(\s*SENTENCE\s*\)\s*;?/g)); +``` + +# --seed-- + +## --seed-contents-- ```js function printManyTimes(str) { @@ -64,14 +71,7 @@ function printManyTimes(str) { printManyTimes("freeCodeCamp"); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js function printManyTimes(str) { @@ -84,5 +84,3 @@ function printManyTimes(str) { } printManyTimes("freeCodeCamp"); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/explore-differences-between-the-var-and-let-keywords.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/explore-differences-between-the-var-and-let-keywords.md index 9869fb777d..bd9ec17d96 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/explore-differences-between-the-var-and-let-keywords.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/explore-differences-between-the-var-and-let-keywords.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301202 --- -## Description -
    -One of the biggest problems with declaring variables with the var keyword is that you can overwrite variable declarations without an error. +# --description-- + +One of the biggest problems with declaring variables with the `var` keyword is that you can overwrite variable declarations without an error. ```js var camper = 'James'; @@ -16,53 +16,48 @@ console.log(camper); // logs 'David' ``` -As you can see in the code above, the camper variable is originally declared as James and then overridden to be David. -In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidentally overwrite a variable that you did not intend to overwrite. -Because this behavior does not throw an error, searching and fixing bugs becomes more difficult.
    -A new keyword called let was introduced in ES6 to solve this potential issue with the var keyword. -If you were to replace var with let in the variable declarations of the code above, the result would be an error. +As you can see in the code above, the `camper` variable is originally declared as `James` and then overridden to be `David`. In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidentally overwrite a variable that you did not intend to overwrite. Because this behavior does not throw an error, searching and fixing bugs becomes more difficult. +A new keyword called `let` was introduced in ES6 to solve this potential issue with the `var` keyword. If you were to replace `var` with `let` in the variable declarations of the code above, the result would be an error. ```js let camper = 'James'; let camper = 'David'; // throws an error ``` -This error can be seen in the console of your browser. -So unlike var, when using let, a variable with the same name can only be declared once. -Note the "use strict". This enables Strict Mode, which catches common coding mistakes and "unsafe" actions. For instance: +This error can be seen in the console of your browser. So unlike `var`, when using `let`, a variable with the same name can only be declared once. Note the `"use strict"`. This enables Strict Mode, which catches common coding mistakes and "unsafe" actions. For instance: ```js "use strict"; x = 3.14; // throws an error because x is not declared ``` -
    +# --instructions-- -## Instructions -
    -Update the code so it only uses the let keyword. -
    +Update the code so it only uses the `let` keyword. -## Tests -
    +# --hints-- -```yml -tests: - - text: var should not exist in the code. - testString: getUserInput => assert(!getUserInput('index').match(/var/g)); - - text: catName should be Oliver. - testString: assert(catName === "Oliver"); - - text: quote should be "Oliver says Meow!" - testString: assert(quote === "Oliver says Meow!"); +`var` should not exist in the code. +```js +(getUserInput) => assert(!getUserInput('index').match(/var/g)); ``` -
    +`catName` should be `Oliver`. -## Challenge Seed -
    +```js +assert(catName === 'Oliver'); +``` -
    +`quote` should be `"Oliver says Meow!"` + +```js +assert(quote === 'Oliver says Meow!'); +``` + +# --seed-- + +## --seed-contents-- ```js var catName; @@ -77,14 +72,7 @@ function catTalk() { catTalk(); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let catName; @@ -97,5 +85,3 @@ function catTalk() { } catTalk(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/handle-a-fulfilled-promise-with-then.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/handle-a-fulfilled-promise-with-then.md index 3f2cb45d01..b4c2a091db 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/handle-a-fulfilled-promise-with-then.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/handle-a-fulfilled-promise-with-then.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301203 --- -## Description -
    -Promises are most useful when you have a process that takes an unknown amount of time in your code (i.e. something asynchronous), often a server request. When you make a server request it takes some amount of time, and after it completes you usually want to do something with the response from the server. This can be achieved by using the then method. The then method is executed immediately after your promise is fulfilled with resolve. Here’s an example: +# --description-- + +Promises are most useful when you have a process that takes an unknown amount of time in your code (i.e. something asynchronous), often a server request. When you make a server request it takes some amount of time, and after it completes you usually want to do something with the response from the server. This can be achieved by using the `then` method. The `then` method is executed immediately after your promise is fulfilled with `resolve`. Here’s an example: ```js myPromise.then(result => { @@ -15,69 +15,72 @@ myPromise.then(result => { }); ``` -result comes from the argument given to the resolve method. -
    +`result` comes from the argument given to the `resolve` method. -## Instructions -
    -Add the then method to your promise. Use result as the parameter of its callback function and log result to the console. -
    +# --instructions-- -## Tests -
    +Add the `then` method to your promise. Use `result` as the parameter of its callback function and log `result` to the console. -```yml -tests: - - text: You should call the then method on the promise. - testString: assert(__helpers.removeWhiteSpace(code).match(/(makeServerRequest|\))\.then\(/g)); - - text: Your then method should have a callback function with result as its parameter. - testString: assert(resultIsParameter); - - text: You should log result to the console. - testString: assert(resultIsParameter && __helpers.removeWhiteSpace(code).match(/\.then\(.*?result.*?console.log\(result\).*?\)/)); -``` +# --hints-- -
    - -## Challenge Seed -
    -
    +You should call the `then` method on the promise. ```js -const makeServerRequest = new Promise((resolve, reject) => { - // responseFromServer is set to true to represent a successful response from a server - let responseFromServer = true; - - if(responseFromServer) { - resolve("We got the data"); - } else { - reject("Data not received"); - } -}); +assert( + __helpers.removeWhiteSpace(code).match(/(makeServerRequest|\))\.then\(/g) +); ``` -
    +Your `then` method should have a callback function with `result` as its parameter. -### After Test -
    +```js +assert(resultIsParameter); +``` + +You should log `result` to the console. + +```js +assert( + resultIsParameter && + __helpers + .removeWhiteSpace(code) + .match(/\.then\(.*?result.*?console.log\(result\).*?\)/) +); +``` + +# --seed-- + +## --after-user-code-- ```js const resultIsParameter = /\.then\((function\(result\){|result|\(result\)=>)/.test(__helpers.removeWhiteSpace(code)); ``` -
    -
    - -## Solution -
    +## --seed-contents-- ```js const makeServerRequest = new Promise((resolve, reject) => { // responseFromServer is set to true to represent a successful response from a server let responseFromServer = true; - + if(responseFromServer) { resolve("We got the data"); - } else { + } else { + reject("Data not received"); + } +}); +``` + +# --solutions-- + +```js +const makeServerRequest = new Promise((resolve, reject) => { + // responseFromServer is set to true to represent a successful response from a server + let responseFromServer = true; + + if(responseFromServer) { + resolve("We got the data"); + } else { reject("Data not received"); } }); @@ -86,5 +89,3 @@ makeServerRequest.then(result => { console.log(result); }); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.md index 5d3badadba..aac6ac88ce 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301204 --- -## Description -
    -catch is the method used when your promise has been rejected. It is executed immediately after a promise's reject method is called. Here’s the syntax: +# --description-- + +`catch` is the method used when your promise has been rejected. It is executed immediately after a promise's `reject` method is called. Here’s the syntax: ```js myPromise.catch(error => { @@ -15,41 +15,57 @@ myPromise.catch(error => { }); ``` -error is the argument passed in to the reject method. -
    +`error` is the argument passed in to the `reject` method. -## Instructions -
    -Add the catch method to your promise. Use error as the parameter of its callback function and log error to the console. -
    +# --instructions-- -## Tests -
    +Add the `catch` method to your promise. Use `error` as the parameter of its callback function and log `error` to the console. -```yml -tests: - - text: You should call the catch method on the promise. - testString: assert(__helpers.removeWhiteSpace(code).match(/(makeServerRequest|\))\.catch\(/g)); - - text: Your catch method should have a callback function with error as its parameter. - testString: assert(errorIsParameter); - - text: You should log error to the console. - testString: assert(errorIsParameter && __helpers.removeWhiteSpace(code).match(/\.catch\(.*?error.*?console.log\(error\).*?\)/)); +# --hints-- + +You should call the `catch` method on the promise. + +```js +assert( + __helpers.removeWhiteSpace(code).match(/(makeServerRequest|\))\.catch\(/g) +); ``` -
    +Your `catch` method should have a callback function with `error` as its parameter. -## Challenge Seed -
    -
    +```js +assert(errorIsParameter); +``` + +You should log `error` to the console. + +```js +assert( + errorIsParameter && + __helpers + .removeWhiteSpace(code) + .match(/\.catch\(.*?error.*?console.log\(error\).*?\)/) +); +``` + +# --seed-- + +## --after-user-code-- + +```js +const errorIsParameter = /\.catch\((function\(error\){|error|\(error\)=>)/.test(__helpers.removeWhiteSpace(code)); +``` + +## --seed-contents-- ```js const makeServerRequest = new Promise((resolve, reject) => { // responseFromServer is set to false to represent an unsuccessful response from a server let responseFromServer = false; - + if(responseFromServer) { resolve("We got the data"); - } else { + } else { reject("Data not received"); } }); @@ -59,30 +75,16 @@ makeServerRequest.then(result => { }); ``` -
    - -### After Test -
    - -```js -const errorIsParameter = /\.catch\((function\(error\){|error|\(error\)=>)/.test(__helpers.removeWhiteSpace(code)); -``` - -
    - -
    - -## Solution -
    +# --solutions-- ```js const makeServerRequest = new Promise((resolve, reject) => { // responseFromServer is set to false to represent an unsuccessful response from a server let responseFromServer = false; - + if(responseFromServer) { resolve("We got the data"); - } else { + } else { reject("Data not received"); } }); @@ -95,5 +97,3 @@ makeServerRequest.catch(error => { console.log(error); }); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.md index cf04c52cf8..9731423ebf 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.md @@ -5,36 +5,31 @@ challengeType: 1 forumTopicId: 301205 --- -## Description -
    -In the last challenge, you learned about export default and its uses. To import a default export, you need to use a different import syntax. In the following example, add is the default export of the math_functions.js file. Here is how to import it: +# --description-- + +In the last challenge, you learned about `export default` and its uses. To import a default export, you need to use a different `import` syntax. In the following example, `add` is the default export of the `math_functions.js` file. Here is how to import it: ```js import add from "./math_functions.js"; ``` -The syntax differs in one key place. The imported value, add, is not surrounded by curly braces ({}). add here is simply a variable name for whatever the default export of the math_functions.js file is. You can use any name here when importing a default. -
    +The syntax differs in one key place. The imported value, `add`, is not surrounded by curly braces (`{}`). `add` here is simply a variable name for whatever the default export of the `math_functions.js` file is. You can use any name here when importing a default. -## Instructions -
    -In the following code, import the default export from the math_functions.js file, found in the same directory as this file. Give the import the name subtract. -
    +# --instructions-- -## Tests -
    +In the following code, import the default export from the `math_functions.js` file, found in the same directory as this file. Give the import the name `subtract`. -```yml -tests: - - text: You should properly import subtract from math_functions.js. - testString: assert(code.match(/import\s+subtract\s+from\s+('|")\.\/math_functions\.js\1/g)); +# --hints-- + +You should properly import `subtract` from `math_functions.js`. + +```js +assert(code.match(/import\s+subtract\s+from\s+('|")\.\/math_functions\.js\1/g)); ``` -
    +# --seed-- -## Challenge Seed -
    -
    +## --seed-contents-- ```js @@ -43,16 +38,10 @@ tests: subtract(7,4); ``` -
    -
    - -## Solution -
    +# --solutions-- ```js import subtract from "./math_functions.js"; subtract(7,4); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md index 679a285acd..3880334982 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md @@ -5,11 +5,13 @@ challengeType: 1 forumTopicId: 301206 --- -## Description -
    -The const declaration has many use cases in modern JavaScript. -Some developers prefer to assign all their variables using const by default, unless they know they will need to reassign the value. Only in that case, they use let. -However, it is important to understand that objects (including arrays and functions) assigned to a variable using const are still mutable. Using the const declaration only prevents reassignment of the variable identifier. +# --description-- + +The `const` declaration has many use cases in modern JavaScript. + +Some developers prefer to assign all their variables using `const` by default, unless they know they will need to reassign the value. Only in that case, they use `let`. + +However, it is important to understand that objects (including arrays and functions) assigned to a variable using `const` are still mutable. Using the `const` declaration only prevents reassignment of the variable identifier. ```js const s = [5, 6, 7]; @@ -18,36 +20,46 @@ s[2] = 45; // works just as it would with an array declared with var or let console.log(s); // returns [5, 6, 45] ``` -As you can see, you can mutate the object [5, 6, 7] itself and the variable s will still point to the altered array [5, 6, 45]. Like all arrays, the array elements in s are mutable, but because const was used, you cannot use the variable identifier s to point to a different array using the assignment operator. -
    +As you can see, you can mutate the object `[5, 6, 7]` itself and the variable `s` will still point to the altered array `[5, 6, 45]`. Like all arrays, the array elements in `s` are mutable, but because `const` was used, you cannot use the variable identifier `s` to point to a different array using the assignment operator. -## Instructions -
    -An array is declared as const s = [5, 7, 2]. Change the array to [2, 5, 7] using various element assignments. -
    +# --instructions-- -## Tests -
    +An array is declared as `const s = [5, 7, 2]`. Change the array to `[2, 5, 7]` using various element assignments. -```yml -tests: - - text: You should not replace const keyword. - testString: getUserInput => assert(getUserInput('index').match(/const/g)); - - text: s should be a constant variable (by using const). - testString: getUserInput => assert(getUserInput('index').match(/const\s+s/g)); - - text: You should not change the original array declaration. - testString: getUserInput => assert(getUserInput('index').match(/const\s+s\s*=\s*\[\s*5\s*,\s*7\s*,\s*2\s*\]\s*;?/g)); - - text: s should be equal to [2, 5, 7]. - testString: assert.deepEqual(s, [2, 5, 7]); +# --hints-- +You should not replace `const` keyword. + +```js +(getUserInput) => assert(getUserInput('index').match(/const/g)); ``` -
    +`s` should be a constant variable (by using `const`). -## Challenge Seed -
    +```js +(getUserInput) => assert(getUserInput('index').match(/const\s+s/g)); +``` -
    +You should not change the original array declaration. + +```js +(getUserInput) => + assert( + getUserInput('index').match( + /const\s+s\s*=\s*\[\s*5\s*,\s*7\s*,\s*2\s*\]\s*;?/g + ) + ); +``` + +`s` should be equal to `[2, 5, 7]`. + +```js +assert.deepEqual(s, [2, 5, 7]); +``` + +# --seed-- + +## --seed-contents-- ```js const s = [5, 7, 2]; @@ -61,14 +73,7 @@ function editInPlace() { editInPlace(); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js const s = [5, 7, 2]; @@ -79,5 +84,3 @@ function editInPlace() { } editInPlace(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/prevent-object-mutation.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/prevent-object-mutation.md index 7eece62244..8c6ac79d4d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/prevent-object-mutation.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/prevent-object-mutation.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 301207 --- -## Description -
    -As seen in the previous challenge, const declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function Object.freeze to prevent data mutation. +# --description-- + +As seen in the previous challenge, `const` declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function `Object.freeze` to prevent data mutation. + Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error. ```js @@ -22,35 +23,45 @@ console.log(obj); // { name: "FreeCodeCamp", review:"Awesome"} ``` -
    +# --instructions-- -## Instructions -
    -In this challenge you are going to use Object.freeze to prevent mathematical constants from changing. You need to freeze the MATH_CONSTANTS object so that no one is able to alter the value of PI, add, or delete properties. -
    +In this challenge you are going to use `Object.freeze` to prevent mathematical constants from changing. You need to freeze the `MATH_CONSTANTS` object so that no one is able to alter the value of `PI`, add, or delete properties. -## Tests -
    +# --hints-- -```yml -tests: - - text: You should not replace const keyword. - testString: getUserInput => assert(getUserInput('index').match(/const/g)); - - text: MATH_CONSTANTS should be a constant variable (by using const). - testString: getUserInput => assert(getUserInput('index').match(/const\s+MATH_CONSTANTS/g)); - - text: You should not change original MATH_CONSTANTS. - testString: getUserInput => assert(getUserInput('index').match(/const\s+MATH_CONSTANTS\s+=\s+{\s+PI:\s+3.14\s+};/g)); - - text: PI should equal 3.14. - testString: assert(PI === 3.14); +You should not replace `const` keyword. +```js +(getUserInput) => assert(getUserInput('index').match(/const/g)); ``` -
    +`MATH_CONSTANTS` should be a constant variable (by using `const`). -## Challenge Seed -
    +```js +(getUserInput) => + assert(getUserInput('index').match(/const\s+MATH_CONSTANTS/g)); +``` -
    +You should not change original `MATH_CONSTANTS`. + +```js +(getUserInput) => + assert( + getUserInput('index').match( + /const\s+MATH_CONSTANTS\s+=\s+{\s+PI:\s+3.14\s+};/g + ) + ); +``` + +`PI` should equal `3.14`. + +```js +assert(PI === 3.14); +``` + +# --seed-- + +## --seed-contents-- ```js function freezeObj() { @@ -71,14 +82,7 @@ function freezeObj() { const PI = freezeObj(); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js function freezeObj() { @@ -96,5 +100,3 @@ function freezeObj() { } const PI = freezeObj(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.md index f4a0d68c0a..6d9b28067f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.md @@ -5,45 +5,51 @@ challengeType: 1 forumTopicId: 301208 --- -## Description -
    -import allows you to choose which parts of a file or module to load. In the previous lesson, the examples exported add from the math_functions.js file. Here's how you can import it to use in another file: +# --description-- + +`import` allows you to choose which parts of a file or module to load. In the previous lesson, the examples exported `add` from the `math_functions.js` file. Here's how you can import it to use in another file: ```js import { add } from './math_functions.js'; ``` -Here, import will find add in math_functions.js, import just that function for you to use, and ignore the rest. The ./ tells the import to look for the math_functions.js file in the same folder as the current file. The relative file path (./) and file extension (.js) are required when using import in this way. +Here, `import` will find `add` in `math_functions.js`, import just that function for you to use, and ignore the rest. The `./` tells the import to look for the `math_functions.js` file in the same folder as the current file. The relative file path (`./`) and file extension (`.js`) are required when using import in this way. -You can import more than one item from the file by adding them in the import statement like this: +You can import more than one item from the file by adding them in the `import` statement like this: ```js import { add, subtract } from './math_functions.js'; ``` -
    +# --instructions-- -## Instructions -
    -Add the appropriate import statement that will allow the current file to use the uppercaseString and lowercaseString functions you exported in the previous lesson. These functions are in a file called string_functions.js, which is in the same directory as the current file. -
    +Add the appropriate `import` statement that will allow the current file to use the `uppercaseString` and `lowercaseString` functions you exported in the previous lesson. These functions are in a file called `string_functions.js`, which is in the same directory as the current file. -## Tests -
    +# --hints-- -```yml -tests: - - text: You should properly import uppercaseString. - testString: assert(code.match(/import\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g)); - - text: You should properly import lowercaseString. - testString: assert(code.match(/import\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g)); +You should properly import `uppercaseString`. + +```js +assert( + code.match( + /import\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g + ) +); ``` -
    +You should properly import `lowercaseString`. -## Challenge Seed -
    -
    +```js +assert( + code.match( + /import\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g + ) +); +``` + +# --seed-- + +## --seed-contents-- ```js @@ -53,11 +59,7 @@ uppercaseString("hello"); lowercaseString("WORLD!"); ``` -
    -
    - -## Solution -
    +# --solutions-- ```js import { uppercaseString, lowercaseString } from './string_functions.js'; @@ -65,5 +67,3 @@ import { uppercaseString, lowercaseString } from './string_functions.js'; uppercaseString("hello"); lowercaseString("WORLD!"); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions.md index 555f79b8c1..4b676210cc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 301209 --- -## Description -
    +# --description-- + In order to help us create more flexible functions, ES6 introduces default parameters for functions. + Check out this code: ```js @@ -17,34 +18,35 @@ console.log(greeting("John")); // Hello John console.log(greeting()); // Hello Anonymous ``` -The default parameter kicks in when the argument is not specified (it is undefined). As you can see in the example above, the parameter name will receive its default value "Anonymous" when you do not provide a value for the parameter. You can add default values for as many parameters as you want. -
    +The default parameter kicks in when the argument is not specified (it is undefined). As you can see in the example above, the parameter `name` will receive its default value `"Anonymous"` when you do not provide a value for the parameter. You can add default values for as many parameters as you want. -## Instructions -
    -Modify the function increment by adding default parameters so that it will add 1 to number if value is not specified. -
    +# --instructions-- -## Tests -
    +Modify the function `increment` by adding default parameters so that it will add 1 to `number` if `value` is not specified. -```yml -tests: - - text: The result of increment(5, 2) should be 7. - testString: assert(increment(5, 2) === 7); - - text: The result of increment(5) should be 6. - testString: assert(increment(5) === 6); - - text: A default parameter value of 1 should be used for value. - testString: assert(code.match(/value\s*=\s*1/g)); +# --hints-- +The result of `increment(5, 2)` should be `7`. + +```js +assert(increment(5, 2) === 7); ``` -
    +The result of `increment(5)` should be `6`. -## Challenge Seed -
    +```js +assert(increment(5) === 6); +``` -
    +A default parameter value of `1` should be used for `value`. + +```js +assert(code.match(/value\s*=\s*1/g)); +``` + +# --seed-- + +## --seed-contents-- ```js // Only change code below this line @@ -52,17 +54,8 @@ const increment = (number, value) => number + value; // Only change code above this line ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js const increment = (number, value = 1) => number + value; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.md index a1f22d84dd..87e4a6ae4f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.md @@ -5,56 +5,49 @@ challengeType: 1 forumTopicId: 301210 --- -## Description -
    -Suppose you have a file and you wish to import all of its contents into the current file. This can be done with the import * as syntax. Here's an example where the contents of a file named math_functions.js are imported into a file in the same directory: +# --description-- + +Suppose you have a file and you wish to import all of its contents into the current file. This can be done with the `import * as` syntax. Here's an example where the contents of a file named `math_functions.js` are imported into a file in the same directory: ```js import * as myMathModule from "./math_functions.js"; ``` -The above import statement will create an object called myMathModule. This is just a variable name, you can name it anything. The object will contain all of the exports from math_functions.js in it, so you can access the functions like you would any other object property. Here's how you can use the add and subtract functions that were imported: +The above `import` statement will create an object called `myMathModule`. This is just a variable name, you can name it anything. The object will contain all of the exports from `math_functions.js` in it, so you can access the functions like you would any other object property. Here's how you can use the `add` and `subtract` functions that were imported: ```js myMathModule.add(2,3); myMathModule.subtract(5,3); ``` -
    +# --instructions-- -## Instructions -
    -The code in this file requires the contents of the file: string_functions.js, that is in the same directory as the current file. Use the import * as syntax to import everything from the file into an object called stringFunctions. -
    +The code in this file requires the contents of the file: `string_functions.js`, that is in the same directory as the current file. Use the `import * as` syntax to import everything from the file into an object called `stringFunctions`. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your code should properly use import * as syntax. - testString: assert(code.match(/import\s*\*\s*as\s+stringFunctions\s+from\s*('|")\.\/string_functions\.js\1/g)); -``` - -
    - -## Challenge Seed -
    -
    +Your code should properly use `import * as` syntax. ```js +assert( + code.match( + /import\s*\*\s*as\s+stringFunctions\s+from\s*('|")\.\/string_functions\.js\1/g + ) +); +``` +# --seed-- + +## --seed-contents-- + +```js // Only change code above this line stringFunctions.uppercaseString("hello"); stringFunctions.lowercaseString("WORLD!"); ``` -
    -
    - -## Solution -
    +# --solutions-- ```js import * as stringFunctions from "./string_functions.js"; @@ -63,5 +56,3 @@ import * as stringFunctions from "./string_functions.js"; stringFunctions.uppercaseString("hello"); stringFunctions.lowercaseString("WORLD!"); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.md index 61a5cc5a26..bdd9d1a866 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 301211 --- -## Description -
    +# --description-- + In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else. + To achieve this, we often use the following syntax: ```js @@ -17,7 +18,7 @@ const myFunc = function() { } ``` -ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use arrow function syntax: +ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use **arrow function syntax**: ```js const myFunc = () => { @@ -26,44 +27,53 @@ const myFunc = () => { } ``` -When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword return as well as the brackets surrounding the code. This helps simplify smaller functions into one-line statements: +When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword `return` as well as the brackets surrounding the code. This helps simplify smaller functions into one-line statements: ```js const myFunc = () => "value"; ``` -This code will still return the string value by default. -
    +This code will still return the string `value` by default. -## Instructions -
    -Rewrite the function assigned to the variable magic which returns a new Date() to use arrow function syntax. Also, make sure nothing is defined using the keyword var. -
    +# --instructions-- -## Tests -
    +Rewrite the function assigned to the variable `magic` which returns a `new Date()` to use arrow function syntax. Also, make sure nothing is defined using the keyword `var`. -```yml -tests: - - text: User should replace var keyword. - testString: getUserInput => assert(!getUserInput('index').match(/var/g)); - - text: magic should be a constant variable (by using const). - testString: getUserInput => assert(getUserInput('index').match(/const\s+magic/g)); - - text: magic should be a function. - testString: assert(typeof magic === 'function'); - - text: magic() should return correct date. - testString: assert(magic().setHours(0,0,0,0) === new Date().setHours(0,0,0,0)); - - text: function keyword should not be used. - testString: getUserInput => assert(!getUserInput('index').match(/function/g)); +# --hints-- +User should replace `var` keyword. + +```js +(getUserInput) => assert(!getUserInput('index').match(/var/g)); ``` -
    +`magic` should be a constant variable (by using `const`). -## Challenge Seed -
    +```js +(getUserInput) => assert(getUserInput('index').match(/const\s+magic/g)); +``` -
    +`magic` should be a `function`. + +```js +assert(typeof magic === 'function'); +``` + +`magic()` should return correct date. + +```js +assert(magic().setHours(0, 0, 0, 0) === new Date().setHours(0, 0, 0, 0)); +``` + +`function` keyword should not be used. + +```js +(getUserInput) => assert(!getUserInput('index').match(/function/g)); +``` + +# --seed-- + +## --seed-contents-- ```js var magic = function() { @@ -71,19 +81,10 @@ var magic = function() { }; ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js const magic = () => { return new Date(); }; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md index ed67216604..6982511976 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md @@ -5,11 +5,13 @@ challengeType: 1 forumTopicId: 301212 --- -## Description -
    +# --description-- + ES6 provides a new syntax to create objects, using the class keyword. -It should be noted that the class syntax is just syntax, and not a full-fledged class-based implementation of an object-oriented paradigm, unlike in languages such as Java, Python, Ruby, etc. -In ES5, we usually define a constructor function and use the new keyword to instantiate an object. + +It should be noted that the `class` syntax is just syntax, and not a full-fledged class-based implementation of an object-oriented paradigm, unlike in languages such as Java, Python, Ruby, etc. + +In ES5, we usually define a constructor function and use the `new` keyword to instantiate an object. ```js var SpaceShuttle = function(targetPlanet){ @@ -18,7 +20,7 @@ var SpaceShuttle = function(targetPlanet){ var zeus = new SpaceShuttle('Jupiter'); ``` -The class syntax simply replaces the constructor function creation: +The `class` syntax simply replaces the constructor function creation: ```js class SpaceShuttle { @@ -29,40 +31,52 @@ class SpaceShuttle { const zeus = new SpaceShuttle('Jupiter'); ``` -It should be noted that the class keyword declares a new function, to which a constructor is added. This constructor is invoked when new is called to create a new object.
    -Notes:
      -
    • UpperCamelCase should be used by convention for ES6 class names, as in SpaceShuttle used above.
      • -
    • The constructor method is a special method for creating and initializing an object created with a class. You will learn more about it in the Object Oriented Programming section of the JavaScript Algorithms And Data Structures Certification.
    -
    +It should be noted that the `class` keyword declares a new function, to which a constructor is added. This constructor is invoked when `new` is called to create a new object. +**Notes:** -## Instructions -
    -Use the class keyword and write a constructor to create the Vegetable class. -The Vegetable class allows you to create a vegetable object with a property name that gets passed to the constructor. -
    +- UpperCamelCase should be used by convention for ES6 class names, as in `SpaceShuttle` used above. +- The constructor method is a special method for creating and initializing an object created with a class. You will learn more about it in the Object Oriented Programming section of the JavaScript Algorithms And Data Structures Certification. -## Tests -
    +# --instructions-- -```yml -tests: - - text: Vegetable should be a class with a defined constructor method. - testString: assert(typeof Vegetable === 'function' && typeof Vegetable.constructor === 'function'); - - text: class keyword should be used. - testString: assert(code.match(/class/g)); - - text: Vegetable should be able to be instantiated. - testString: assert(() => {const a = new Vegetable("apple"); return typeof a === 'object';}); - - text: carrot.name should return carrot. - testString: assert(carrot.name=='carrot'); +Use the `class` keyword and write a constructor to create the `Vegetable` class. +The `Vegetable` class allows you to create a vegetable object with a property `name` that gets passed to the constructor. + +# --hints-- + +`Vegetable` should be a `class` with a defined `constructor` method. + +```js +assert( + typeof Vegetable === 'function' && typeof Vegetable.constructor === 'function' +); ``` -
    +`class` keyword should be used. -## Challenge Seed -
    +```js +assert(code.match(/class/g)); +``` -
    +`Vegetable` should be able to be instantiated. + +```js +assert(() => { + const a = new Vegetable('apple'); + return typeof a === 'object'; +}); +``` + +`carrot.name` should return `carrot`. + +```js +assert(carrot.name == 'carrot'); +``` + +# --seed-- + +## --seed-contents-- ```js // Only change code below this line @@ -73,14 +87,7 @@ const carrot = new Vegetable('carrot'); console.log(carrot.name); // Should display 'carrot' ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js class Vegetable { @@ -90,5 +97,3 @@ class Vegetable { } const carrot = new Vegetable('carrot'); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays.md index 98f31c4779..94f22369ab 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays.md @@ -5,10 +5,12 @@ challengeType: 1 forumTopicId: 301213 --- -## Description -
    +# --description-- + ES6 makes destructuring arrays as easy as destructuring objects. + One key difference between the spread operator and array destructuring is that the spread operator unpacks all contents of an array into a comma-separated list. Consequently, you cannot pick or choose which elements you want to assign to variables. + Destructuring an array lets us do exactly that: ```js @@ -16,60 +18,49 @@ const [a, b] = [1, 2, 3, 4, 5, 6]; console.log(a, b); // 1, 2 ``` -The variable a is assigned the first value of the array, and b is assigned the second value of the array. -We can also access the value at any index in an array with destructuring by using commas to reach the desired index: +The variable `a` is assigned the first value of the array, and `b` is assigned the second value of the array. We can also access the value at any index in an array with destructuring by using commas to reach the desired index: ```js const [a, b,,, c] = [1, 2, 3, 4, 5, 6]; console.log(a, b, c); // 1, 2, 5 ``` -
    +# --instructions-- -## Instructions -
    -Use destructuring assignment to swap the values of a and b so that a receives the value stored in b, and b receives the value stored in a. -
    +Use destructuring assignment to swap the values of `a` and `b` so that `a` receives the value stored in `b`, and `b` receives the value stored in `a`. -## Tests -
    +# --hints-- -```yml -tests: - - text: Value of a should be 6, after swapping. - testString: assert(a === 6); - - text: Value of b should be 8, after swapping. - testString: assert(b === 8); - - text: You should use array destructuring to swap a and b. - testString: assert(/\[\s*(\w)\s*,\s*(\w)\s*\]\s*=\s*\[\s*\2\s*,\s*\1\s*\]/g.test(code)); +Value of `a` should be 6, after swapping. +```js +assert(a === 6); ``` -
    +Value of `b` should be 8, after swapping. -## Challenge Seed -
    +```js +assert(b === 8); +``` -
    +You should use array destructuring to swap a and b. + +```js +assert(/\[\s*(\w)\s*,\s*(\w)\s*\]\s*=\s*\[\s*\2\s*,\s*\1\s*\]/g.test(code)); +``` + +# --seed-- + +## --seed-contents-- ```js let a = 8, b = 6; // Only change code below this line - ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let a = 8, b = 6; [a, b] = [b, a]; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.md index 8fceb1ce80..7c09d172c1 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.md @@ -5,8 +5,8 @@ challengeType: 1 forumTopicId: 301214 --- -## Description -
    +# --description-- + You can use the same principles from the previous two lessons to destructure values from nested objects. Using an object similar to previous examples: @@ -32,33 +32,50 @@ And here's how you can assign an object properties' values to variables with dif const { johnDoe: { age: userAge, email: userEmail }} = user; ``` -
    +# --instructions-- -## Instructions -
    -Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables lowToday and highToday the values of today.low and today.high from the LOCAL_FORECAST object. -
    +Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables `lowToday` and `highToday` the values of `today.low` and `today.high` from the `LOCAL_FORECAST` object. -## Tests -
    +# --hints-- -```yml -tests: - - text: You should remove the ES5 assignment syntax. - testString: assert(!code.match(/lowToday = LOCAL_FORECAST\.today\.low/g) && !code.match(/highToday = LOCAL_FORECAST\.today.high/g)) - - text: You should use destructuring to create the lowToday variable. - testString: assert(code.match(/(var|const|let)\s*{\s*today\s*:\s*{\s*(low\s*:\s*lowToday[^}]*|[^,]*,\s*low\s*:\s*lowToday\s*)}\s*}\s*=\s*LOCAL_FORECAST(;|\s+|\/\/)/g)); - - text: You should use destructuring to create the highToday variable. - testString: assert(code.match(/(var|const|let)\s*{\s*today\s*:\s*{\s*(high\s*:\s*highToday[^}]*|[^,]*,\s*high\s*:\s*highToday\s*)}\s*}\s*=\s*LOCAL_FORECAST(;|\s+|\/\/)/g)); - - text: lowToday should be equal to 64 and highToday should be equal to 77. - testString: assert(lowToday === 64 && highToday === 77); +You should remove the ES5 assignment syntax. + +```js +assert( + !code.match(/lowToday = LOCAL_FORECAST\.today\.low/g) && + !code.match(/highToday = LOCAL_FORECAST\.today.high/g) +); ``` -
    +You should use destructuring to create the `lowToday` variable. -## Challenge Seed -
    -
    +```js +assert( + code.match( + /(var|const|let)\s*{\s*today\s*:\s*{\s*(low\s*:\s*lowToday[^}]*|[^,]*,\s*low\s*:\s*lowToday\s*)}\s*}\s*=\s*LOCAL_FORECAST(;|\s+|\/\/)/g + ) +); +``` + +You should use destructuring to create the `highToday` variable. + +```js +assert( + code.match( + /(var|const|let)\s*{\s*today\s*:\s*{\s*(high\s*:\s*highToday[^}]*|[^,]*,\s*high\s*:\s*highToday\s*)}\s*}\s*=\s*LOCAL_FORECAST(;|\s+|\/\/)/g + ) +); +``` + +`lowToday` should be equal to `64` and `highToday` should be equal to `77`. + +```js +assert(lowToday === 64 && highToday === 77); +``` + +# --seed-- + +## --seed-contents-- ```js const LOCAL_FORECAST = { @@ -75,11 +92,7 @@ const highToday = LOCAL_FORECAST.today.high; // Only change code above this line ``` -
    -
    - -## Solution -
    +# --solutions-- ```js const LOCAL_FORECAST = { @@ -90,5 +103,3 @@ const LOCAL_FORECAST = { const { today: { low: lowToday, high: highToday }} = LOCAL_FORECAST; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.md index 2f209530dd..c06b6b1916 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.md @@ -5,8 +5,8 @@ challengeType: 1 forumTopicId: 301215 --- -## Description -
    +# --description-- + Destructuring allows you to assign a new variable name when extracting values. You can do this by putting the new name after a colon when assigning the value. Using the same object from the last example: @@ -22,34 +22,52 @@ const { name: userName, age: userAge } = user; // userName = 'John Doe', userAge = 34 ``` -You may read it as "get the value of user.name and assign it to a new variable named userName" and so on. -
    +You may read it as "get the value of `user.name` and assign it to a new variable named `userName`" and so on. -## Instructions -
    -Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables highToday and highTomorrow the values of today and tomorrow from the HIGH_TEMPERATURES object. -
    +# --instructions-- -## Tests -
    +Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables `highToday` and `highTomorrow` the values of `today` and `tomorrow` from the `HIGH_TEMPERATURES` object. -```yml -tests: - - text: You should remove the ES5 assignment syntax. - testString: assert(!code.match(/highToday = HIGH_TEMPERATURES\.today/g) && !code.match(/highTomorrow = HIGH_TEMPERATURES\.tomorrow/g)) - - text: You should use destructuring to create the highToday variable. - testString: assert(code.match(/(var|const|let)\s*{\s*(today\s*:\s*highToday[^}]*|[^,]*,\s*today\s*:\s*highToday\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g)); - - text: You should use destructuring to create the highTomorrow variable. - testString: assert(code.match(/(var|const|let)\s*{\s*(tomorrow\s*:\s*highTomorrow[^}]*|[^,]*,\s*tomorrow\s*:\s*highTomorrow\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g)); - - text: highToday should be equal to 77 and highTomorrow should be equal to 80. - testString: assert(highToday === 77 && highTomorrow === 80); +# --hints-- + +You should remove the ES5 assignment syntax. + +```js +assert( + !code.match(/highToday = HIGH_TEMPERATURES\.today/g) && + !code.match(/highTomorrow = HIGH_TEMPERATURES\.tomorrow/g) +); ``` -
    +You should use destructuring to create the `highToday` variable. -## Challenge Seed -
    -
    +```js +assert( + code.match( + /(var|const|let)\s*{\s*(today\s*:\s*highToday[^}]*|[^,]*,\s*today\s*:\s*highToday\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g + ) +); +``` + +You should use destructuring to create the `highTomorrow` variable. + +```js +assert( + code.match( + /(var|const|let)\s*{\s*(tomorrow\s*:\s*highTomorrow[^}]*|[^,]*,\s*tomorrow\s*:\s*highTomorrow\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g + ) +); +``` + +`highToday` should be equal to `77` and `highTomorrow` should be equal to `80`. + +```js +assert(highToday === 77 && highTomorrow === 80); +``` + +# --seed-- + +## --seed-contents-- ```js const HIGH_TEMPERATURES = { @@ -66,11 +84,7 @@ const highTomorrow = HIGH_TEMPERATURES.tomorrow; // Only change code above this line ``` -
    -
    - -## Solution -
    +# --solutions-- ```js const HIGH_TEMPERATURES = { @@ -81,5 +95,3 @@ const HIGH_TEMPERATURES = { const { today: highToday, tomorrow: highTomorrow } = HIGH_TEMPERATURES; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.md index 33a74c160f..f6b2bbd8fc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.md @@ -5,8 +5,8 @@ challengeType: 1 forumTopicId: 301216 --- -## Description -
    +# --description-- + Destructuring assignment is special syntax introduced in ES6, for neatly assigning values taken directly from an object. Consider the following ES5 code: @@ -25,37 +25,59 @@ const { name, age } = user; // name = 'John Doe', age = 34 ``` -Here, the name and age variables will be created and assigned the values of their respective values from the user object. You can see how much cleaner this is. +Here, the `name` and `age` variables will be created and assigned the values of their respective values from the `user` object. You can see how much cleaner this is. You can extract as many or few values from the object as you want. -
    -## Instructions -
    -Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables today and tomorrow the values of today and tomorrow from the HIGH_TEMPERATURES object. -
    +# --instructions-- -## Tests -
    +Replace the two assignments with an equivalent destructuring assignment. It should still assign the variables `today` and `tomorrow` the values of `today` and `tomorrow` from the `HIGH_TEMPERATURES` object. -```yml -tests: - - text: You should remove the ES5 assignment syntax. - testString: assert(!__helpers.removeJSComments(code).match(/today\s*=\s*HIGH_TEMPERATURES\.(today|tomorrow)/g)) - - text: You should use destructuring to create the today variable. - testString: assert(__helpers.removeJSComments(code).match(/(var|let|const)\s*{\s*(today[^}]*|[^,]*,\s*today)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g)); - - text: You should use destructuring to create the tomorrow variable. - testString: assert(__helpers.removeJSComments(code).match(/(var|let|const)\s*{\s*(tomorrow[^}]*|[^,]*,\s*tomorrow)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g)); - - text: today should be equal to 77 and tomorrow should be equal to 80. - testString: assert(today === 77 && tomorrow === 80); +# --hints-- +You should remove the ES5 assignment syntax. + +```js +assert( + !__helpers + .removeJSComments(code) + .match(/today\s*=\s*HIGH_TEMPERATURES\.(today|tomorrow)/g) +); ``` -
    +You should use destructuring to create the `today` variable. -## Challenge Seed -
    -
    +```js +assert( + __helpers + .removeJSComments(code) + .match( + /(var|let|const)\s*{\s*(today[^}]*|[^,]*,\s*today)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g + ) +); +``` + +You should use destructuring to create the `tomorrow` variable. + +```js +assert( + __helpers + .removeJSComments(code) + .match( + /(var|let|const)\s*{\s*(tomorrow[^}]*|[^,]*,\s*tomorrow)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g + ) +); +``` + +`today` should be equal to `77` and `tomorrow` should be equal to `80`. + +```js +assert(today === 77 && tomorrow === 80); +``` + +# --seed-- + +## --seed-contents-- ```js const HIGH_TEMPERATURES = { @@ -72,12 +94,7 @@ const tomorrow = HIGH_TEMPERATURES.tomorrow; // Only change code above this line ``` -
    - -
    - -## Solution -
    +# --solutions-- ```js const HIGH_TEMPERATURES = { @@ -88,5 +105,3 @@ const HIGH_TEMPERATURES = { const { today, tomorrow } = HIGH_TEMPERATURES; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.md index 85f300c3c5..bd4bbc6c4b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 301217 --- -## Description -
    +# --description-- + In some cases, you can destructure the object in a function argument itself. + Consider the code below: ```js @@ -25,36 +26,41 @@ const profileUpdate = ({ name, age, nationality, location }) => { } ``` -When profileData is passed to the above function, the values are destructured from the function parameter for use within the function. -
    +When `profileData` is passed to the above function, the values are destructured from the function parameter for use within the function. -## Instructions -
    -Use destructuring assignment within the argument to the function half to send only max and min inside the function. -
    +# --instructions-- -## Tests -
    +Use destructuring assignment within the argument to the function `half` to send only `max` and `min` inside the function. -```yml -tests: - - text: stats should be an object. - testString: assert(typeof stats === 'object'); - - text: half(stats) should be 28.015 - testString: assert(half(stats) === 28.015); - - text: Destructuring should be used. - testString: assert(__helpers.removeWhiteSpace(code).match(/half=\({\w+,\w+}\)/)); - - text: Destructured parameter should be used. - testString: assert(!code.match(/stats\.max|stats\.min/)); +# --hints-- +`stats` should be an `object`. + +```js +assert(typeof stats === 'object'); ``` -
    +`half(stats)` should be `28.015` -## Challenge Seed -
    +```js +assert(half(stats) === 28.015); +``` -
    +Destructuring should be used. + +```js +assert(__helpers.removeWhiteSpace(code).match(/half=\({\w+,\w+}\)/)); +``` + +Destructured parameter should be used. + +```js +assert(!code.match(/stats\.max|stats\.min/)); +``` + +# --seed-- + +## --seed-contents-- ```js const stats = { @@ -69,17 +75,9 @@ const stats = { // Only change code below this line const half = (stats) => (stats.max + stats.min) / 2.0; // Only change code above this line - ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js const stats = { @@ -93,5 +91,3 @@ const stats = { const half = ( {max, min} ) => (max + min) / 2.0; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements.md index 7eaec45eb6..db59d04e07 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements.md @@ -1,14 +1,17 @@ --- id: 587d7b8a367417b2b2512b4c -title: Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements +title: >- + Use Destructuring Assignment with the Rest Parameter to Reassign Array + Elements challengeType: 1 forumTopicId: 301218 --- -## Description -
    +# --description-- + In some situations involving array destructuring, we might want to collect the rest of the elements into a separate array. -The result is similar to Array.prototype.slice(), as shown below: + +The result is similar to `Array.prototype.slice()`, as shown below: ```js const [a, b, ...arr] = [1, 2, 3, 4, 5, 7]; @@ -16,37 +19,45 @@ console.log(a, b); // 1, 2 console.log(arr); // [3, 4, 5, 7] ``` -Variables a and b take the first and second values from the array. After that, because of the rest parameter's presence, arr gets the rest of the values in the form of an array. -The rest element only works correctly as the last variable in the list. As in, you cannot use the rest parameter to catch a subarray that leaves out the last element of the original array. -
    +Variables `a` and `b` take the first and second values from the array. After that, because of the rest parameter's presence, `arr` gets the rest of the values in the form of an array. The rest element only works correctly as the last variable in the list. As in, you cannot use the rest parameter to catch a subarray that leaves out the last element of the original array. -## Instructions -
    -Use destructuring assignment with the rest parameter to perform an effective Array.prototype.slice() so that arr is a sub-array of the original array source with the first two elements omitted. -
    +# --instructions-- -## Tests -
    +Use destructuring assignment with the rest parameter to perform an effective `Array.prototype.slice()` so that `arr` is a sub-array of the original array `source` with the first two elements omitted. -```yml -tests: - - text: arr should be [3,4,5,6,7,8,9,10] - testString: assert(arr.every((v, i) => v === i + 3) && arr.length === 8); - - text: source should be [1,2,3,4,5,6,7,8,9,10] - testString: assert(source.every((v, i) => v === i + 1) && source.length === 10); - - text: Array.slice() should not be used. - testString: getUserInput => assert(!getUserInput('index').match(/slice/g)); - - text: Destructuring on list should be used. - testString: assert(__helpers.removeWhiteSpace(code).match(/\[(([_$a-z]\w*)?,){1,}\.\.\.arr\]=list/i)); +# --hints-- +`arr` should be `[3,4,5,6,7,8,9,10]` + +```js +assert(arr.every((v, i) => v === i + 3) && arr.length === 8); ``` -
    +`source` should be `[1,2,3,4,5,6,7,8,9,10]` -## Challenge Seed -
    +```js +assert(source.every((v, i) => v === i + 1) && source.length === 10); +``` -
    +`Array.slice()` should not be used. + +```js +(getUserInput) => assert(!getUserInput('index').match(/slice/g)); +``` + +Destructuring on `list` should be used. + +```js +assert( + __helpers + .removeWhiteSpace(code) + .match(/\[(([_$a-z]\w*)?,){1,}\.\.\.arr\]=list/i) +); +``` + +# --seed-- + +## --seed-contents-- ```js const source = [1,2,3,4,5,6,7,8,9,10]; @@ -57,17 +68,9 @@ function removeFirstTwo(list) { return arr; } const arr = removeFirstTwo(source); - ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js const source = [1,2,3,4,5,6,7,8,9,10]; @@ -77,5 +80,3 @@ function removeFirstTwo(list) { } const arr = removeFirstTwo(source); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.md index 17df6e4ad0..6823824f69 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301219 --- -## Description -
    -Imagine a file called math_functions.js that contains several functions related to mathematical operations. One of them is stored in a variable, add, that takes in two numbers and returns their sum. You want to use this function in several different JavaScript files. In order to share it with these other files, you first need to export it. +# --description-- + +Imagine a file called `math_functions.js` that contains several functions related to mathematical operations. One of them is stored in a variable, `add`, that takes in two numbers and returns their sum. You want to use this function in several different JavaScript files. In order to share it with these other files, you first need to `export` it. ```js export const add = (x, y) => { @@ -31,29 +31,35 @@ When you export a variable or function, you can import it in another file and us export { add, subtract }; ``` -
    +# --instructions-- -## Instructions -
    There are two string-related functions in the editor. Export both of them using the method of your choice. -
    -## Tests -
    +# --hints-- -```yml -tests: - - text: You should properly export uppercaseString. - testString: assert(code.match(/(export\s+const\s+uppercaseString|export\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)})/g)); - - text: You should properly export lowercaseString. - testString: assert(code.match(/(export\s+const\s+lowercaseString|export\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)})/g)); +You should properly export `uppercaseString`. + +```js +assert( + code.match( + /(export\s+const\s+uppercaseString|export\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)})/g + ) +); ``` -
    +You should properly export `lowercaseString`. -## Challenge Seed -
    -
    +```js +assert( + code.match( + /(export\s+const\s+lowercaseString|export\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)})/g + ) +); +``` + +# --seed-- + +## --seed-contents-- ```js const uppercaseString = (string) => { @@ -65,11 +71,7 @@ const lowercaseString = (string) => { } ``` -
    -
    - -## Solution -
    +# --solutions-- ```js export const uppercaseString = (string) => { @@ -80,5 +82,3 @@ export const lowercaseString = (string) => { return string.toLowerCase() } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md index 3ee55a99cb..1fd62e3a51 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md @@ -5,12 +5,15 @@ challengeType: 1 forumTopicId: 301220 --- -## Description -
    +# --description-- + You can obtain values from an object and set the value of a property within an object. + These are classically called getters and setters. + Getter functions are meant to simply return (get) the value of an object's private variable to the user without the user directly accessing the private variable. -Setter functions are meant to modify (set) the value of an object's private variable based on the value passed into the setter function. This change could involve calculations, or even overwriting the previous value completely.

    + +Setter functions are meant to modify (set) the value of an object's private variable based on the value passed into the setter function. This change could involve calculations, or even overwriting the previous value completely. ```js class Book { @@ -32,49 +35,106 @@ novel.writer = 'newAuthor'; console.log(novel.writer); // newAuthor ``` -Notice the syntax used to invoke the getter and setter. They do not even look like functions. -Getters and setters are important because they hide internal implementation details. -Note: It is convention to precede the name of a private variable with an underscore (_). However, the practice itself does not make a variable private. -
    +Notice the syntax used to invoke the getter and setter. They do not even look like functions. Getters and setters are important because they hide internal implementation details. **Note:** It is convention to precede the name of a private variable with an underscore (`_`). However, the practice itself does not make a variable private. + +# --instructions-- + +Use the `class` keyword to create a Thermostat class. The constructor accepts a Fahrenheit temperature. + +In the class, create a `getter` to obtain the temperature in Celsius and a `setter` to set the temperature in Celsius. + +Remember that `C = 5/9 * (F - 32)` and `F = C * 9.0 / 5 + 32`, where `F` is the value of temperature in Fahrenheit, and `C` is the value of the same temperature in Celsius. + +**Note:** When you implement this, you will track the temperature inside the class in one scale, either Fahrenheit or Celsius. -## Instructions -
    -Use the class keyword to create a Thermostat class. The constructor accepts a Fahrenheit temperature. -In the class, create a getter to obtain the temperature in Celsius and a setter to set the temperature in Celsius. -Remember that C = 5/9 * (F - 32) and F = C * 9.0 / 5 + 32, where F is the value of temperature in Fahrenheit, and C is the value of the same temperature in Celsius. -Note: When you implement this, you will track the temperature inside the class in one scale, either Fahrenheit or Celsius. This is the power of a getter and a setter. You are creating an API for another user, who can get the correct result regardless of which one you track. + In other words, you are abstracting implementation details from the user. -
    -## Tests -
    +# --hints-- -```yml -tests: - - text: Thermostat should be a class with a defined constructor method. - testString: assert(typeof Thermostat === 'function' && typeof Thermostat.constructor === 'function'); - - text: class keyword should be used. - testString: assert(code.match(/class/g)); - - text: Thermostat should be able to be instantiated. - testString: assert((() => {const t = new Thermostat(122);return typeof t === 'object'})()); - - text: When instantiated with a Fahrenheit value, Thermostat should set the correct temperature. - testString: assert((() => {const t = new Thermostat(122);return t.temperature === 50})()); - - text: A getter should be defined. - testString: assert((() => {const desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');return !!desc && typeof desc.get === 'function';})()); - - text: A setter should be defined. - testString: assert((() => {const desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature');return !!desc && typeof desc.set === 'function';})()); - - text: Calling the setter with a Celsius value should set the temperature. - testString: assert((() => {const t = new Thermostat(32); t.temperature = 26; const u = new Thermostat(32); u.temperature = 50; return t.temperature === 26 && u.temperature === 50;})()); +`Thermostat` should be a `class` with a defined `constructor` method. +```js +assert( + typeof Thermostat === 'function' && + typeof Thermostat.constructor === 'function' +); ``` -
    +`class` keyword should be used. -## Challenge Seed -
    +```js +assert(code.match(/class/g)); +``` -
    +`Thermostat` should be able to be instantiated. + +```js +assert( + (() => { + const t = new Thermostat(122); + return typeof t === 'object'; + })() +); +``` + +When instantiated with a Fahrenheit value, `Thermostat` should set the correct temperature. + +```js +assert( + (() => { + const t = new Thermostat(122); + return t.temperature === 50; + })() +); +``` + +A `getter` should be defined. + +```js +assert( + (() => { + const desc = Object.getOwnPropertyDescriptor( + Thermostat.prototype, + 'temperature' + ); + return !!desc && typeof desc.get === 'function'; + })() +); +``` + +A `setter` should be defined. + +```js +assert( + (() => { + const desc = Object.getOwnPropertyDescriptor( + Thermostat.prototype, + 'temperature' + ); + return !!desc && typeof desc.set === 'function'; + })() +); +``` + +Calling the `setter` with a Celsius value should set the temperature. + +```js +assert( + (() => { + const t = new Thermostat(32); + t.temperature = 26; + const u = new Thermostat(32); + u.temperature = 50; + return t.temperature === 26 && u.temperature === 50; + })() +); +``` + +# --seed-- + +## --seed-contents-- ```js // Only change code below this line @@ -87,14 +147,7 @@ thermos.temperature = 26; temp = thermos.temperature; // 26 in Celsius ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js class Thermostat { @@ -114,5 +167,3 @@ let temp = thermos.temperature; // 24.44 in Celsius thermos.temperature = 26; temp = thermos.temperature; // 26 in Celsius ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md index 1dc09b8e9c..32e3e663e4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 301221 --- -## Description -
    +# --description-- + In order to help us create more flexible functions, ES6 introduces the rest parameter for function parameters. With the rest parameter, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function. + Check out this code: ```js @@ -18,38 +19,47 @@ console.log(howMany(0, 1, 2)); // You have passed 3 arguments. console.log(howMany("string", null, [1, 2, 3], { })); // You have passed 4 arguments. ``` -The rest parameter eliminates the need to check the args array and allows us to apply map(), filter() and reduce() on the parameters array. -
    +The rest parameter eliminates the need to check the `args` array and allows us to apply `map()`, `filter()` and `reduce()` on the parameters array. -## Instructions -
    -Modify the function sum using the rest parameter in such a way that the function sum is able to take any number of arguments and return their sum. -
    +# --instructions-- -## Tests -
    +Modify the function `sum` using the rest parameter in such a way that the function `sum` is able to take any number of arguments and return their sum. -```yml -tests: - - text: The result of sum(0,1,2) should be 3 - testString: assert(sum(0,1,2) === 3); - - text: The result of sum(1,2,3,4) should be 10 - testString: assert(sum(1,2,3,4) === 10); - - text: The result of sum(5) should be 5 - testString: assert(sum(5) === 5); - - text: The result of sum() should be 0 - testString: assert(sum() === 0); - - text: The sum function should use the ... rest parameter on the args parameter. - testString: assert(__helpers.removeWhiteSpace(code).match(/sum=\(\.\.\.args\)=>/)); +# --hints-- +The result of `sum(0,1,2)` should be 3 + +```js +assert(sum(0, 1, 2) === 3); ``` -
    +The result of `sum(1,2,3,4)` should be 10 -## Challenge Seed -
    +```js +assert(sum(1, 2, 3, 4) === 10); +``` -
    +The result of `sum(5)` should be 5 + +```js +assert(sum(5) === 5); +``` + +The result of `sum()` should be 0 + +```js +assert(sum() === 0); +``` + +The `sum` function should use the `...` rest parameter on the `args` parameter. + +```js +assert(__helpers.removeWhiteSpace(code).match(/sum=\(\.\.\.args\)=>/)); +``` + +# --seed-- + +## --seed-contents-- ```js const sum = (x, y, z) => { @@ -58,19 +68,10 @@ const sum = (x, y, z) => { } ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js const sum = (...args) => { return args.reduce((a, b) => a + b, 0); } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md index ced4aeaf90..aab990a68b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md @@ -5,58 +5,60 @@ challengeType: 1 forumTopicId: 301222 --- -## Description -
    +# --description-- + ES6 introduces the spread operator, which allows us to expand arrays and other expressions in places where multiple parameters or elements are expected. -The ES5 code below uses apply() to compute the maximum value in an array: + +The ES5 code below uses `apply()` to compute the maximum value in an array: ```js var arr = [6, 89, 3, 45]; var maximus = Math.max.apply(null, arr); // returns 89 ``` -We had to use Math.max.apply(null, arr) because Math.max(arr) returns NaN. Math.max() expects comma-separated arguments, but not an array. -The spread operator makes this syntax much better to read and maintain. +We had to use `Math.max.apply(null, arr)` because `Math.max(arr)` returns `NaN`. `Math.max()` expects comma-separated arguments, but not an array. The spread operator makes this syntax much better to read and maintain. ```js const arr = [6, 89, 3, 45]; const maximus = Math.max(...arr); // returns 89 ``` -...arr returns an unpacked array. In other words, it spreads the array. -However, the spread operator only works in-place, like in an argument to a function or in an array literal. The following code will not work: +`...arr` returns an unpacked array. In other words, it *spreads* the array. However, the spread operator only works in-place, like in an argument to a function or in an array literal. The following code will not work: ```js const spreaded = ...arr; // will throw a syntax error ``` -
    +# --instructions-- -## Instructions -
    -Copy all contents of arr1 into another array arr2 using the spread operator. -
    +Copy all contents of `arr1` into another array `arr2` using the spread operator. -## Tests -
    +# --hints-- -```yml -tests: - - text: arr2 should be correct copy of arr1. - testString: assert(arr2.every((v, i) => v === arr1[i]) && arr2.length); - - text: ... spread operator should be used to duplicate arr1. - testString: assert(code.match(/Array\(\s*\.\.\.arr1\s*\)|\[\s*\.\.\.arr1\s*\]/)); - - text: arr2 should remain unchanged when arr1 is changed. - testString: assert((arr1, arr2) => {arr1.push('JUN'); return arr2.length < arr1.length}); +`arr2` should be correct copy of `arr1`. +```js +assert(arr2.every((v, i) => v === arr1[i]) && arr2.length); ``` -
    +`...` spread operator should be used to duplicate `arr1`. -## Challenge Seed -
    +```js +assert(code.match(/Array\(\s*\.\.\.arr1\s*\)|\[\s*\.\.\.arr1\s*\]/)); +``` -
    +`arr2` should remain unchanged when `arr1` is changed. + +```js +assert((arr1, arr2) => { + arr1.push('JUN'); + return arr2.length < arr1.length; +}); +``` + +# --seed-- + +## --seed-contents-- ```js const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY']; @@ -67,14 +69,7 @@ arr2 = []; // Change this line console.log(arr2); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY']; @@ -82,5 +77,3 @@ let arr2; arr2 = [...arr1]; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-arrow-functions-with-parameters.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-arrow-functions-with-parameters.md index dfdd36289e..e81d509eef 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-arrow-functions-with-parameters.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-arrow-functions-with-parameters.md @@ -5,8 +5,8 @@ challengeType: 1 forumTopicId: 301223 --- -## Description -
    +# --description-- + Just like a regular function, you can pass arguments into an arrow function. ```js @@ -30,37 +30,48 @@ const multiplier = (item, multi) => item * multi; multiplier(4, 2); // returns 8 ``` -
    +# --instructions-- -## Instructions -
    -Rewrite the myConcat function which appends contents of arr2 to arr1 so that the function uses arrow function syntax. -
    +Rewrite the `myConcat` function which appends contents of `arr2` to `arr1` so that the function uses arrow function syntax. -## Tests -
    +# --hints-- -```yml -tests: - - text: You should replace the var keyword. - testString: getUserInput => assert(!getUserInput('index').match(/var/g)); - - text: myConcat should be a constant variable (by using const). - testString: getUserInput => assert(getUserInput('index').match(/const\s+myConcat/g)); - - text: myConcat should be an arrow function with two parameters - testString: assert(/myConcat=\(\w+,\w+\)=>/.test(code.replace(/\s/g, '')) && typeof myConcat === 'function'); - - text: myConcat() should return [1, 2, 3, 4, 5]. - testString: assert.deepEqual(myConcat([1, 2], [3, 4, 5]), [1, 2, 3, 4, 5]); - - text: function keyword should not be used. - testString: getUserInput => assert(!getUserInput('index').match(/function/g)); +You should replace the `var` keyword. +```js +(getUserInput) => assert(!getUserInput('index').match(/var/g)); ``` -
    +`myConcat` should be a constant variable (by using `const`). -## Challenge Seed -
    +```js +(getUserInput) => assert(getUserInput('index').match(/const\s+myConcat/g)); +``` -
    +`myConcat` should be an arrow function with two parameters + +```js +assert( + /myConcat=\(\w+,\w+\)=>/.test(code.replace(/\s/g, '')) && + typeof myConcat === 'function' +); +``` + +`myConcat()` should return `[1, 2, 3, 4, 5]`. + +```js +assert.deepEqual(myConcat([1, 2], [3, 4, 5]), [1, 2, 3, 4, 5]); +``` + +`function` keyword should not be used. + +```js +(getUserInput) => assert(!getUserInput('index').match(/function/g)); +``` + +# --seed-- + +## --seed-contents-- ```js var myConcat = function(arr1, arr2) { @@ -70,14 +81,7 @@ var myConcat = function(arr1, arr2) { console.log(myConcat([1, 2], [3, 4, 5])); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js const myConcat = (arr1, arr2) => { @@ -86,5 +90,3 @@ const myConcat = (arr1, arr2) => { console.log(myConcat([1, 2], [3, 4, 5])); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-concise-declarative-functions-with-es6.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-concise-declarative-functions-with-es6.md index d7bda4a98d..c93e24d648 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-concise-declarative-functions-with-es6.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-concise-declarative-functions-with-es6.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301224 --- -## Description -
    -When defining functions within objects in ES5, we have to use the keyword function as follows: +# --description-- + +When defining functions within objects in ES5, we have to use the keyword `function` as follows: ```js const person = { @@ -18,7 +18,7 @@ const person = { }; ``` -With ES6, You can remove the function keyword and colon altogether when defining functions in objects. Here's an example of this syntax: +With ES6, You can remove the `function` keyword and colon altogether when defining functions in objects. Here's an example of this syntax: ```js const person = { @@ -29,33 +29,35 @@ const person = { }; ``` -
    +# --instructions-- -## Instructions -
    -Refactor the function setGear inside the object bicycle to use the shorthand syntax described above. -
    +Refactor the function `setGear` inside the object `bicycle` to use the shorthand syntax described above. -## Tests -
    +# --hints-- -```yml -tests: - - text: Traditional function expression should not be used. - testString: getUserInput => assert(!__helpers.removeJSComments(code).match(/function/)); - - text: setGear should be a declarative function. - testString: assert(typeof bicycle.setGear === 'function' && code.match(/setGear\s*\(.+\)\s*\{/)); - - text: bicycle.setGear(48) should change the gear value to 48. - testString: assert((new bicycle.setGear(48)).gear === 48); +Traditional function expression should not be used. +```js +(getUserInput) => assert(!__helpers.removeJSComments(code).match(/function/)); ``` -
    +`setGear` should be a declarative function. -## Challenge Seed -
    +```js +assert( + typeof bicycle.setGear === 'function' && code.match(/setGear\s*\(.+\)\s*\{/) +); +``` -
    +`bicycle.setGear(48)` should change the `gear` value to 48. + +```js +assert(new bicycle.setGear(48).gear === 48); +``` + +# --seed-- + +## --seed-contents-- ```js // Only change code below this line @@ -70,12 +72,7 @@ bicycle.setGear(3); console.log(bicycle.gear); ``` -
    - -
    - -## Solution -
    +# --solutions-- ```js const bicycle = { @@ -86,5 +83,3 @@ const bicycle = { }; bicycle.setGear(3); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand.md index 93c716aff9..b8041593dc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 301225 --- -## Description -
    +# --description-- + ES6 adds some nice support for easily defining object literals. + Consider the following code: ```js @@ -17,39 +18,36 @@ const getMousePosition = (x, y) => ({ }); ``` -getMousePosition is a simple function that returns an object containing two properties. -ES6 provides the syntactic sugar to eliminate the redundancy of having to write x: x. You can simply write x once, and it will be converted tox: x (or something equivalent) under the hood. -Here is the same function from above rewritten to use this new syntax: +`getMousePosition` is a simple function that returns an object containing two properties. ES6 provides the syntactic sugar to eliminate the redundancy of having to write `x: x`. You can simply write `x` once, and it will be converted to`x: x` (or something equivalent) under the hood. Here is the same function from above rewritten to use this new syntax: ```js const getMousePosition = (x, y) => ({ x, y }); ``` -
    +# --instructions-- -## Instructions -
    -Use object property shorthand with object literals to create and return an object with name, age and gender properties. -
    +Use object property shorthand with object literals to create and return an object with `name`, `age` and `gender` properties. -## Tests -
    +# --hints-- -```yml -tests: - - text: 'createPerson("Zodiac Hasbro", 56, "male") should return {name: "Zodiac Hasbro", age: 56, gender: "male"}.' - testString: assert.deepEqual({name:"Zodiac Hasbro",age:56,gender:"male"}, createPerson("Zodiac Hasbro", 56, "male")); - - text: Your code should not use key:value. - testString: getUserInput => assert(!getUserInput('index').match(/:/g)); +`createPerson("Zodiac Hasbro", 56, "male")` should return `{name: "Zodiac Hasbro", age: 56, gender: "male"}`. +```js +assert.deepEqual( + { name: 'Zodiac Hasbro', age: 56, gender: 'male' }, + createPerson('Zodiac Hasbro', 56, 'male') +); ``` -
    +Your code should not use `key:value`. -## Challenge Seed -
    +```js +(getUserInput) => assert(!getUserInput('index').match(/:/g)); +``` -
    +# --seed-- + +## --seed-contents-- ```js const createPerson = (name, age, gender) => { @@ -63,14 +61,7 @@ const createPerson = (name, age, gender) => { }; ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js const createPerson = (name, age, gender) => { @@ -81,5 +72,3 @@ const createPerson = (name, age, gender) => { }; }; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-001.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-001.md index cf1d2045af..bd6b34ed41 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-001.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-001.md @@ -4,53 +4,25 @@ title: Part 1 challengeType: 0 --- -## Description -
    +# --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. +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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constinfixToFunction={}")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('constinfixToFunction={}')); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -78,30 +50,26 @@ tests:
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-002.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-002.md index 327781abee..ae54018cd4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-002.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-002.md @@ -4,51 +4,21 @@ title: Part 2 challengeType: 0 --- -## Description -
    +# --description-- Above `infixToFunction`, define an empty function `add` using the `function` keyword. It should accept two parameters, `x` and `y`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("functionadd(x,y){}")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('functionadd(x,y){}')); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -76,25 +46,25 @@ const infixToFunction = {};
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-003.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-003.md index ed626c0e46..5c455f0ef7 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-003.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-003.md @@ -4,55 +4,21 @@ title: Part 3 challengeType: 0 --- -## Description -
    +# --description-- Now return the sum of `x` and `y` using the `return` keyword. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(add(1, 2) === 3 && add(100, 2000) === 2100); +See description above for instructions. +```js +assert(add(1, 2) === 3 && add(100, 2000) === 2100); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -80,25 +46,29 @@ const infixToFunction = {};
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-004.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-004.md index b5dc418aca..062aacd90b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-004.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-004.md @@ -4,57 +4,23 @@ title: Part 4 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constaddVar=add")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('constaddVar=add')); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -82,25 +48,29 @@ const infixToFunction = {};
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-005.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-005.md index fe2cad9414..71a1830570 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-005.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-005.md @@ -4,8 +4,7 @@ title: Part 5 challengeType: 0 --- -## Description -
    +# --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: @@ -17,52 +16,17 @@ function(x) { First, remove the `addVar` definition. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(!code.replace(/\s/g, "").includes("constaddVar=add")); +See description above for instructions. +```js +assert(!code.replace(/\s/g, '').includes('constaddVar=add')); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -90,25 +54,31 @@ const infixToFunction = {};
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-006.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-006.md index 923a50a6c5..14cbc37541 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-006.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-006.md @@ -4,8 +4,7 @@ title: Part 6 challengeType: 0 --- -## Description -
    +# --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: @@ -17,52 +16,19 @@ const fn = function(x) { fn(); ``` -Assign the anonymous function to the variable `addVar`. +Assign the anonymous function to the variable `addVar`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constaddVar=function(x,y){returnx+y")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('constaddVar=function(x,y){returnx+y')); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -90,25 +56,29 @@ const infixToFunction = {};
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-007.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-007.md index 8da5112e55..0ccb80a402 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-007.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-007.md @@ -4,10 +4,9 @@ title: Part 7 challengeType: 0 --- -## Description -
    +# --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. +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: @@ -17,50 +16,17 @@ const fn = (x, y) => x; Note that the value is returned implicitly. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constaddVar=(x,y)=>x+y")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('constaddVar=(x,y)=>x+y')); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -88,25 +54,29 @@ const infixToFunction = {};
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-008.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-008.md index 65372965f2..f052918a1e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-008.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-008.md @@ -4,53 +4,21 @@ title: Part 8 challengeType: 0 --- -## Description -
    +# --description-- Add the key `+` to `infixToFunction` and assign it the value `addVar`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(infixToFunction["+"].toString() === addVar.toString()); +See description above for instructions. +```js +assert(infixToFunction['+'].toString() === addVar.toString()); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -78,25 +46,27 @@ const infixToFunction = {};
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-009.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-009.md index 30ecf10d8c..6779d9ab3d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-009.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-009.md @@ -4,55 +4,21 @@ title: Part 9 challengeType: 0 --- -## Description -
    +# --description-- In `infixToFunction`, replace `addVar` with `(x, y) => x + y`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').match(/\+["']:\(x,y\)=>x\+y/)); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -80,25 +46,29 @@ const infixToFunction = {
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-010.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-010.md index 31883fab1c..03713b2bf0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-010.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-010.md @@ -4,55 +4,21 @@ title: Part 10 challengeType: 0 --- -## Description -
    +# --description-- -Remove the now redundant `addVar` definition. +Remove the now redundant `addVar` definition. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(typeof addVar === "undefined"); +See description above for instructions. +```js +assert(typeof addVar === 'undefined'); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -80,25 +46,29 @@ const infixToFunction = {
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-011.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-011.md index ca9f4dc25a..236b98e1f5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-011.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-011.md @@ -4,53 +4,25 @@ title: Part 11 challengeType: 0 --- -## Description -
    +# --description-- Add similar definitions for `-`, `*` and `/` in `infixToFunction`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(infixToFunction["-"](10, 2) === 8 && infixToFunction["*"](10, 10) === 100 && infixToFunction["/"](100, 10) === 10); +See description above for instructions. +```js +assert( + infixToFunction['-'](10, 2) === 8 && + infixToFunction['*'](10, 10) === 100 && + infixToFunction['/'](100, 10) === 10 +); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -78,25 +50,27 @@ const infixToFunction = {
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-012.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-012.md index 45aa0809b2..ce1a59ed4f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-012.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-012.md @@ -4,56 +4,25 @@ title: Part 12 challengeType: 0 --- -## Description -
    +# --description-- Use arrow function syntax to define a function `infixEval` which takes `str` and `regex` as arguments and returns `str.replace(regex, "")`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test(code.replace(/\s/g, ''))); +See description above for instructions. +```js +assert( + /constinfixEval=\(str,regex\)=>str\.replace\(regex,['"]{2}\)/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -81,25 +50,30 @@ const infixToFunction = {
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-013.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-013.md index c06761202b..8cbbe0d41c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-013.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-013.md @@ -4,12 +4,11 @@ title: Part 13 challengeType: 0 --- -## Description -
    +# --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. +Pass the `+` function from `infixToFunction` to the `replace` method as the second argument. This is how you would pass the `-` function: @@ -17,54 +16,17 @@ This is how you would pass the `-` function: str.replace(regex, infixToFunction["-"]) ``` +# --hints-- -
    - -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(infixEval("ab", /(a)b/) === "aba"); +See description above for instructions. +```js +assert(infixEval('ab', /(a)b/) === 'aba'); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -92,25 +54,32 @@ const infixEval = (str, regex) => str.replace(regex, "");
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-014.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-014.md index 04b229fa56..530eeb6bd1 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-014.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-014.md @@ -4,58 +4,25 @@ title: Part 14 challengeType: 0 --- -## Description -
    +# --description-- Replace the second argument of `str.replace` with an anonymous function, which takes `match`, `arg1`, `fn`, and `arg2`, and returns `infixToFunction["+"]`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])')); +See description above for instructions. +```js +assert( + code + .replace(/\s/g, '') + .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction["+"])') +); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -83,25 +50,32 @@ const infixEval = (str, regex) => str.replace(regex, infixToFunction["+"]);
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-015.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-015.md index 48066d8b72..123e7f3c9f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-015.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-015.md @@ -4,63 +4,27 @@ title: Part 15 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])')); +See description above for instructions. +```js +assert( + code + .replace(/\s/g, '') + .includes('str.replace(regex,(match,arg1,fn,arg2)=>infixToFunction[fn])') +); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -88,25 +52,35 @@ const infixEval = (str, regex) =>
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-016.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-016.md index 05fd5c4935..1dfbf3cd50 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-016.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-016.md @@ -4,63 +4,29 @@ title: Part 16 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: 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"); +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-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -88,25 +54,35 @@ const infixEval = (str, regex) =>
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-017.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-017.md index d0f6ad09eb..bae1122dde 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-017.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-017.md @@ -4,8 +4,7 @@ title: Part 17 challengeType: 0 --- -## Description -
    +# --description-- The `match` parameter is currently unused, which can lead to unused variable warnings in some linters. @@ -13,56 +12,17 @@ To fix this, prefix or replace it with an underscore (`_`) - both ways signal to Note that a single underscore can only be used once in a function and may conflict with some libraries (Lodash, Underscore.js). -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("str.replace(regex,(_")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('str.replace(regex,(_')); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -90,25 +50,35 @@ const infixEval = (str, regex) =>
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-018.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-018.md index 542e8bff8e..558c89d8df 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-018.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-018.md @@ -4,8 +4,7 @@ title: Part 18 challengeType: 0 --- -## Description -
    +# --description-- When defining an arrow function with a single argument, the parentheses can be omitted: @@ -15,56 +14,17 @@ const greeting = name => `Hello !`; Define a function `highPrecedence` which takes a single argument `str` and returns it. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(highPrecedence("a") === "a"); +See description above for instructions. +```js +assert(highPrecedence('a') === 'a'); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -92,25 +52,35 @@ const infixEval = (str, regex) =>
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-019.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-019.md index 0ad1e38734..86276f9817 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-019.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-019.md @@ -4,8 +4,7 @@ title: Part 19 challengeType: 0 --- -## Description -
    +# --description-- Arrow functions can have multiple statements: @@ -18,57 +17,17 @@ const fn = (x, y) => { Use this syntax for the `highPrecedence` function. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("highPrecedence=str=>{returnstr")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('highPrecedence=str=>{returnstr')); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -96,25 +55,36 @@ const highPrecedence = str => str;
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-020.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-020.md index cd7ec42429..f659731182 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-020.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-020.md @@ -4,65 +4,21 @@ title: Part 20 challengeType: 0 --- -## Description -
    +# --description-- In `highPrecedence`, define `regex` to be `/([0-9.]+)([*\/])([0-9.]+)/`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("regex=/([0-9.]+)([*\\/])([0-9.]+)/")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('regex=/([0-9.]+)([*\\/])([0-9.]+)/')); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -90,25 +46,39 @@ const highPrecedence = str => {
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-021.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-021.md index b0631586f1..2943a50392 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-021.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-021.md @@ -4,67 +4,21 @@ title: Part 21 challengeType: 0 --- -## Description -
    +# --description-- -Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. -Return `str2`. +Now, assign the result of calling `infixEval` with `str` and `regex` to `str2`. Return `str2`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(highPrecedence("7*6") === "42" && highPrecedence("50/25") === "2"); +See description above for instructions. +```js +assert(highPrecedence('7*6') === '42' && highPrecedence('50/25') === '2'); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -92,25 +46,40 @@ const highPrecedence = str => {
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-022.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-022.md index d7fe1c34c5..c93696ce51 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-022.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-022.md @@ -4,8 +4,7 @@ title: Part 22 challengeType: 0 --- -## Description -
    +# --description-- The ternary operator has the following syntax: @@ -17,62 +16,21 @@ const result = 9 > 10 ? "Yes" : "No"; // "No" Use this operator to return `str` if `str === str2`, and an empty string (`""`) otherwise. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(highPrecedence("2*2") === "" && highPrecedence("2+2") === "2+2" && code.includes("?")); +See description above for instructions. +```js +assert( + highPrecedence('2*2') === '' && + highPrecedence('2+2') === '2+2' && + code.includes('?') +); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -100,25 +58,41 @@ const highPrecedence = str => {
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-023.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-023.md index e57d378f17..17b17d7eba 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-023.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-023.md @@ -4,69 +4,27 @@ title: Part 23 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(highPrecedence("2*2*2") === "8" && highPrecedence("2*2") === "4" && highPrecedence("2+2") === "2+2"); +See description above for instructions. +```js +assert( + highPrecedence('2*2*2') === '8' && + highPrecedence('2*2') === '4' && + highPrecedence('2+2') === '2+2' +); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -94,25 +52,41 @@ const highPrecedence = str => {
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-024.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-024.md index cdb7111aed..02c1275189 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-024.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-024.md @@ -4,67 +4,21 @@ title: Part 24 challengeType: 0 --- -## Description -
    +# --description-- Define an object `spreadsheetFunctions`, with a single key - an empty string (`""`). The corresponding value should be the function `x => x`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(spreadsheetFunctions[""]("x") === "x"); +See description above for instructions. +```js +assert(spreadsheetFunctions['']('x') === 'x'); ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -92,25 +46,41 @@ const highPrecedence = str => {
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-025.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-025.md index 9b4b670abb..34e6e80b09 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-025.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-025.md @@ -4,36 +4,56 @@ title: Part 25 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constapplyFn=str=>{}")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('constapplyFn=str=>{}')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-026.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-026.md index 7d13be5741..9b5c446b88 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-026.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-026.md @@ -4,36 +4,60 @@ title: Part 26 challengeType: 0 --- -## Description -
    +# --description-- Set `noHigh` to `highPrecedence(str)` in `applyFn`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constapplyFn=str=>{constnoHigh=highPrecedence(str)")); +See description above for instructions. +```js +assert( + code + .replace(/\s/g, '') + .includes('constapplyFn=str=>{constnoHigh=highPrecedence(str)') +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-027.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-027.md index 9ff884307b..dbd47ef94b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-027.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-027.md @@ -4,36 +4,62 @@ title: Part 27 challengeType: 0 --- -## Description -
    +# --description-- Set `infix` to `/([0-9.]+)([+-])([0-9.]+)/` in `applyFn`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-028.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-028.md index d11e8d3f50..ca4b695c62 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-028.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-028.md @@ -4,36 +4,62 @@ title: Part 28 challengeType: 0 --- -## Description -
    +# --description-- Set `str2` to `infixEval(noHigh, infix)`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constapplyFn=str=>{constnoHigh=highPrecedence(str);constinfix=/([0-9.]+)([+-])([0-9.]+)/;conststr2=infixEval(noHigh,infix)")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-029.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-029.md index f32063481c..6e78c3e49e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-029.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-029.md @@ -4,36 +4,61 @@ title: Part 29 challengeType: 0 --- -## Description -
    +# --description-- Set `regex` to `/([a-z]*)\(([0-9., ]*)\)(?!.*\()/i` in `applyFn`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(applyFn.toString().replace(/\s/g, '').includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i')); +See description above for instructions. +```js +assert( + applyFn + .toString() + .replace(/\s/g, '') + .includes('varregex=/([a-z]*)\\(([0-9.,]*)\\)(?!.*\\()/i') +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-030.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-030.md index cddabd1f3a..103c071e37 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-030.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-030.md @@ -4,8 +4,7 @@ title: Part 30 challengeType: 0 --- -## Description -
    +# --description-- The `split` method returns an array of strings from a larger string by using its argument to determine where to make each split: @@ -15,31 +14,52 @@ The `split` method returns an array of strings from a larger string by using its Add a function `toNumberList` (inside `applyFn`) which takes an argument `args` and splits it by commas. Return `toNumberList`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(applyFn("")("foo,baz,bar")) === '["foo","baz","bar"]'); +See description above for instructions. +```js +assert(JSON.stringify(applyFn('')('foo,baz,bar')) === '["foo","baz","bar"]'); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-031.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-031.md index b518720484..a5b721c88f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-031.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-031.md @@ -4,8 +4,7 @@ title: Part 31 challengeType: 0 --- -## Description -
    +# --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: @@ -15,30 +14,56 @@ The `map` method takes a function and for each element of an array, it passes th In `toNumberList`, chain the `map` method to `args.split(",")` and pass it `parseFloat` to parse each element of the array into a number. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes('consttoNumberList=args=>args.split(",").map(parseFloat)')); +See description above for instructions. +```js +assert( + code + .replace(/\s/g, '') + .includes('consttoNumberList=args=>args.split(",").map(parseFloat)') +); ``` -
    +# --seed-- -## Challenge Seed -
    +## --before-user-code-- -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-032.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-032.md index 8c07bca8ad..2ea78c3aab 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-032.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-032.md @@ -4,36 +4,62 @@ title: Part 32 challengeType: 0 --- -## Description -
    +# --description-- Define a new function `applyFunction` (inside `applyFn`). It should take two arguments: `fn` and `args`, and should return `spreadsheetFunctions`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes('consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions')); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-033.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-033.md index 6f34560229..2da7fae1b3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-033.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-033.md @@ -4,36 +4,62 @@ title: Part 33 challengeType: 0 --- -## Description -
    +# --description-- Now, instead of returning `spreadsheetFunctions`, use bracket notation and `fn.toLowerCase()` to get a specific function from `spreadsheetFunctions`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes('consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()]')); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-034.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-034.md index 43eedf6e4c..c335af288f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-034.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-034.md @@ -4,36 +4,62 @@ title: Part 34 challengeType: 0 --- -## Description -
    +# --description-- Apply `toNumberList(args)` to `spreadsheetFunctions[fn.toLowerCase()]`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes('consttoNumberList=args=>args.split(",").map(parseFloat);constapplyFunction=(fn,args)=>spreadsheetFunctions[fn.toLowerCase()](toNumberList(args))')); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-035.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-035.md index 0a134e37a2..c4a0c4d8d4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-035.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-035.md @@ -4,38 +4,58 @@ title: Part 35 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(applyFn("2*2fn(1, 2, 3.3)") === "4"); +See description above for instructions. +```js +assert(applyFn('2*2fn(1, 2, 3.3)') === '4'); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-036.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-036.md index 32e07738e8..646f803dd8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-036.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-036.md @@ -4,36 +4,60 @@ title: Part 36 challengeType: 0 --- -## Description -
    +# --description-- Replace the `""` in `str2.replace(regex, "")` with a function which takes `match`, `fn` and `args` as arguments and returns `spreadsheetFunctions`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)")); +See description above for instructions. +```js +assert( + code + .replace(/\s/g, '') + .includes('returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions)') +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-037.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-037.md index 7aa4b64216..7cf15c0f70 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-037.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-037.md @@ -4,38 +4,64 @@ title: Part 37 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("returnstr2.replace(regex,(match,fn,args)=>spreadsheetFunctions.hasOwnProperty(fn.toLowerCase()))")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-038.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-038.md index 4463fa6917..293bd5e7b0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-038.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-038.md @@ -4,36 +4,56 @@ title: Part 38 challengeType: 0 --- -## Description -
    +# --description-- Now use the ternary operator in the last line to return `applyFunction(fn, args)` if the statement is true, and `match` otherwise. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(applyFn("2+2*2") === "6" && applyFn("(2+2)*2") === "4*2"); +See description above for instructions. +```js +assert(applyFn('2+2*2') === '6' && applyFn('(2+2)*2') === '4*2'); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-039.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-039.md index c5901465d8..0c746b7896 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-039.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-039.md @@ -4,36 +4,56 @@ title: Part 39 challengeType: 0 --- -## Description -
    +# --description-- Now define an empty function `range` which takes `start` and `end` as arguments (define it in the global scope). -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constrange=(start,end)=>")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('constrange=(start,end)=>')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-040.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-040.md index c3e430d99a..be85cf4cc1 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-040.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-040.md @@ -4,36 +4,59 @@ title: Part 40 challengeType: 0 --- -## Description -
    +# --description-- `range` should set `arr` to `[start]` and should then return `arr`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constarr=[start]") && JSON.stringify(range(1)) === "[1]"); +See description above for instructions. +```js +assert( + code.replace(/\s/g, '').includes('constarr=[start]') && + JSON.stringify(range(1)) === '[1]' +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-041.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-041.md index b2db9e16ee..4d01814aa2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-041.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-041.md @@ -4,36 +4,56 @@ title: Part 41 challengeType: 0 --- -## Description -
    +# --description-- After declaring `arr`, but before returning it, `range` should use the `push` method to add `end` onto `arr`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(range(1, 2)) === "[1,2]" && code.includes("push")); +See description above for instructions. +```js +assert(JSON.stringify(range(1, 2)) === '[1,2]' && code.includes('push')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-042.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-042.md index a7e28c4e19..b0ce7a399f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-042.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-042.md @@ -4,8 +4,7 @@ title: Part 42 challengeType: 0 --- -## Description -
    +# --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. @@ -18,31 +17,56 @@ The `concat` method returns a new array instead of modifying an existing one: Use `concat` instead of `push` to return the result of adding `end` to `arr`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(range(1,2)) === "[1,2]" && code.includes("concat") && !(code.includes("push"))); +See description above for instructions. +```js +assert( + JSON.stringify(range(1, 2)) === '[1,2]' && + code.includes('concat') && + !code.includes('push') +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-043.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-043.md index 58991fdeec..2388d71e86 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-043.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-043.md @@ -4,8 +4,7 @@ title: Part 43 challengeType: 0 --- -## Description -
    +# --description-- The `concat` method can also accept arrays: @@ -16,31 +15,52 @@ The `concat` method can also accept arrays: Use this form of `concat` by passing an array with just `end` to it: `arr.concat([end])`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("returnarr.concat([end])")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('returnarr.concat([end])')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-044.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-044.md index c9adb55508..e1a74c37be 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-044.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-044.md @@ -4,36 +4,59 @@ title: Part 44 challengeType: 0 --- -## Description -
    +# --description-- Replace the call to `arr` in `arr.concat([end])` with `[start]` and remove the `arr` variable and its definition. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(!(code.includes("arr")) && code.replace(/\s/g, "").includes("[start].concat([end])")); +See description above for instructions. +```js +assert( + !code.includes('arr') && + code.replace(/\s/g, '').includes('[start].concat([end])') +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-045.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-045.md index 02216d1371..bf58c929d4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-045.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-045.md @@ -4,36 +4,59 @@ title: Part 45 challengeType: 0 --- -## Description -
    +# --description-- Use the ternary operator to return `[]` if `start > end` and `[start].concat([end])` otherwise. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(range(3, 2)) === "[]" && JSON.stringify(range(1, 3)) === "[1,3]"); +See description above for instructions. +```js +assert( + JSON.stringify(range(3, 2)) === '[]' && + JSON.stringify(range(1, 3)) === '[1,3]' +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-046.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-046.md index c39dbc82e9..fc1c025775 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-046.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-046.md @@ -4,36 +4,56 @@ title: Part 46 challengeType: 0 --- -## Description -
    +# --description-- Replace `[end]` with a recursive call to `range`: `[start].concat(range(start + 1, end))` -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(range(1, 5)) === "[1,2,3,4,5]"); +See description above for instructions. +```js +assert(JSON.stringify(range(1, 5)) === '[1,2,3,4,5]'); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-047.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-047.md index e11aa91be3..099b3057d5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-047.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-047.md @@ -4,36 +4,62 @@ title: Part 47 challengeType: 0 --- -## Description -
    +# --description-- Remove the curly braces and `return` keyword from `range`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constrange=(start,end)=>start>end?[]:[start].concat(range(start+1,end))")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-048.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-048.md index 5dcd70bfaf..cae1db1ed0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-048.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-048.md @@ -4,36 +4,56 @@ title: Part 48 challengeType: 0 --- -## Description -
    +# --description-- Define a function `charRange` which takes `start` and `end` as arguments. It should return `start`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constcharRange=(start,end)=>start")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('constcharRange=(start,end)=>start')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-049.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-049.md index 20cd8e47d3..1cf963d4fc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-049.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-049.md @@ -4,36 +4,56 @@ title: Part 49 challengeType: 0 --- -## Description -
    +# --description-- Make `charRange` return `range(start, end)`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(charRange(1,5)) === "[1,2,3,4,5]"); +See description above for instructions. +```js +assert(JSON.stringify(charRange(1, 5)) === '[1,2,3,4,5]'); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-050.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-050.md index 12a6231a7b..26b8ad1601 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-050.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-050.md @@ -4,36 +4,56 @@ title: Part 50 challengeType: 0 --- -## Description -
    +# --description-- Use the `charCodeAt(0)` method on `start` and `end` in `charRange`, like this: `start.charCodeAt(0)`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(charRange("A", "C")) === "[65,66,67]"); +See description above for instructions. +```js +assert(JSON.stringify(charRange('A', 'C')) === '[65,66,67]'); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-051.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-051.md index 6d8c0c7393..3e6cabe500 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-051.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-051.md @@ -4,36 +4,60 @@ title: Part 51 challengeType: 0 --- -## Description -
    +# --description-- Chain `map` onto `range(start.charCodeAt(0), end.charCodeAt(0))`, with `x => x` as the argument. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("range(start.charCodeAt(0),end.charCodeAt(0)).map(x=>x)")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-052.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-052.md index 3e70fa47a4..91fbafbe44 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-052.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-052.md @@ -4,36 +4,56 @@ title: Part 52 challengeType: 0 --- -## Description -
    +# --description-- Now, pass `x` to `String.fromCharCode` in the arrow function. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(charRange("A", "C")) === '["A","B","C"]'); +See description above for instructions. +```js +assert(JSON.stringify(charRange('A', 'C')) === '["A","B","C"]'); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-053.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-053.md index d42e3ed697..c94c612c3e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-053.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-053.md @@ -4,36 +4,62 @@ title: Part 53 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constevalFormula=x=>{constrangeRegex=/([A-J])([1-9][0-9]?):([A-J])([1-9][0-9]?)/gi")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-054.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-054.md index 44bcfda469..06776c4db0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-054.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-054.md @@ -4,36 +4,60 @@ title: Part 54 challengeType: 0 --- -## Description -
    +# --description-- Define a function `rangeFromString` in `evalFormula` which takes `n1` and `n2` as arguments and returns `n1`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>n1/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-055.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-055.md index 255c0c15f9..bf1cb65d4c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-055.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-055.md @@ -4,36 +4,60 @@ title: Part 55 challengeType: 0 --- -## Description -
    +# --description-- Replace the `n1` return value in `rangeFromString` with `range(n1, n2)`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /evalFormula.*constrangeFromString=\(n1,n2\)=>range\(n1,n2\)/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-056.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-056.md index 6b9cd463b1..1ead4f0f65 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-056.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-056.md @@ -4,36 +4,60 @@ title: Part 56 challengeType: 0 --- -## Description -
    +# --description-- As `n1` and `n2` are actually strings, replace `n1` and `n2` with `parseInt(n1)` and `parseInt(n2)`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/evalFormula.*constrangeFromString=\(n1,n2\)=>range\(parseInt\(n1\),parseInt\(n2\)\)/.test(code.replace(/\s/g, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-057.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-057.md index 1d6715e461..17dc5e2a29 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-057.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-057.md @@ -4,36 +4,58 @@ title: Part 57 challengeType: 0 --- -## Description -
    +# --description-- Now define a function `elemValue`, which takes an argument `n` and returns `n`. Use the curly brace arrow function syntax. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /evalFormula.*constelemValue=n=>\{returnn;?\}/.test(code.replace(/\s/g, '')) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-058.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-058.md index 9c8597a3f7..71aa31caaf 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-058.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-058.md @@ -4,36 +4,60 @@ title: Part 58 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/elemValue.*constfn=\(?c\)?=>document\.getElementById\(c\+n\)\.value;?returnfn;?\}/.test(code.replace(/\s/g, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-059.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-059.md index 52384bfe1c..cf99f3c411 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-059.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-059.md @@ -4,36 +4,58 @@ title: Part 59 challengeType: 0 --- -## Description -
    +# --description-- Now define `fn` to be `elemValue("1")` (inside `evalFormula` but outside `elemValue`). As `elemValue` returns a function, `fn` is also a function. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /elemValue.*constfn=elemValue\(['"]1['"]\);?\}/.test(code.replace(/\s/g, '')) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-060.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-060.md index 159698fad9..ee16d60769 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-060.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-060.md @@ -4,36 +4,60 @@ title: Part 60 challengeType: 0 --- -## Description -
    +# --description-- Finally, return `fn("A")`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /elemValue.*constfn=elemValue\(['"]1['"]\);?returnfn\(['"]A['"]\);?\}/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-061.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-061.md index a096c68a10..fa3ca2aa1f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-061.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-061.md @@ -4,38 +4,62 @@ title: Part 61 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constelemValue=n=>{returnc=>document.getElementById(c+n).value")); +See description above for instructions. +```js +assert( + code + .replace(/\s/g, '') + .includes('constelemValue=n=>{returnc=>document.getElementById(c+n).value') +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-062.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-062.md index 0c95656b2b..2fac50d883 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-062.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-062.md @@ -4,36 +4,60 @@ title: Part 62 challengeType: 0 --- -## Description -
    +# --description-- Now, remove the curly braces and return statement. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /constelemValue=n=>\(?c=>document\.getElementById\(c\+n\)\.value/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-063.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-063.md index 0536e9608f..6fcf02e236 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-063.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-063.md @@ -4,36 +4,60 @@ title: Part 63 challengeType: 0 --- -## Description -
    +# --description-- You also don't need the parentheses in `elemValue` - it's parsed this way automatically. Remove them. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /constelemValue=n=>c=>document\.getElementById\(c\+n\)\.value/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-064.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-064.md index f5c3dd14a0..522d327e03 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-064.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-064.md @@ -4,38 +4,58 @@ title: Part 64 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constaddChars=c1=>c2=>c1+c2")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>c1+c2')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-065.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-065.md index c94bba2a3c..add36812d0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-065.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-065.md @@ -4,8 +4,7 @@ title: Part 65 challengeType: 0 --- -## Description -
    +# --description-- You can add more arguments by simply adding another arrow with another argument name: @@ -15,31 +14,52 @@ 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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constaddChars=c1=>c2=>n=>c1+c2+n")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>c1+c2+n')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-066.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-066.md index e365923925..2181700b2e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-066.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-066.md @@ -4,36 +4,58 @@ title: Part 66 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constaddChars=c1=>c2=>n=>charRange(c1,c2)")); +See description above for instructions. +```js +assert( + code.replace(/\s/g, '').includes('constaddChars=c1=>c2=>n=>charRange(c1,c2)') +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-067.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-067.md index 61a87f1705..d05b9f43ef 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-067.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-067.md @@ -4,8 +4,7 @@ title: Part 67 challengeType: 0 --- -## Description -
    +# --description-- You call curried functions like this: @@ -15,32 +14,58 @@ const result = add(1)(2); Use `map` on the `charRange` in `addChars`, passing in `x => elemValue(n)(x)` as the argument. +# --hints-- -
    - -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constaddChars=c1=>c2=>n=>charRange(c1,c2).map(x=>elemValue(n)(x))")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-068.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-068.md index 126569a12b..e23c473c57 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-068.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-068.md @@ -4,38 +4,62 @@ title: Part 68 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constaddChars=c1=>c2=>n=>charRange(c1,c2).map(elemValue(n))")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-069.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-069.md index 60277a2696..bbdf0b3e39 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-069.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-069.md @@ -4,36 +4,60 @@ title: Part 69 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(!(code.includes("const fn")) && code.includes("varRangeExpanded") && evalFormula("A1:J133") === "3"); +See description above for instructions. +```js +assert( + !code.includes('const fn') && + code.includes('varRangeExpanded') && + evalFormula('A1:J133') === '3' +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-070.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-070.md index 83a0aeb1e3..f4d69968f6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-070.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-070.md @@ -4,36 +4,62 @@ title: Part 70 challengeType: 0 --- -## Description -
    +# --description-- Replace the `""` in `varRangeExpanded` with a function, which takes `match`, `c1`, `n1`, `c2` and `n2` as arguments, and returns `n1`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes('constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>n1)')); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-071.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-071.md index 618a688ff0..bbfa50e527 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-071.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-071.md @@ -4,36 +4,62 @@ title: Part 71 challengeType: 0 --- -## Description -
    +# --description-- Replace the `n1` return value in `varRangeExpanded` with `rangeFromString(n1, n2)`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes('constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2))')); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-072.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-072.md index 031feb013c..89d22538c9 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-072.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-072.md @@ -4,38 +4,64 @@ title: Part 72 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes('constvarRangeExpanded=x.replace(rangeRegex,(match,c1,n1,c2,n2)=>rangeFromString(n1,n2).map(addChars(c1)(c2)))')); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-073.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-073.md index f5dc4dd760..c37b1fbcc1 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-073.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-073.md @@ -4,36 +4,60 @@ title: Part 73 challengeType: 0 --- -## Description -
    +# --description-- The function in `varRangeExpanded` contains an unused argument. Replace or prefix it with an underscore. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constvarRangeExpanded=x.replace(rangeRegex,(_")); +See description above for instructions. +```js +assert( + code + .replace(/\s/g, '') + .includes('constvarRangeExpanded=x.replace(rangeRegex,(_') +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-074.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-074.md index 457e826a33..cb60d1204a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-074.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-074.md @@ -4,36 +4,60 @@ title: Part 74 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.includes("varRegex") && code.includes("varExpanded") && evalFormula("aC12bc") === "abc"); +See description above for instructions. +```js +assert( + code.includes('varRegex') && + code.includes('varExpanded') && + evalFormula('aC12bc') === 'abc' +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-075.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-075.md index 727300ec33..45e6dfedf5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-075.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-075.md @@ -4,36 +4,62 @@ title: Part 75 challengeType: 0 --- -## Description -
    +# --description-- Replace the `""` in `varExpanded` with `match => document.getElementById(match.toUpperCase()).value`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constvarExpanded=varRangeExpanded.replace(varRegex,match=>document.getElementById(match.toUpperCase()).value)")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-076.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-076.md index 4661c84e24..88d21df6ee 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-076.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-076.md @@ -4,35 +4,56 @@ title: Part 76 challengeType: 0 --- -## Description -
    +# --description-- Set `functionExpanded` to `applyFn(varExpanded)` in `evalFormula`. Return `functionExpanded`. -
    +# --hints-- -## Instructions -
    +See description above for instructions. - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.includes("functionExpanded") && applyFn("2+2") === "4"); +```js +assert(code.includes('functionExpanded') && applyFn('2+2') === '4'); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-077.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-077.md index 257f55d2c8..0f0618a283 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-077.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-077.md @@ -4,38 +4,58 @@ title: Part 77 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(evalFormula("(2+2)*2") === "8") +See description above for instructions. +```js +assert(evalFormula('(2+2)*2') === '8'); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-078.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-078.md index 7a426f9e39..7067566ba7 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-078.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-078.md @@ -4,8 +4,7 @@ title: Part 78 challengeType: 0 --- -## Description -
    +# --description-- You can define arrow functions without arguments: @@ -15,31 +14,52 @@ const two = () => 2; Define an empty arrow function without arguments and assign it to `window.onload`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("window.onload=()=>")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('window.onload=()=>')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-079.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-079.md index ed53fd7747..c621e18baf 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-079.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-079.md @@ -4,36 +4,60 @@ title: Part 79 challengeType: 0 --- -## Description -
    +# --description-- In `window.onload`, assign `document.getElementById("container")` to `container`. Also assign `charRange("A", "J")` to `letters`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/window\.onload=\(\)=>\{constcontainer=document\.getElementById\(["']container["']\);?constletters=charRange\(["']A["'],["']J["']\);?\}/.test(code.replace(/\s/g, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-080.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-080.md index d8c154a53a..6ee614540c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-080.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-080.md @@ -4,36 +4,60 @@ title: Part 80 challengeType: 0 --- -## Description -
    +# --description-- Now define a function `createLabel` which takes an argument `name` and has an empty body. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{\}/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-081.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-081.md index 12993e6ec1..c66680ccbf 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-081.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-081.md @@ -4,36 +4,60 @@ title: Part 81 challengeType: 0 --- -## Description -
    +# --description-- Inside `createLabel`, assign `document.createElement("div")` to `label`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/window\.onload[\s\S]*constcreateLabel=\(?name\)?=>\{constlabel=document\.createElement\(["']div["']\);?\}/.test(code.replace(/\s/g, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-082.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-082.md index f5cca1c038..35f16a5c66 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-082.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-082.md @@ -4,8 +4,7 @@ title: Part 82 challengeType: 0 --- -## Description -
    +# --description-- Add the following code to `createLabel`: @@ -15,32 +14,56 @@ label.textContent = name; container.appendChild(label); ``` +# --hints-- -
    - -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: 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, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-083.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-083.md index c314d8ee44..45e0686ea0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-083.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-083.md @@ -4,38 +4,58 @@ title: Part 83 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("letters.forEach(createLabel)")) +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('letters.forEach(createLabel)')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-084.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-084.md index 297bf293bf..18f8d7d281 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-084.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-084.md @@ -4,36 +4,56 @@ title: Part 84 challengeType: 0 --- -## Description -
    +# --description-- Add `range(1, 99)` to the end of `window.onload` (the result will be discarded for now). -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert(/window\.onload[\s\S]*range\(1,99\);?\}/.test(code.replace(/\s/g, ''))); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-085.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-085.md index 3b888074cb..82ef715a1e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-085.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-085.md @@ -4,36 +4,60 @@ title: Part 85 challengeType: 0 --- -## Description -
    +# --description-- Chain `forEach` onto `range(1, 99)`, passing in `createLabel` as an argument. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/window\.onload[\s\S]*range\(1,99\)\.forEach\(createLabel\);?\}/.test(code.replace(/\s/g, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-086.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-086.md index b5828ffb8e..b710ab5c3e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-086.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-086.md @@ -4,36 +4,60 @@ title: Part 86 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?\}\);?\}/.test(code.replace(/\s/g, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-087.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-087.md index 5892ca0c81..d7ca9ad403 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-087.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-087.md @@ -4,36 +4,60 @@ title: Part 87 challengeType: 0 --- -## Description -
    +# --description-- Inside the `range` `forEach`, use the `forEach` method on `letters`, passing in a function with argument `x` and an empty body. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/window\.onload.*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{\}\);?\}\);?\}/.test(code.replace(/\s/g, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-088.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-088.md index f4968a5d88..00d972937b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-088.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-088.md @@ -4,36 +4,60 @@ title: Part 88 challengeType: 0 --- -## Description -
    +# --description-- Inside `letters.forEach`, assign `document.createElement("input")` to `input`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/window\.onload[\s\S]*range\(1,99\)\.forEach\(\(?x\)?=>\{createLabel\(x\);?letters\.forEach\(\(?y\)?=>\{constinput=document\.createElement\(["']input["']\);?\}\);?\}\);?\}/.test(code.replace(/\s/g, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-089.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-089.md index 8ad35ac5eb..832794795f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-089.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-089.md @@ -4,8 +4,7 @@ title: Part 89 challengeType: 0 --- -## Description -
    +# --description-- Add the following code to `letters.forEach`: @@ -16,32 +15,56 @@ input.onchange = update; container.appendChild(input); ``` +# --hints-- -
    - -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: 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, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-090.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-090.md index da9b7807e1..4af72a0a31 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-090.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-090.md @@ -4,36 +4,60 @@ title: Part 90 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /constupdate=\(?event\)?=>\{?constelement=event\.target;?\}?/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-091.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-091.md index 946f5356e4..8ee3e0cde6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-091.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-091.md @@ -4,36 +4,60 @@ title: Part 91 challengeType: 0 --- -## Description -
    +# --description-- Now set `value` to `element.value.replace(/\s/g, "")`. This removes all whitespace from `element` so that we can ignore it. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?\}/.test(code.replace(/\s/g, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-092.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-092.md index f5b2646b79..936fab8d2f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-092.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-092.md @@ -4,38 +4,62 @@ title: Part 92 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constupdate=\(?event\)?=>\{constelement=event\.target;?constvalue=element\.value\.replace\(\/\\s\/g,["']{2}\);?if\(!\(?value\.includes\(element\.id\)\)?\)\{\}\}/.test(code.replace(/\s/g, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-093.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-093.md index cf21b61e64..0fb54cf093 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-093.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-093.md @@ -4,36 +4,60 @@ title: Part 93 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: 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, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-094.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-094.md index 852a740d6b..8b7b2a71f4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-094.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-094.md @@ -4,38 +4,58 @@ title: Part 94 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("console.log(value.slice(0,2))")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('console.log(value.slice(0,2))')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-095.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-095.md index 8a5215c6aa..aabcafbe1d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-095.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-095.md @@ -4,38 +4,58 @@ title: Part 95 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("console.log(value.slice(1))")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('console.log(value.slice(1))')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-096.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-096.md index ac941c56da..998a798e8c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-096.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-096.md @@ -4,36 +4,60 @@ title: Part 96 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: 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, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-097.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-097.md index cda4c3c8b2..cb3b2d00b9 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-097.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-097.md @@ -4,8 +4,7 @@ title: Part 97 challengeType: 0 --- -## Description -
    +# --description-- The array destructuring syntax can be used to extract values from arrays: @@ -16,31 +15,55 @@ 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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/["']?random["']?:\(\[x,y\]\)=>x/.test(code.replace(/\s/g, "")) && spreadsheetFunctions["random"]([1, 2]) === 1); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-098.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-098.md index 77fa1cc0a5..aa13f8d406 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-098.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-098.md @@ -4,36 +4,60 @@ title: Part 98 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/["']?random["']?:\(\[x,y\]\)=>Math\.floor\(Math\.random\(\)\*y\+x\)/.test(code.replace(/\s/g, "")) && spreadsheetFunctions["random"]([1, 1]) === 1); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-099.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-099.md index 6281d3ba41..f9e657f1bf 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-099.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-099.md @@ -4,8 +4,7 @@ title: Part 99 challengeType: 0 --- -## Description -
    +# --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. @@ -17,31 +16,56 @@ 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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /(spreadsheetFunctions\[["']random["']\]\(1,1000\))===\1/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-100.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-100.md index 24b823df86..1697e598f0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-100.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-100.md @@ -4,8 +4,7 @@ title: Part 100 challengeType: 0 --- -## Description -
    +# --description-- This is (probably) false, so `random` is certainly impure. @@ -13,31 +12,54 @@ The second property of pure functions is that they perform no side effects, whic Call `window.onload()` in `update`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /update=\(?event\)?=>\{.*window\.onload\(\).*\}/.test(code.replace(/\s/g, '')) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-101.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-101.md index 6f4ec15c6d..61aa144c86 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-101.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-101.md @@ -4,36 +4,60 @@ title: Part 101 challengeType: 0 --- -## Description -
    +# --description-- Now try calling `highPrecedence` and pass it the string `"2*2"` without assigning it to a variable in `update`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /update=\(?event\)?=>\{.*highPrecedence\((['"])2\*2\1\).*\}/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-102.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-102.md index 0d2e29b622..bfb3c9dbe3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-102.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-102.md @@ -4,38 +4,62 @@ title: Part 102 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /update=\(?event\)?=>\{.*console\.log\((highPrecedence\(['"]2\*2['"]\))===\1\).*\}/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-103.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-103.md index c1d4721ad6..91f7fae7ad 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-103.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-103.md @@ -4,38 +4,58 @@ title: Part 103 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(!code.includes("console.log")); +See description above for instructions. +```js +assert(!code.includes('console.log')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-104.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-104.md index e958a58742..d508acc212 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-104.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-104.md @@ -4,40 +4,61 @@ title: Part 104 challengeType: 0 --- -## Description -
    +# --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. +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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: const nos = code.replace(/\s/g, ""); assert(nos.includes('elemValue=n=>c=>""') && nos.includes('match=>""')) +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-105.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-105.md index 78bf1ab856..dc27a943e3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-105.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-105.md @@ -4,38 +4,58 @@ title: Part 105 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("evalFormula=(x,cells)=>{")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('evalFormula=(x,cells)=>{')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-106.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-106.md index f68c0754ad..c7c8f0526e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-106.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-106.md @@ -4,36 +4,62 @@ title: Part 106 challengeType: 0 --- -## Description -
    +# --description-- When calling `evalFormula` in `update`, pass in `Array.from(document.getElementById("container").children)` as the `cells` argument. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes('evalFormula(value.slice(1),Array.from(document.getElementById("container").children))')); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-107.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-107.md index 44863a335e..4760d8a908 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-107.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-107.md @@ -4,36 +4,56 @@ title: Part 107 challengeType: 0 --- -## Description -
    +# --description-- Update the recursive call to `evalFormula` by passing in `cells` as the second argument. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("evalFormula(functionExpanded,cells)")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('evalFormula(functionExpanded,cells)')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-108.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-108.md index 0df4803109..1136df0e50 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-108.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-108.md @@ -4,36 +4,56 @@ title: Part 108 challengeType: 0 --- -## Description -
    +# --description-- Add a function `idToText` to `evalFormula`, which takes the argument `id` and returns `cells`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert(/constidToText=\(?id\)?=>cells/.test(code.replace(/\s/g, ''))); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-109.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-109.md index 7773443ac1..f89c209534 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-109.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-109.md @@ -4,38 +4,62 @@ title: Part 109 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell===id\)/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-110.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-110.md index 0ace412bf7..d48921d811 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-110.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-110.md @@ -4,36 +4,60 @@ title: Part 110 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-111.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-111.md index 4f4bd2ef7a..df69c964ce 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-111.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-111.md @@ -4,36 +4,60 @@ title: Part 111 challengeType: 0 --- -## Description -
    +# --description-- Use the `value` property on the result of `idToText` to return the text inside the cell, rather than the cell itself. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constidToText=\(?id\)?=>cells\.find\(\(?cell\)?=>cell\.id===id\)\.value/.test(code.replace(/\s/g, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-112.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-112.md index d06a74c493..bb046b7f64 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-112.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-112.md @@ -4,36 +4,56 @@ title: Part 112 challengeType: 0 --- -## Description -
    +# --description-- Change the empty string in `elemValue` to the result of calling `idToText` with `c + n`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("elemValue=n=>c=>idToText(c+n)")); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').includes('elemValue=n=>c=>idToText(c+n)')); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-113.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-113.md index 128f1fd2c1..23e421f313 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-113.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-113.md @@ -4,37 +4,58 @@ title: Part 113 challengeType: 0 --- -## Description -
    +# --description-- Change the empty string in `varExpanded` to the result of calling `idToText` with `match.toUpperCase()`. -
    +# --hints-- -## Instructions -
    - - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("match=>idToText(match.toUpperCase())")) +See description above for instructions. +```js +assert( + code.replace(/\s/g, '').includes('match=>idToText(match.toUpperCase())') +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-114.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-114.md index 23a5f9f39b..250937db60 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-114.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-114.md @@ -4,38 +4,58 @@ title: Part 114 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === "[2,6,4]"); +See description above for instructions. +```js +assert(JSON.stringify(spreadsheetFunctions.increment([1, 5, 3])) === '[2,6,4]'); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-115.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-115.md index d93a81821a..da2191ea10 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-115.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-115.md @@ -4,38 +4,60 @@ title: Part 115 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === "[2,6]"); +See description above for instructions. +```js +assert( + JSON.stringify(spreadsheetFunctions.firsttwo([2, 6, 1, 4, 3])) === '[2,6]' +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-116.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-116.md index 7f3e4d5535..c7dca83212 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-116.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-116.md @@ -4,8 +4,7 @@ title: Part 116 challengeType: 0 --- -## Description -
    +# --description-- You can also pass in a negative argument to `slice` to specify that index from the end: @@ -15,31 +14,54 @@ You can also pass in a negative argument to `slice` to specify that index from t Use a negative index to add a function `lasttwo` which returns the last two elements of an array. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === "[4,3]"); +See description above for instructions. +```js +assert( + JSON.stringify(spreadsheetFunctions.lasttwo([2, 6, 1, 4, 3])) === '[4,3]' +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-117.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-117.md index ed7581f7ec..e3a92a78ad 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-117.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-117.md @@ -4,8 +4,7 @@ title: Part 117 challengeType: 0 --- -## Description -
    +# --description-- The `%` operator returns the remainder: @@ -17,31 +16,52 @@ The `%` operator returns the remainder: Add an `isEven` function (to the global scope) which returns whether the number passed to it is even. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(isEven(20) && !isEven(31)); +See description above for instructions. +```js +assert(isEven(20) && !isEven(31)); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-118.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-118.md index 3e05c42ee3..a0e67bddd4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-118.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-118.md @@ -4,8 +4,7 @@ title: Part 118 challengeType: 0 --- -## Description -
    +# --description-- The `filter` method keeps only the elements of an array that satisfy the function passed to it: @@ -15,31 +14,55 @@ The `filter` method keeps only the elements of an array that satisfy the functio Use `filter` to add a function called `even` to `spreadsheetFunctions`, which returns all the even elements of an array, `nums`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(spreadsheetFunctions.even([2,3,5,6,9,4])) === "[2,6,4]" && code.includes("filter")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-119.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-119.md index 49c6d83e25..aeb6c78e55 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-119.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-119.md @@ -4,8 +4,7 @@ title: Part 119 challengeType: 0 --- -## Description -
    +# --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. @@ -19,31 +18,54 @@ For example, here's how to multiply all the value in an array: Using `reduce`, add a function `sum` to `spreadsheetFunctions`, which sums all values in the array passed to it. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(spreadsheetFunctions.sum([10,5,1,3]) === 19 && code.includes("reduce")); +See description above for instructions. +```js +assert( + spreadsheetFunctions.sum([10, 5, 1, 3]) === 19 && code.includes('reduce') +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-120.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-120.md index 753fa86634..fa30f290bf 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-120.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-120.md @@ -4,38 +4,60 @@ title: Part 120 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(spreadsheetFunctions.has2([2,3,5]) && !spreadsheetFunctions.has2([1,3,10])); +See description above for instructions. +```js +assert( + spreadsheetFunctions.has2([2, 3, 5]) && !spreadsheetFunctions.has2([1, 3, 10]) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-121.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-121.md index 75704cc0d3..698b41192c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-121.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-121.md @@ -4,8 +4,7 @@ title: Part 121 challengeType: 0 --- -## Description -
    +# --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: @@ -17,31 +16,56 @@ The `reduce` method can take a second argument (in addition to the function), sp Add a function `nodups` to `spreadsheetFunctions`, with the value `arr => arr.reduce((a, x) => a.includes(x), [])`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/nodups['"]?:arr=>arr\.reduce\(\(a,x\)=>a\.includes\(x\),\[\]\)/.test(code.replace(/\s/g, ""))) +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-122.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-122.md index 07b9d12c55..b71ad54451 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-122.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-122.md @@ -4,36 +4,59 @@ title: Part 122 challengeType: 0 --- -## Description -
    +# --description-- Use the ternary operator in `nodups` to return `a` if `a.includes(x)` and `a.concat(x)` otherwise. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(spreadsheetFunctions.nodups([1,3,1,5,7,7,9,7])) === "[1,3,5,7,9]"); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-123.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-123.md index 2f415a4629..20f5d1dd8f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-123.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-123.md @@ -4,8 +4,7 @@ title: Part 123 challengeType: 0 --- -## Description -
    +# --description-- ES6 introduced a shorthand object literal syntax: @@ -15,34 +14,54 @@ const myObject = { a }; console.log(myObject); // { a: 10 } ``` -First, move `sum` outside of `spreadsheetFunctions`. -`sum` should be a function expression similar to `isEven`. +First, move `sum` outside of `spreadsheetFunctions`. `sum` should be a function expression similar to `isEven`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(sum([1,2,3]) === 6); +See description above for instructions. +```js +assert(sum([1, 2, 3]) === 6); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-124.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-124.md index a0dfc4334f..3b35dfb646 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-124.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-124.md @@ -4,38 +4,58 @@ title: Part 124 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert(/[{,]sum[,}]/.test(code.replace(/\s/g, ''))); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-125.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-125.md index 801d16a7d6..b8113f0b2e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-125.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-125.md @@ -4,38 +4,60 @@ title: Part 125 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8); +See description above for instructions. +```js +assert( + average([1, 5, 12]) === 6 && spreadsheetFunctions.average([1, 20, 3, 8]) === 8 +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-126.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-126.md index d2e82a23ea..c579f8a61a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-126.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-126.md @@ -4,8 +4,7 @@ title: Part 126 challengeType: 0 --- -## Description -
    +# --description-- The spread operator allow you to pass multiple arguments instead of an array: @@ -17,31 +16,55 @@ sum3(...arr); // 6 Use the spread operator to add `range` to `spreadsheetFunctions`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(JSON.stringify(spreadsheetFunctions.range([1, 5])) === "[1,2,3,4,5]" && code.includes("...")); +See description above for instructions. +```js +assert( + JSON.stringify(spreadsheetFunctions.range([1, 5])) === '[1,2,3,4,5]' && + code.includes('...') +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-127.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-127.md index 3db97046d3..1679b7c613 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-127.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-127.md @@ -4,36 +4,56 @@ title: Part 127 challengeType: 0 --- -## Description -
    +# --description-- Now define a `median` function which takes an argument `nums` (in the global scope). -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert(/constmedian=\(?nums\)?=>/.test(code.replace(/\s/g, ''))); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-128.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-128.md index 3a6b9a6c12..0da636fa5a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-128.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-128.md @@ -4,8 +4,7 @@ title: Part 128 challengeType: 0 --- -## Description -
    +# --description-- The `sort` method sorts an array alphabetically: @@ -15,31 +14,54 @@ The `sort` method sorts an array alphabetically: Assign the sorted `nums` to `sorted` in `median`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constmedian=nums=>{constsorted=nums.sort()")); +See description above for instructions. +```js +assert( + code.replace(/\s/g, '').includes('constmedian=nums=>{constsorted=nums.sort()') +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-129.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-129.md index a25e620631..eb7d431ea5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-129.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-129.md @@ -4,8 +4,7 @@ title: Part 129 challengeType: 0 --- -## Description -
    +# --description-- But our function takes an array of numbers, not strings. Luckily, you can pass a function `fn` as argument to sort: @@ -17,31 +16,56 @@ If `b - a` is less than 0, then `a` will be placed before `b`. As a result, this Use `sort` to sort `nums` in ascending order. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /constmedian=nums=>\{constsorted=nums\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-130.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-130.md index 54322c57b6..d764f65ad5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-130.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-130.md @@ -4,38 +4,62 @@ title: Part 130 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\)/.test( + code.replace(/\s/g, '') + ) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-131.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-131.md index cf2f7c0729..64f7dac6b1 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-131.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-131.md @@ -4,36 +4,60 @@ title: Part 131 challengeType: 0 --- -## Description -
    +# --description-- -Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. +Now define two variable: `length` which is `sorted.length` and `middle` which is `length / 2 - 1`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constmedian=nums=>\{constsorted=nums\.slice\(\)\.sort\(\((.+),(.+)\)=>\1-\2\);?constlength=sorted\.length;?constmiddle=length\/2-1/.test(code.replace(/\s/g, ""))); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-132.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-132.md index 9810bc7f41..c41d3db63a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-132.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-132.md @@ -4,36 +4,56 @@ title: Part 132 challengeType: 0 --- -## Description -
    +# --description-- Add a return statement to `median` so that it returns `isEven(length)`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(median([1,2,3,4]) && !median([1,2,3])); +See description above for instructions. +```js +assert(median([1, 2, 3, 4]) && !median([1, 2, 3])); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-133.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-133.md index e8aa578bcf..59e33ccdb4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-133.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-133.md @@ -4,38 +4,58 @@ title: Part 133 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); +See description above for instructions. +```js +assert(median([1, 20, 3]) === 3 && median([27, 7, 20, 10]) === 15); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-134.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-134.md index af75e68b4b..fae345ecf2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-134.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-134.md @@ -4,36 +4,59 @@ title: Part 134 challengeType: 0 --- -## Description -
    +# --description-- Now add `median` to `spreadsheetFunctions`, just like you added `sum` and `average`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(spreadsheetFunctions.median([1, 20, 3]) === 3 && spreadsheetFunctions.median([27, 7, 20, 10]) === 15); +See description above for instructions. +```js +assert( + spreadsheetFunctions.median([1, 20, 3]) === 3 && + spreadsheetFunctions.median([27, 7, 20, 10]) === 15 +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-135.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-135.md index 13f0fe95f7..e3aaab4602 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-135.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-135.md @@ -4,38 +4,62 @@ title: Part 135 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(spreadsheetFunctions.someeven([1, 5, 4, 3]) && !spreadsheetFunctions.someeven([3, 5, 9]) && code.includes(".some")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-136.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-136.md index 6f54719f01..ac1eb880fd 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-136.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-136.md @@ -4,38 +4,62 @@ title: Part 136 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(spreadsheetFunctions.everyeven([2, 6, 4, 0, 20]) && !spreadsheetFunctions.everyeven([10, 0, 9, 2]) && code.includes(".every")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-137.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-137.md index 6067f97f8d..29f78b83a6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-137.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-137.md @@ -4,8 +4,7 @@ title: Part 137 challengeType: 0 --- -## Description -
    +# --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. @@ -13,31 +12,54 @@ While we don't expect the user to enter particularly large numbers so that perfo Replace the body of `range` with `start`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, ""))); +See description above for instructions. +```js +assert( + /constrange=\(start,end\)=>start(;|const)/.test(code.replace(/\s/g, '')) +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-138.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-138.md index 4da10dd539..f3be54bf1a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-138.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-138.md @@ -4,38 +4,60 @@ title: Part 138 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constrange=(start,end)=>Array(end-start+1)")); +See description above for instructions. +```js +assert( + code.replace(/\s/g, '').includes('constrange=(start,end)=>Array(end-start+1)') +); ``` +# --seed-- -
    +## --before-user-code-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-139.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-139.md index bdbc0f43fa..4d7bfc9e1d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-139.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-139.md @@ -4,38 +4,62 @@ title: Part 139 challengeType: 0 --- -## Description -
    +# --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-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constrange=(start,end)=>Array(end-start+1).fill(start)")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-140.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-140.md index 3c0d24efbc..8ba5b229a4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-140.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-140.md @@ -4,8 +4,7 @@ title: Part 140 challengeType: 0 --- -## Description -
    +# --description-- The function in the `map` method can actually take a second argument: the index of the element. @@ -13,31 +12,58 @@ This is why you need an arrow function in `charRange` - if you don't use one, th Chain `.map((x, i) => x + i)` to `.fill(start)` to add its index to every element in the array in `range`. -
    +# --hints-- -## Instructions -
    - - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, "").includes("constrange=(start,end)=>Array(end-start+1).fill(start).map((x,i)=>x+i)")); +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-- -## Challenge Seed -
    +```html + + + + + Spreadsheet + + + +
    +
    +
    +``` -
    +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - - -### Before Test -
    - -```html - - - - - Spreadsheet - - - -
    -
    -
    -``` - -
    - - -### After Test -
    - -```html - - -``` - -
    - - - -
    - -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-141.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-141.md index d415511b5d..61197724c5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-141.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming-spreadsheet/part-141.md @@ -4,172 +4,21 @@ title: Part 141 challengeType: 0 --- -## Description -
    +# --description-- Congratulations, you've finished your functional programming spreadsheet! Now test it out by crunching some numbers. -
    +# --hints-- -## Instructions -
    +See description above for instructions. - -
    - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: '' +```js ``` +# --seed-- -
    - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -197,25 +46,146 @@ const update = event => {
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- + +```html + +``` + +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md index d018f1db5c..e697a30b39 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301226 --- -## Description -
    +# --description-- + Functional programming is all about creating and using non-mutating functions. -The last challenge introduced the concat method as a way to combine arrays into a new one without mutating the original arrays. Compare concat to the push method. Push adds an item to the end of the same array it is called on, which mutates that array. Here's an example: + +The last challenge introduced the `concat` method as a way to combine arrays into a new one without mutating the original arrays. Compare `concat` to the `push` method. `Push` adds an item to the end of the same array it is called on, which mutates that array. Here's an example: ```js var arr = [1, 2, 3]; @@ -17,38 +18,50 @@ arr.push([4, 5, 6]); // Not the functional programming way ``` -Concat offers a way to add new items to the end of an array without any mutating side effects. -
    +`Concat` offers a way to add new items to the end of an array without any mutating side effects. -## Instructions -
    -Change the nonMutatingPush function so it uses concat to add newItem to the end of original instead of push. The function should return an array. -
    +# --instructions-- -## Tests -
    +Change the `nonMutatingPush` function so it uses `concat` to add `newItem` to the end of `original` instead of `push`. The function should return an array. -```yml -tests: - - text: Your code should use the concat method. - testString: assert(code.match(/\.concat/g)); - - text: Your code should not use the push method. - testString: assert(!code.match(/\.?[\s\S]*?push/g)); - - text: The first array should not change. - testString: assert(JSON.stringify(first) === JSON.stringify([1, 2, 3])); - - text: The second array should not change. - testString: assert(JSON.stringify(second) === JSON.stringify([4, 5])); - - text: nonMutatingPush([1, 2, 3], [4, 5]) should return [1, 2, 3, 4, 5]. - testString: assert(JSON.stringify(nonMutatingPush([1, 2, 3], [4, 5])) === JSON.stringify([1, 2, 3, 4, 5])); +# --hints-- +Your code should use the `concat` method. + +```js +assert(code.match(/\.concat/g)); ``` -
    +Your code should not use the `push` method. -## Challenge Seed -
    +```js +assert(!code.match(/\.?[\s\S]*?push/g)); +``` -
    +The `first` array should not change. + +```js +assert(JSON.stringify(first) === JSON.stringify([1, 2, 3])); +``` + +The `second` array should not change. + +```js +assert(JSON.stringify(second) === JSON.stringify([4, 5])); +``` + +`nonMutatingPush([1, 2, 3], [4, 5])` should return `[1, 2, 3, 4, 5]`. + +```js +assert( + JSON.stringify(nonMutatingPush([1, 2, 3], [4, 5])) === + JSON.stringify([1, 2, 3, 4, 5]) +); +``` + +# --seed-- + +## --seed-contents-- ```js function nonMutatingPush(original, newItem) { @@ -62,14 +75,7 @@ var second = [4, 5]; nonMutatingPush(first, second); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js function nonMutatingPush(original, newItem) { @@ -79,5 +85,3 @@ var first = [1, 2, 3]; var second = [4, 5]; nonMutatingPush(first, second); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/apply-functional-programming-to-convert-strings-to-url-slugs.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/apply-functional-programming-to-convert-strings-to-url-slugs.md index 5d170d587d..c753ab6a82 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/apply-functional-programming-to-convert-strings-to-url-slugs.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/apply-functional-programming-to-convert-strings-to-url-slugs.md @@ -5,46 +5,64 @@ challengeType: 1 forumTopicId: 301227 --- -## Description -
    -The last several challenges covered a number of useful array and string methods that follow functional programming principles. We've also learned about reduce, which is a powerful method used to reduce problems to simpler forms. From computing averages to sorting, any array operation can be achieved by applying it. Recall that map and filter are special cases of reduce. +# --description-- + +The last several challenges covered a number of useful array and string methods that follow functional programming principles. We've also learned about `reduce`, which is a powerful method used to reduce problems to simpler forms. From computing averages to sorting, any array operation can be achieved by applying it. Recall that `map` and `filter` are special cases of `reduce`. + Let's combine what we've learned to solve a practical problem. + Many content management sites (CMS) have the titles of a post added to part of the URL for simple bookmarking purposes. For example, if you write a Medium post titled "Stop Using Reduce", it's likely the URL would have some form of the title string in it (".../stop-using-reduce"). You may have already noticed this on the freeCodeCamp site. -
    -## Instructions -
    -Fill in the urlSlug function so it converts a string title and returns the hyphenated version for the URL. You can use any of the methods covered in this section, and don't use replace. Here are the requirements: +# --instructions-- + +Fill in the `urlSlug` function so it converts a string `title` and returns the hyphenated version for the URL. You can use any of the methods covered in this section, and don't use `replace`. Here are the requirements: + The input is a string with spaces and title-cased words -The output is a string with the spaces between words replaced by a hyphen (-) + +The output is a string with the spaces between words replaced by a hyphen (`-`) + The output should be all lower-cased letters + The output should not have any spaces -
    -## Tests -
    +# --hints-- -```yml -tests: - - text: Your code should not use the replace method for this challenge. - testString: assert(!code.match(/\.?[\s\S]*?replace/g)); - - text: urlSlug("Winter Is Coming") should return "winter-is-coming". - testString: assert(urlSlug("Winter Is Coming") === "winter-is-coming"); - - text: urlSlug(" Winter Is Coming") should return "winter-is-coming". - testString: assert(urlSlug(" Winter Is Coming") === "winter-is-coming"); - - text: urlSlug("A Mind Needs Books Like A Sword Needs A Whetstone") should return "a-mind-needs-books-like-a-sword-needs-a-whetstone". - testString: assert(urlSlug("A Mind Needs Books Like A Sword Needs A Whetstone") === "a-mind-needs-books-like-a-sword-needs-a-whetstone"); - - text: urlSlug("Hold The Door") should return "hold-the-door". - testString: assert(urlSlug("Hold The Door") === "hold-the-door"); +Your code should not use the `replace` method for this challenge. +```js +assert(!code.match(/\.?[\s\S]*?replace/g)); ``` -
    +`urlSlug("Winter Is Coming")` should return `"winter-is-coming"`. -## Challenge Seed -
    +```js +assert(urlSlug('Winter Is Coming') === 'winter-is-coming'); +``` -
    +`urlSlug(" Winter Is Coming")` should return `"winter-is-coming"`. + +```js +assert(urlSlug(' Winter Is Coming') === 'winter-is-coming'); +``` + +`urlSlug("A Mind Needs Books Like A Sword Needs A Whetstone")` should return `"a-mind-needs-books-like-a-sword-needs-a-whetstone"`. + +```js +assert( + urlSlug('A Mind Needs Books Like A Sword Needs A Whetstone') === + 'a-mind-needs-books-like-a-sword-needs-a-whetstone' +); +``` + +`urlSlug("Hold The Door")` should return `"hold-the-door"`. + +```js +assert(urlSlug('Hold The Door') === 'hold-the-door'); +``` + +# --seed-- + +## --seed-contents-- ```js // Only change code below this line @@ -55,14 +73,7 @@ function urlSlug(title) { // Only change code above this line ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js // Only change code below this line @@ -70,5 +81,3 @@ function urlSlug(title) { return title.trim().split(/\s+/).join("-").toLowerCase(); } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md index d93f95f435..ddf36ee4b3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md @@ -5,47 +5,54 @@ challengeType: 1 forumTopicId: 301228 --- -## Description -
    -If you haven't already figured it out, the issue in the previous challenge was with the splice call in the tabClose() function. Unfortunately, splice changes the original array it is called on, so the second call to it used a modified array, and gave unexpected results. +# --description-- + +If you haven't already figured it out, the issue in the previous challenge was with the `splice` call in the `tabClose()` function. Unfortunately, `splice` changes the original array it is called on, so the second call to it used a modified array, and gave unexpected results. + This is a small example of a much larger pattern - you call a function on a variable, array, or an object, and the function changes the variable or something in the object. + One of the core principles of functional programming is to not change things. Changes lead to bugs. It's easier to prevent bugs knowing that your functions don't change anything, including the function arguments or any global variable. -The previous example didn't have any complicated operations but the splice method changed the original array, and resulted in a bug. + +The previous example didn't have any complicated operations but the `splice` method changed the original array, and resulted in a bug. + Recall that in functional programming, changing or altering things is called mutation, and the outcome is called a side effect. A function, ideally, should be a pure function, meaning that it does not cause any side effects. + Let's try to master this discipline and not alter any variable or object in our code. -
    -## Instructions -
    -Fill in the code for the function incrementer so it returns the value of the global variable fixedValue increased by one. -
    +# --instructions-- -## Tests -
    +Fill in the code for the function `incrementer` so it returns the value of the global variable `fixedValue` increased by one. -```yml -tests: - - text: Your function incrementer should not change the value of fixedValue (which is 4). - testString: incrementer(); assert(fixedValue === 4); - - text: Your incrementer function should return a value that is one larger than the fixedValue value. - testString: const __newValue = incrementer(); assert(__newValue === 5); - - text: Your incrementer function should return a value based on the global `fixedValue` variable value. - testString: | - (function() { - fixedValue = 10; - const newValue = incrementer(); - assert(fixedValue === 10 && newValue === 11); - fixedValue = 4; - })(); +# --hints-- +Your function `incrementer` should not change the value of `fixedValue` (which is `4`). + +```js +incrementer(); +assert(fixedValue === 4); ``` -
    +Your `incrementer` function should return a value that is one larger than the `fixedValue` value. -## Challenge Seed -
    +```js +const __newValue = incrementer(); +assert(__newValue === 5); +``` -
    +Your `incrementer` function should return a value based on the global `fixedValue` variable value. + +```js +(function () { + fixedValue = 10; + const newValue = incrementer(); + assert(fixedValue === 10 && newValue === 11); + fixedValue = 4; +})(); +``` + +# --seed-- + +## --seed-contents-- ```js // The global variable @@ -59,14 +66,7 @@ function incrementer () { } ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js var fixedValue = 4 @@ -75,5 +75,3 @@ function incrementer() { return fixedValue + 1 } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/combine-an-array-into-a-string-using-the-join-method.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/combine-an-array-into-a-string-using-the-join-method.md index ee7afe2378..f34de83d20 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/combine-an-array-into-a-string-using-the-join-method.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/combine-an-array-into-a-string-using-the-join-method.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 18221 --- -## Description -
    -The join method is used to join the elements of an array together to create a string. It takes an argument for the delimiter that is used to separate the array elements in the string. +# --description-- + +The `join` method is used to join the elements of an array together to create a string. It takes an argument for the delimiter that is used to separate the array elements in the string. + Here's an example: ```js @@ -16,39 +17,56 @@ var str = arr.join(" "); // Sets str to "Hello World" ``` -
    +# --instructions-- -## Instructions -
    -Use the join method (among others) inside the sentensify function to make a sentence from the words in the string str. The function should return a string. For example, "I-like-Star-Wars" would be converted to "I like Star Wars". For this challenge, do not use the replace method. -
    +Use the `join` method (among others) inside the `sentensify` function to make a sentence from the words in the string `str`. The function should return a string. For example, "I-like-Star-Wars" would be converted to "I like Star Wars". For this challenge, do not use the `replace` method. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your code should use the join method. - testString: assert(code.match(/\.join/g)); - - text: Your code should not use the replace method. - testString: assert(!code.match(/\.?[\s\S]*?replace/g)); - - text: sentensify("May-the-force-be-with-you") should return a string. - testString: assert(typeof sentensify("May-the-force-be-with-you") === "string"); - - text: sentensify("May-the-force-be-with-you") should return "May the force be with you". - testString: assert(sentensify("May-the-force-be-with-you") === "May the force be with you"); - - text: sentensify("The.force.is.strong.with.this.one") should return "The force is strong with this one". - testString: assert(sentensify("The.force.is.strong.with.this.one") === "The force is strong with this one"); - - text: sentensify("There,has,been,an,awakening") should return "There has been an awakening". - testString: assert(sentensify("There,has,been,an,awakening") === "There has been an awakening"); +Your code should use the `join` method. +```js +assert(code.match(/\.join/g)); ``` -
    +Your code should not use the `replace` method. -## Challenge Seed -
    +```js +assert(!code.match(/\.?[\s\S]*?replace/g)); +``` -
    +`sentensify("May-the-force-be-with-you")` should return a string. + +```js +assert(typeof sentensify('May-the-force-be-with-you') === 'string'); +``` + +`sentensify("May-the-force-be-with-you")` should return `"May the force be with you"`. + +```js +assert(sentensify('May-the-force-be-with-you') === 'May the force be with you'); +``` + +`sentensify("The.force.is.strong.with.this.one")` should return `"The force is strong with this one"`. + +```js +assert( + sentensify('The.force.is.strong.with.this.one') === + 'The force is strong with this one' +); +``` + +`sentensify("There,has,been,an,awakening")` should return `"There has been an awakening"`. + +```js +assert( + sentensify('There,has,been,an,awakening') === 'There has been an awakening' +); +``` + +# --seed-- + +## --seed-contents-- ```js function sentensify(str) { @@ -60,14 +78,7 @@ function sentensify(str) { sentensify("May-the-force-be-with-you"); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js function sentensify(str) { @@ -76,5 +87,3 @@ function sentensify(str) { // Only change code above this line } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/combine-two-arrays-using-the-concat-method.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/combine-two-arrays-using-the-concat-method.md index 3b4097d315..e10941a9c8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/combine-two-arrays-using-the-concat-method.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/combine-two-arrays-using-the-concat-method.md @@ -5,44 +5,51 @@ challengeType: 1 forumTopicId: 301229 --- -## Description -
    -Concatenation means to join items end to end. JavaScript offers the concat method for both strings and arrays that work in the same way. For arrays, the method is called on one, then another array is provided as the argument to concat, which is added to the end of the first array. It returns a new array and does not mutate either of the original arrays. Here's an example: +# --description-- + +Concatenation means to join items end to end. JavaScript offers the `concat` method for both strings and arrays that work in the same way. For arrays, the method is called on one, then another array is provided as the argument to `concat`, which is added to the end of the first array. It returns a new array and does not mutate either of the original arrays. Here's an example: ```js [1, 2, 3].concat([4, 5, 6]); // Returns a new array [1, 2, 3, 4, 5, 6] ``` -
    +# --instructions-- -## Instructions -
    -Use the concat method in the nonMutatingConcat function to concatenate attach to the end of original. The function should return the concatenated array. -
    +Use the `concat` method in the `nonMutatingConcat` function to concatenate `attach` to the end of `original`. The function should return the concatenated array. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your code should use the concat method. - testString: assert(code.match(/\.concat/g)); - - text: The first array should not change. - testString: assert(JSON.stringify(first) === JSON.stringify([1, 2, 3])); - - text: The second array should not change. - testString: assert(JSON.stringify(second) === JSON.stringify([4, 5])); - - text: nonMutatingConcat([1, 2, 3], [4, 5]) should return [1, 2, 3, 4, 5]. - testString: assert(JSON.stringify(nonMutatingConcat([1, 2, 3], [4, 5])) === JSON.stringify([1, 2, 3, 4, 5])); +Your code should use the `concat` method. +```js +assert(code.match(/\.concat/g)); ``` -
    +The `first` array should not change. -## Challenge Seed -
    +```js +assert(JSON.stringify(first) === JSON.stringify([1, 2, 3])); +``` -
    +The `second` array should not change. + +```js +assert(JSON.stringify(second) === JSON.stringify([4, 5])); +``` + +`nonMutatingConcat([1, 2, 3], [4, 5])` should return `[1, 2, 3, 4, 5]`. + +```js +assert( + JSON.stringify(nonMutatingConcat([1, 2, 3], [4, 5])) === + JSON.stringify([1, 2, 3, 4, 5]) +); +``` + +# --seed-- + +## --seed-contents-- ```js function nonMutatingConcat(original, attach) { @@ -56,14 +63,7 @@ var second = [4, 5]; nonMutatingConcat(first, second); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js function nonMutatingConcat(original, attach) { @@ -75,5 +75,3 @@ var first = [1, 2, 3]; var second = [4, 5]; nonMutatingConcat(first, second); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md index f8addb1572..766c2a5ae0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md @@ -5,39 +5,35 @@ challengeType: 1 forumTopicId: 301230 --- -## Description +# --description-- -
    -As you have seen from applying Array.prototype.map(), or simply map() earlier, the map method returns an array of the same length as the one it was called on. It also doesn't alter the original array, as long as its callback function doesn't. -In other words, map is a pure function, and its output depends solely on its inputs. Plus, it takes another function as its argument. -You might learn a lot about the map method if you implement your own version of it. It is recommended you use a for loop or Array.prototype.forEach(). -
    +As you have seen from applying `Array.prototype.map()`, or simply `map()` earlier, the `map` method returns an array of the same length as the one it was called on. It also doesn't alter the original array, as long as its callback function doesn't. -## Instructions +In other words, `map` is a pure function, and its output depends solely on its inputs. Plus, it takes another function as its argument. -
    -Write your own Array.prototype.myMap(), which should behave exactly like Array.prototype.map(). You should not use the built-in map method. The Array instance can be accessed in the myMap method using this. -
    +You might learn a lot about the `map` method if you implement your own version of it. It is recommended you use a `for` loop or `Array.prototype.forEach()`. -## Tests +# --instructions-- -
    +Write your own `Array.prototype.myMap()`, which should behave exactly like `Array.prototype.map()`. You should not use the built-in `map` method. The `Array` instance can be accessed in the `myMap` method using `this`. -```yml -tests: - - text: new_s should equal [46, 130, 196, 10]. - testString: assert(JSON.stringify(new_s) === JSON.stringify([46, 130, 196, 10])); - - text: Your code should not use the map method. - testString: assert(!code.match(/\.?[\s\S]*?map/g)); +# --hints-- + +`new_s` should equal `[46, 130, 196, 10]`. + +```js +assert(JSON.stringify(new_s) === JSON.stringify([46, 130, 196, 10])); ``` -
    +Your code should not use the `map` method. -## Challenge Seed +```js +assert(!code.match(/\.?[\s\S]*?map/g)); +``` -
    +# --seed-- -
    +## --seed-contents-- ```js // The global variable @@ -56,13 +52,7 @@ var new_s = s.myMap(function(item) { }); ``` -
    - -
    - -## Solution - -
    +# --solutions-- ```js // the global Array @@ -82,5 +72,3 @@ var new_s = s.myMap(function(item) { return item * 2; }); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/implement-the-filter-method-on-a-prototype.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/implement-the-filter-method-on-a-prototype.md index 748c7b6e6c..601fa0a764 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/implement-the-filter-method-on-a-prototype.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/implement-the-filter-method-on-a-prototype.md @@ -5,37 +5,31 @@ challengeType: 1 forumTopicId: 301231 --- -## Description +# --description-- -
    -You might learn a lot about the filter method if you implement your own version of it. It is recommended you use a for loop or Array.prototype.forEach(). -
    +You might learn a lot about the `filter` method if you implement your own version of it. It is recommended you use a `for` loop or `Array.prototype.forEach()`. -## Instructions +# --instructions-- -
    -Write your own Array.prototype.myFilter(), which should behave exactly like Array.prototype.filter(). You should not use the built-in filter method. The Array instance can be accessed in the myFilter method using this. -
    +Write your own `Array.prototype.myFilter()`, which should behave exactly like `Array.prototype.filter()`. You should not use the built-in `filter` method. The `Array` instance can be accessed in the `myFilter` method using `this`. -## Tests +# --hints-- -
    +`new_s` should equal `[23, 65, 5]`. -```yml -tests: - - text: new_s should equal [23, 65, 5]. - testString: assert(JSON.stringify(new_s) === JSON.stringify([23, 65, 5])); - - text: Your code should not use the filter method. - testString: assert(!code.match(/\.?[\s\S]*?filter/g)); +```js +assert(JSON.stringify(new_s) === JSON.stringify([23, 65, 5])); ``` -
    +Your code should not use the `filter` method. -## Challenge Seed +```js +assert(!code.match(/\.?[\s\S]*?filter/g)); +``` -
    +# --seed-- -
    +## --seed-contents-- ```js // The global variable @@ -53,13 +47,7 @@ var new_s = s.myFilter(function(item) { }); ``` -
    - -
    - -## Solution - -
    +# --solutions-- ```js // the global Array @@ -79,5 +67,3 @@ var new_s = s.myFilter(function(item) { return item % 2 === 1; }); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/introduction-to-currying-and-partial-application.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/introduction-to-currying-and-partial-application.md index 982c0efeb9..e198f03133 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/introduction-to-currying-and-partial-application.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/introduction-to-currying-and-partial-application.md @@ -5,10 +5,12 @@ challengeType: 1 forumTopicId: 301232 --- -## Description -
    +# --description-- + The arity of a function is the number of arguments it requires. Currying a function means to convert a function of N arity into N functions of arity 1. + In other words, it restructures a function so it takes one argument, then returns another function that takes the next argument, and so on. + Here's an example: ```js @@ -37,8 +39,7 @@ var funcForY = curried(1); console.log(funcForY(2)); // Prints 3 ``` -Similarly, partial application can be described as applying a few arguments to a function at a time and returning another function that is applied to more arguments. -Here's an example: +Similarly, partial application can be described as applying a few arguments to a function at a time and returning another function that is applied to more arguments. Here's an example: ```js //Impartial function @@ -49,35 +50,39 @@ var partialFn = impartial.bind(this, 1, 2); partialFn(10); // Returns 13 ``` -
    +# --instructions-- -## Instructions -
    -Fill in the body of the add function so it uses currying to add parameters x, y, and z. -
    +Fill in the body of the `add` function so it uses currying to add parameters `x`, `y`, and `z`. -## Tests -
    +# --hints-- -```yml -tests: - - text: add(10)(20)(30) should return 60. - testString: assert(add(10)(20)(30) === 60); - - text: add(1)(2)(3) should return 6. - testString: assert(add(1)(2)(3) === 6); - - text: add(11)(22)(33) should return 66. - testString: assert(add(11)(22)(33) === 66); - - text: Your code should include a final statement that returns x + y + z. - testString: assert(code.match(/[xyz]\s*?\+\s*?[xyz]\s*?\+\s*?[xyz]/g)); +`add(10)(20)(30)` should return `60`. +```js +assert(add(10)(20)(30) === 60); ``` -
    +`add(1)(2)(3)` should return `6`. -## Challenge Seed -
    +```js +assert(add(1)(2)(3) === 6); +``` -
    +`add(11)(22)(33)` should return `66`. + +```js +assert(add(11)(22)(33) === 66); +``` + +Your code should include a final statement that returns `x + y + z`. + +```js +assert(code.match(/[xyz]\s*?\+\s*?[xyz]\s*?\+\s*?[xyz]/g)); +``` + +# --seed-- + +## --seed-contents-- ```js function add(x) { @@ -89,17 +94,8 @@ function add(x) { add(10)(20)(30); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js const add = x => y => z => x + y + z ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md index e6d21eaf71..4b9053cf6f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md @@ -5,40 +5,43 @@ challengeType: 1 forumTopicId: 301233 --- -## Description -
    +# --description-- + Functional programming is a style of programming where solutions are simple, isolated functions, without any side effects outside of the function scope. -INPUT -> PROCESS -> OUTPUT + +`INPUT -> PROCESS -> OUTPUT` + Functional programming is about: + 1) Isolated functions - there is no dependence on the state of the program, which includes global variables that are subject to change + 2) Pure functions - the same input always gives the same output + 3) Functions with limited side effects - any changes, or mutations, to the state of the program outside the function are carefully controlled -
    -## Instructions -
    +# --instructions-- + The members of freeCodeCamp happen to love tea. -In the code editor, the prepareTea and getTea functions are already defined for you. Call the getTea function to get 40 cups of tea for the team, and store them in the tea4TeamFCC variable. -
    -## Tests -
    +In the code editor, the `prepareTea` and `getTea` functions are already defined for you. Call the `getTea` function to get 40 cups of tea for the team, and store them in the `tea4TeamFCC` variable. -```yml -tests: - - text: The tea4TeamFCC variable should hold 40 cups of tea for the team. - testString: assert(tea4TeamFCC.length === 40); - - text: The tea4TeamFCC variable should hold cups of green tea. - testString: assert(tea4TeamFCC[0] === 'greenTea'); +# --hints-- +The `tea4TeamFCC` variable should hold 40 cups of tea for the team. + +```js +assert(tea4TeamFCC.length === 40); ``` -
    +The `tea4TeamFCC` variable should hold cups of green tea. -## Challenge Seed -
    +```js +assert(tea4TeamFCC[0] === 'greenTea'); +``` -
    +# --seed-- + +## --seed-contents-- ```js // Function that returns a string representing a cup of green tea @@ -64,14 +67,7 @@ const tea4TeamFCC = null; // Only change code above this line ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js const prepareTea = () => 'greenTea'; @@ -89,5 +85,3 @@ const getTea = (numOfCups) => { const tea4TeamFCC = getTea(40); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md index f2c587793f..fb907510d8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md @@ -5,43 +5,50 @@ challengeType: 1 forumTopicId: 301234 --- -## Description -
    +# --description-- + The last challenge was a step closer to functional programming principles, but there is still something missing. -We didn't alter the global variable value, but the function incrementer would not work without the global variable fixedValue being there. + +We didn't alter the global variable value, but the function `incrementer` would not work without the global variable `fixedValue` being there. + Another principle of functional programming is to always declare your dependencies explicitly. This means if a function depends on a variable or object being present, then pass that variable or object directly into the function as an argument. + There are several good consequences from this principle. The function is easier to test, you know exactly what input it takes, and it won't depend on anything else in your program. + This can give you more confidence when you alter, remove, or add new code. You would know what you can or cannot change and you can see where the potential traps are. + Finally, the function would always produce the same output for the same set of inputs, no matter what part of the code executes it. -
    -## Instructions -
    -Let's update the incrementer function to clearly declare its dependencies. -Write the incrementer function so it takes an argument, and then returns a result after increasing the value by one. -
    +# --instructions-- -## Tests -
    +Let's update the `incrementer` function to clearly declare its dependencies. -```yml -tests: - - text: Your function incrementer should not change the value of fixedValue (which is 4). - testString: assert(fixedValue === 4); - - text: Your incrementer function should take an argument. - testString: assert(incrementer.length === 1); - - text: Your incrementer function should return a value that is one larger than the fixedValue value. - testString: const __newValue = incrementer(fixedValue); assert(__newValue === 5); +Write the `incrementer` function so it takes an argument, and then returns a result after increasing the value by one. +# --hints-- +Your function `incrementer` should not change the value of `fixedValue` (which is `4`). + +```js +assert(fixedValue === 4); ``` -
    +Your `incrementer` function should take an argument. -## Challenge Seed -
    +```js +assert(incrementer.length === 1); +``` -
    +Your `incrementer` function should return a value that is one larger than the `fixedValue` value. + +```js +const __newValue = incrementer(fixedValue); +assert(__newValue === 5); +``` + +# --seed-- + +## --seed-contents-- ```js // The global variable @@ -55,14 +62,7 @@ function incrementer () { } ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js // The global variable @@ -77,5 +77,3 @@ function incrementer (fixedValue) { ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md index c191ce5d59..f1657a42be 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md @@ -5,44 +5,83 @@ challengeType: 1 forumTopicId: 301235 --- -## Description -
    +# --description-- + So far, we have seen two distinct principles for functional programming: -1) Don't alter a variable or object - create new variables and objects and return them if need be from a function. Hint: using something like var newArr = arrVar, where arrVar is an array will simply create a reference to the existing variable and not a copy. So changing a value in newArr would change the value in arrVar. + +1) Don't alter a variable or object - create new variables and objects and return them if need be from a function. Hint: using something like `var newArr = arrVar`, where `arrVar` is an array will simply create a reference to the existing variable and not a copy. So changing a value in `newArr` would change the value in `arrVar`. + 2) Declare function parameters - any computation inside a function depends only on the arguments passed to the function, and not on any global object or variable. + Adding one to a number is not very exciting, but we can apply these principles when working with arrays or more complex objects. -
    -## Instructions -
    -Rewrite the code so the global array bookList is not changed inside either function. The add function should add the given bookName to the end of the array passed to it and return a new array (list). The remove function should remove the given bookName from the array passed to it. +# --instructions-- -Note: Both functions should return an array, and any new parameters should be added before the bookName parameter. +Rewrite the code so the global array `bookList` is not changed inside either function. The `add` function should add the given `bookName` to the end of the array passed to it and return a new array (list). The `remove` function should remove the given `bookName` from the array passed to it. -
    +**Note:** Both functions should return an array, and any new parameters should be added before the `bookName` parameter. -## Tests -
    +# --hints-- -```yml -tests: - - text: bookList should not change and still equal ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"]. - testString: assert(JSON.stringify(bookList) === JSON.stringify(["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"])); - - text: newBookList should equal ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]. - testString: assert(JSON.stringify(newBookList) === JSON.stringify(['The Hound of the Baskervilles', 'On The Electrodynamics of Moving Bodies', 'Philosophiæ Naturalis Principia Mathematica', 'Disquisitiones Arithmeticae', 'A Brief History of Time'])); - - text: newerBookList should equal ["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"]. - testString: assert(JSON.stringify(newerBookList) === JSON.stringify(['The Hound of the Baskervilles', 'Philosophiæ Naturalis Principia Mathematica', 'Disquisitiones Arithmeticae'])); - - text: newestBookList should equal ["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]. - testString: assert(JSON.stringify(newestBookList) === JSON.stringify(['The Hound of the Baskervilles', 'Philosophiæ Naturalis Principia Mathematica', 'Disquisitiones Arithmeticae', 'A Brief History of Time'])); +`bookList` should not change and still equal `["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"]`. +```js +assert( + JSON.stringify(bookList) === + JSON.stringify([ + 'The Hound of the Baskervilles', + 'On The Electrodynamics of Moving Bodies', + 'Philosophiæ Naturalis Principia Mathematica', + 'Disquisitiones Arithmeticae' + ]) +); ``` -
    +`newBookList` should equal `["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]`. -## Challenge Seed -
    +```js +assert( + JSON.stringify(newBookList) === + JSON.stringify([ + 'The Hound of the Baskervilles', + 'On The Electrodynamics of Moving Bodies', + 'Philosophiæ Naturalis Principia Mathematica', + 'Disquisitiones Arithmeticae', + 'A Brief History of Time' + ]) +); +``` -
    +`newerBookList` should equal `["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"]`. + +```js +assert( + JSON.stringify(newerBookList) === + JSON.stringify([ + 'The Hound of the Baskervilles', + 'Philosophiæ Naturalis Principia Mathematica', + 'Disquisitiones Arithmeticae' + ]) +); +``` + +`newestBookList` should equal `["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]`. + +```js +assert( + JSON.stringify(newestBookList) === + JSON.stringify([ + 'The Hound of the Baskervilles', + 'Philosophiæ Naturalis Principia Mathematica', + 'Disquisitiones Arithmeticae', + 'A Brief History of Time' + ]) +); +``` + +# --seed-- + +## --seed-contents-- ```js // The global variable @@ -76,14 +115,7 @@ var newestBookList = remove(add(bookList, 'A Brief History of Time'), 'On The El console.log(bookList); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js // The global variable @@ -106,5 +138,3 @@ var newBookList = add(bookList, 'A Brief History of Time'); var newerBookList = remove(bookList, 'On The Electrodynamics of Moving Bodies'); var newestBookList = remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies'); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md index d3b5e3ffd1..ade040d66d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301236 --- -## Description -
    -A common pattern while working with arrays is when you want to remove items and keep the rest of the array. JavaScript offers the splice method for this, which takes arguments for the index of where to start removing items, then the number of items to remove. If the second argument is not provided, the default is to remove items through the end. However, the splice method mutates the original array it is called on. Here's an example: +# --description-- + +A common pattern while working with arrays is when you want to remove items and keep the rest of the array. JavaScript offers the `splice` method for this, which takes arguments for the index of where to start removing items, then the number of items to remove. If the second argument is not provided, the default is to remove items through the end. However, the `splice` method mutates the original array it is called on. Here's an example: ```js var cities = ["Chicago", "Delhi", "Islamabad", "London", "Berlin"]; @@ -15,37 +15,50 @@ cities.splice(3, 1); // Returns "London" and deletes it from the cities array // cities is now ["Chicago", "Delhi", "Islamabad", "Berlin"] ``` -As we saw in the last challenge, the slice method does not mutate the original array, but returns a new one which can be saved into a variable. Recall that the slice method takes two arguments for the indices to begin and end the slice (the end is non-inclusive), and returns those items in a new array. Using the slice method instead of splice helps to avoid any array-mutating side effects. -
    +As we saw in the last challenge, the `slice` method does not mutate the original array, but returns a new one which can be saved into a variable. Recall that the `slice` method takes two arguments for the indices to begin and end the slice (the end is non-inclusive), and returns those items in a new array. Using the `slice` method instead of `splice` helps to avoid any array-mutating side effects. + +# --instructions-- + +Rewrite the function `nonMutatingSplice` by using `slice` instead of `splice`. It should limit the provided `cities` array to a length of 3, and return a new array with only the first three items. -## Instructions -
    -Rewrite the function nonMutatingSplice by using slice instead of splice. It should limit the provided cities array to a length of 3, and return a new array with only the first three items. Do not mutate the original array provided to the function. -
    -## Tests -
    +# --hints-- -```yml -tests: - - text: Your code should use the slice method. - testString: assert(code.match(/\.slice/g)); - - text: Your code should not use the splice method. - testString: assert(!code.match(/\.?[\s\S]*?splice/g)); - - text: The inputCities array should not change. - testString: assert(JSON.stringify(inputCities) === JSON.stringify(["Chicago", "Delhi", "Islamabad", "London", "Berlin"])); - - text: nonMutatingSplice(["Chicago", "Delhi", "Islamabad", "London", "Berlin"]) should return ["Chicago", "Delhi", "Islamabad"]. - testString: assert(JSON.stringify(nonMutatingSplice(["Chicago", "Delhi", "Islamabad", "London", "Berlin"])) === JSON.stringify(["Chicago", "Delhi", "Islamabad"])); +Your code should use the `slice` method. +```js +assert(code.match(/\.slice/g)); ``` -
    +Your code should not use the `splice` method. -## Challenge Seed -
    +```js +assert(!code.match(/\.?[\s\S]*?splice/g)); +``` -
    +The `inputCities` array should not change. + +```js +assert( + JSON.stringify(inputCities) === + JSON.stringify(['Chicago', 'Delhi', 'Islamabad', 'London', 'Berlin']) +); +``` + +`nonMutatingSplice(["Chicago", "Delhi", "Islamabad", "London", "Berlin"])` should return `["Chicago", "Delhi", "Islamabad"]`. + +```js +assert( + JSON.stringify( + nonMutatingSplice(['Chicago', 'Delhi', 'Islamabad', 'London', 'Berlin']) + ) === JSON.stringify(['Chicago', 'Delhi', 'Islamabad']) +); +``` + +# --seed-- + +## --seed-contents-- ```js function nonMutatingSplice(cities) { @@ -58,14 +71,7 @@ var inputCities = ["Chicago", "Delhi", "Islamabad", "London", "Berlin"]; nonMutatingSplice(inputCities); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js function nonMutatingSplice(cities) { @@ -76,5 +82,3 @@ function nonMutatingSplice(cities) { var inputCities = ["Chicago", "Delhi", "Islamabad", "London", "Berlin"]; nonMutatingSplice(inputCities); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md index cab7bcca44..5ded09a85e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md @@ -5,40 +5,52 @@ challengeType: 1 forumTopicId: 301237 --- -## Description -
    -A side effect of the sort method is that it changes the order of the elements in the original array. In other words, it mutates the array in place. One way to avoid this is to first concatenate an empty array to the one being sorted (remember that slice and concat return a new array), then run the sort method. -
    +# --description-- -## Instructions -
    -Use the sort method in the nonMutatingSort function to sort the elements of an array in ascending order. The function should return a new array, and not mutate the globalArray variable. -
    +A side effect of the `sort` method is that it changes the order of the elements in the original array. In other words, it mutates the array in place. One way to avoid this is to first concatenate an empty array to the one being sorted (remember that `slice` and `concat` return a new array), then run the `sort` method. -## Tests -
    +# --instructions-- -```yml -tests: - - text: Your code should use the sort method. - testString: assert(nonMutatingSort.toString().match(/\.sort/g)); - - text: The globalArray variable should not change. - testString: assert(JSON.stringify(globalArray) === JSON.stringify([5, 6, 3, 2, 9])); - - text: nonMutatingSort(globalArray) should return [2, 3, 5, 6, 9]. - testString: assert(JSON.stringify(nonMutatingSort(globalArray)) === JSON.stringify([2, 3, 5, 6, 9])); - - text: nonMutatingSort(globalArray) should not be hard coded. - testString: assert(!nonMutatingSort.toString().match(/[23569]/g)); - - text: The function should return a new array, not the array passed to it. - testString: assert(nonMutatingSort(globalArray) !== globalArray); +Use the `sort` method in the `nonMutatingSort` function to sort the elements of an array in ascending order. The function should return a new array, and not mutate the `globalArray` variable. +# --hints-- + +Your code should use the `sort` method. + +```js +assert(nonMutatingSort.toString().match(/\.sort/g)); ``` -
    +The `globalArray` variable should not change. -## Challenge Seed -
    +```js +assert(JSON.stringify(globalArray) === JSON.stringify([5, 6, 3, 2, 9])); +``` -
    +`nonMutatingSort(globalArray)` should return `[2, 3, 5, 6, 9]`. + +```js +assert( + JSON.stringify(nonMutatingSort(globalArray)) === + JSON.stringify([2, 3, 5, 6, 9]) +); +``` + +`nonMutatingSort(globalArray)` should not be hard coded. + +```js +assert(!nonMutatingSort.toString().match(/[23569]/g)); +``` + +The function should return a new array, not the array passed to it. + +```js +assert(nonMutatingSort(globalArray) !== globalArray); +``` + +# --seed-- + +## --seed-contents-- ```js var globalArray = [5, 6, 3, 2, 9]; @@ -51,14 +63,7 @@ function nonMutatingSort(arr) { nonMutatingSort(globalArray); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js var globalArray = [5, 6, 3, 2, 9]; @@ -69,5 +74,3 @@ function nonMutatingSort(arr) { } nonMutatingSort(globalArray); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/return-part-of-an-array-using-the-slice-method.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/return-part-of-an-array-using-the-slice-method.md index 15dfdca834..8d4ebb7c25 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/return-part-of-an-array-using-the-slice-method.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/return-part-of-an-array-using-the-slice-method.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 301239 --- -## Description -
    -The slice method returns a copy of certain elements of an array. It can take two arguments, the first gives the index of where to begin the slice, the second is the index for where to end the slice (and it's non-inclusive). If the arguments are not provided, the default is to start at the beginning of the array through the end, which is an easy way to make a copy of the entire array. The slice method does not mutate the original array, but returns a new one. +# --description-- + +The `slice` method returns a copy of certain elements of an array. It can take two arguments, the first gives the index of where to begin the slice, the second is the index for where to end the slice (and it's non-inclusive). If the arguments are not provided, the default is to start at the beginning of the array through the end, which is an easy way to make a copy of the entire array. The `slice` method does not mutate the original array, but returns a new one. + Here's an example: ```js @@ -16,37 +17,57 @@ var newArray = arr.slice(1, 3); // Sets newArray to ["Dog", "Tiger"] ``` -
    +# --instructions-- -## Instructions -
    -Use the slice method in the sliceArray function to return part of the anim array given the provided beginSlice and endSlice indices. The function should return an array. -
    +Use the `slice` method in the `sliceArray` function to return part of the `anim` array given the provided `beginSlice` and `endSlice` indices. The function should return an array. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your code should use the slice method. - testString: assert(code.match(/\.slice/g)); - - text: The inputAnim variable should not change. - testString: assert(JSON.stringify(inputAnim) === JSON.stringify(["Cat", "Dog", "Tiger", "Zebra", "Ant"])); - - text: sliceArray(["Cat", "Dog", "Tiger", "Zebra", "Ant"], 1, 3) should return ["Dog", "Tiger"]. - testString: assert(JSON.stringify(sliceArray(["Cat", "Dog", "Tiger", "Zebra", "Ant"], 1, 3)) === JSON.stringify(["Dog", "Tiger"])); - - text: sliceArray(["Cat", "Dog", "Tiger", "Zebra", "Ant"], 0, 1) should return ["Cat"]. - testString: assert(JSON.stringify(sliceArray(["Cat", "Dog", "Tiger", "Zebra", "Ant"], 0, 1)) === JSON.stringify(["Cat"])); - - text: sliceArray(["Cat", "Dog", "Tiger", "Zebra", "Ant"], 1, 4) should return ["Dog", "Tiger", "Zebra"]. - testString: assert(JSON.stringify(sliceArray(["Cat", "Dog", "Tiger", "Zebra", "Ant"], 1, 4)) === JSON.stringify(["Dog", "Tiger", "Zebra"])); +Your code should use the `slice` method. +```js +assert(code.match(/\.slice/g)); ``` -
    +The `inputAnim` variable should not change. -## Challenge Seed -
    +```js +assert( + JSON.stringify(inputAnim) === + JSON.stringify(['Cat', 'Dog', 'Tiger', 'Zebra', 'Ant']) +); +``` -
    +`sliceArray(["Cat", "Dog", "Tiger", "Zebra", "Ant"], 1, 3)` should return `["Dog", "Tiger"]`. + +```js +assert( + JSON.stringify(sliceArray(['Cat', 'Dog', 'Tiger', 'Zebra', 'Ant'], 1, 3)) === + JSON.stringify(['Dog', 'Tiger']) +); +``` + +`sliceArray(["Cat", "Dog", "Tiger", "Zebra", "Ant"], 0, 1)` should return `["Cat"]`. + +```js +assert( + JSON.stringify(sliceArray(['Cat', 'Dog', 'Tiger', 'Zebra', 'Ant'], 0, 1)) === + JSON.stringify(['Cat']) +); +``` + +`sliceArray(["Cat", "Dog", "Tiger", "Zebra", "Ant"], 1, 4)` should return `["Dog", "Tiger", "Zebra"]`. + +```js +assert( + JSON.stringify(sliceArray(['Cat', 'Dog', 'Tiger', 'Zebra', 'Ant'], 1, 4)) === + JSON.stringify(['Dog', 'Tiger', 'Zebra']) +); +``` + +# --seed-- + +## --seed-contents-- ```js function sliceArray(anim, beginSlice, endSlice) { @@ -59,14 +80,7 @@ var inputAnim = ["Cat", "Dog", "Tiger", "Zebra", "Ant"]; sliceArray(inputAnim, 1, 3); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js function sliceArray(anim, beginSlice, endSlice) { @@ -77,5 +91,3 @@ function sliceArray(anim, beginSlice, endSlice) { var inputAnim = ["Cat", "Dog", "Tiger", "Zebra", "Ant"]; sliceArray(inputAnim, 1, 3); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/sort-an-array-alphabetically-using-the-sort-method.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/sort-an-array-alphabetically-using-the-sort-method.md index afc7cf3743..06629ff149 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/sort-an-array-alphabetically-using-the-sort-method.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/sort-an-array-alphabetically-using-the-sort-method.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 18303 --- -## Description -
    -The sort method sorts the elements of an array according to the callback function. +# --description-- + +The `sort` method sorts the elements of an array according to the callback function. + For example: ```js @@ -28,40 +29,50 @@ reverseAlpha(['l', 'h', 'z', 'b', 's']); // Returns ['z', 's', 'l', 'h', 'b'] ``` -JavaScript's default sorting method is by string Unicode point value, which may return unexpected results. Therefore, it is encouraged to provide a callback function to specify how to sort the array items. When such a callback function, normally called compareFunction, is supplied, the array elements are sorted according to the return value of the compareFunction: -If compareFunction(a,b) returns a value less than 0 for two elements a and b, then a will come before b. -If compareFunction(a,b) returns a value greater than 0 for two elements a and b, then b will come before a. -If compareFunction(a,b) returns a value equal to 0 for two elements a and b, then a and b will remain unchanged. +JavaScript's default sorting method is by string Unicode point value, which may return unexpected results. Therefore, it is encouraged to provide a callback function to specify how to sort the array items. When such a callback function, normally called `compareFunction`, is supplied, the array elements are sorted according to the return value of the `compareFunction`: If `compareFunction(a,b)` returns a value less than 0 for two elements `a` and `b`, then `a` will come before `b`. If `compareFunction(a,b)` returns a value greater than 0 for two elements `a` and `b`, then `b` will come before `a`. If `compareFunction(a,b)` returns a value equal to 0 for two elements `a` and `b`, then `a` and `b` will remain unchanged. -
    +# --instructions-- -## Instructions -
    -Use the sort method in the alphabeticalOrder function to sort the elements of arr in alphabetical order. -
    +Use the `sort` method in the `alphabeticalOrder` function to sort the elements of `arr` in alphabetical order. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your code should use the sort method. - testString: assert(code.match(/\.sort/g)); - - text: alphabeticalOrder(["a", "d", "c", "a", "z", "g"]) should return ["a", "a", "c", "d", "g", "z"]. - testString: assert(JSON.stringify(alphabeticalOrder(["a", "d", "c", "a", "z", "g"])) === JSON.stringify(["a", "a", "c", "d", "g", "z"])); - - text: alphabeticalOrder(["x", "h", "a", "m", "n", "m"]) should return ["a", "h", "m", "m", "n", "x"]. - testString: assert(JSON.stringify(alphabeticalOrder(["x", "h", "a", "m", "n", "m"])) === JSON.stringify(["a", "h", "m", "m", "n", "x"])); - - text: alphabeticalOrder(["a", "a", "a", "a", "x", "t"]) should return ["a", "a", "a", "a", "t", "x"]. - testString: assert(JSON.stringify(alphabeticalOrder(["a", "a", "a", "a", "x", "t"])) === JSON.stringify(["a", "a", "a", "a", "t", "x"])); +Your code should use the `sort` method. +```js +assert(code.match(/\.sort/g)); ``` -
    +`alphabeticalOrder(["a", "d", "c", "a", "z", "g"])` should return `["a", "a", "c", "d", "g", "z"]`. -## Challenge Seed -
    +```js +assert( + JSON.stringify(alphabeticalOrder(['a', 'd', 'c', 'a', 'z', 'g'])) === + JSON.stringify(['a', 'a', 'c', 'd', 'g', 'z']) +); +``` -
    +`alphabeticalOrder(["x", "h", "a", "m", "n", "m"])` should return `["a", "h", "m", "m", "n", "x"]`. + +```js +assert( + JSON.stringify(alphabeticalOrder(['x', 'h', 'a', 'm', 'n', 'm'])) === + JSON.stringify(['a', 'h', 'm', 'm', 'n', 'x']) +); +``` + +`alphabeticalOrder(["a", "a", "a", "a", "x", "t"])` should return `["a", "a", "a", "a", "t", "x"]`. + +```js +assert( + JSON.stringify(alphabeticalOrder(['a', 'a', 'a', 'a', 'x', 't'])) === + JSON.stringify(['a', 'a', 'a', 'a', 't', 'x']) +); +``` + +# --seed-- + +## --seed-contents-- ```js function alphabeticalOrder(arr) { @@ -73,14 +84,7 @@ function alphabeticalOrder(arr) { alphabeticalOrder(["a", "d", "c", "a", "z", "g"]); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js function alphabeticalOrder(arr) { @@ -90,5 +94,3 @@ function alphabeticalOrder(arr) { } alphabeticalOrder(["a", "d", "c", "a", "z", "g"]); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/split-a-string-into-an-array-using-the-split-method.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/split-a-string-into-an-array-using-the-split-method.md index 3d7f20da6a..57e05a0b36 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/split-a-string-into-an-array-using-the-split-method.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/split-a-string-into-an-array-using-the-split-method.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 18305 --- -## Description -
    -The split method splits a string into an array of strings. It takes an argument for the delimiter, which can be a character to use to break up the string or a regular expression. For example, if the delimiter is a space, you get an array of words, and if the delimiter is an empty string, you get an array of each character in the string. +# --description-- + +The `split` method splits a string into an array of strings. It takes an argument for the delimiter, which can be a character to use to break up the string or a regular expression. For example, if the delimiter is a space, you get an array of words, and if the delimiter is an empty string, you get an array of each character in the string. + Here are two examples that split one string by spaces, then another by digits using a regular expression: ```js @@ -20,36 +21,50 @@ var byDigits = otherString.split(/\d/); // Sets byDigits to ["How", "are", "you", "today"] ``` -Since strings are immutable, the split method makes it easier to work with them. -
    +Since strings are immutable, the `split` method makes it easier to work with them. -## Instructions -
    -Use the split method inside the splitify function to split str into an array of words. The function should return the array. Note that the words are not always separated by spaces, and the array should not contain punctuation. -
    +# --instructions-- -## Tests -
    +Use the `split` method inside the `splitify` function to split `str` into an array of words. The function should return the array. Note that the words are not always separated by spaces, and the array should not contain punctuation. -```yml -tests: - - text: Your code should use the split method. - testString: assert(code.match(/\.split/g)); - - text: splitify("Hello World,I-am code") should return ["Hello", "World", "I", "am", "code"]. - testString: assert(JSON.stringify(splitify("Hello World,I-am code")) === JSON.stringify(["Hello", "World", "I", "am", "code"])); - - text: splitify("Earth-is-our home") should return ["Earth", "is", "our", "home"]. - testString: assert(JSON.stringify(splitify("Earth-is-our home")) === JSON.stringify(["Earth", "is", "our", "home"])); - - text: splitify("This.is.a-sentence") should return ["This", "is", "a", "sentence"]. - testString: assert(JSON.stringify(splitify("This.is.a-sentence")) === JSON.stringify(["This", "is", "a", "sentence"])); +# --hints-- +Your code should use the `split` method. + +```js +assert(code.match(/\.split/g)); ``` -
    +`splitify("Hello World,I-am code")` should return `["Hello", "World", "I", "am", "code"]`. -## Challenge Seed -
    +```js +assert( + JSON.stringify(splitify('Hello World,I-am code')) === + JSON.stringify(['Hello', 'World', 'I', 'am', 'code']) +); +``` -
    +`splitify("Earth-is-our home")` should return `["Earth", "is", "our", "home"]`. + +```js +assert( + JSON.stringify(splitify('Earth-is-our home')) === + JSON.stringify(['Earth', 'is', 'our', 'home']) +); +``` + +`splitify("This.is.a-sentence")` should return `["This", "is", "a", "sentence"]`. + +```js +assert( + JSON.stringify(splitify('This.is.a-sentence')) === + JSON.stringify(['This', 'is', 'a', 'sentence']) +); +``` + +# --seed-- + +## --seed-contents-- ```js function splitify(str) { @@ -61,14 +76,7 @@ function splitify(str) { splitify("Hello World,I-am code"); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js function splitify(str) { @@ -77,5 +85,3 @@ function splitify(str) { // Only change code above this line } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-functional-programming-terminology.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-functional-programming-terminology.md index 40d1721a40..2a9e3e93c1 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-functional-programming-terminology.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-functional-programming-terminology.md @@ -5,45 +5,57 @@ challengeType: 1 forumTopicId: 301240 --- -## Description -
    +# --description-- + The FCC Team had a mood swing and now wants two types of tea: green tea and black tea. General Fact: Client mood swings are pretty common. -With that information, we'll need to revisit the getTea function from last challenge to handle various tea requests. We can modify getTea to accept a function as a parameter to be able to change the type of tea it prepares. This makes getTea more flexible, and gives the programmer more control when client requests change. + +With that information, we'll need to revisit the `getTea` function from last challenge to handle various tea requests. We can modify `getTea` to accept a function as a parameter to be able to change the type of tea it prepares. This makes `getTea` more flexible, and gives the programmer more control when client requests change. + But first, let's cover some functional terminology: -Callbacks are the functions that are slipped or passed into another function to decide the invocation of that function. You may have seen them passed to other methods, for example in filter, the callback function tells JavaScript the criteria for how to filter an array. + +Callbacks are the functions that are slipped or passed into another function to decide the invocation of that function. You may have seen them passed to other methods, for example in `filter`, the callback function tells JavaScript the criteria for how to filter an array. + Functions that can be assigned to a variable, passed into another function, or returned from another function just like any other normal value, are called first class functions. In JavaScript, all functions are first class functions. + The functions that take a function as an argument, or return a function as a return value are called higher order functions. + When the functions are passed in to another function or returned from another function, then those functions which gets passed in or returned can be called a lambda. -
    -## Instructions -
    -Prepare 27 cups of green tea and 13 cups of black tea and store them in tea4GreenTeamFCC and tea4BlackTeamFCC variables, respectively. Note that the getTea function has been modified so it now takes a function as the first argument. +# --instructions-- + +Prepare 27 cups of green tea and 13 cups of black tea and store them in `tea4GreenTeamFCC` and `tea4BlackTeamFCC` variables, respectively. Note that the `getTea` function has been modified so it now takes a function as the first argument. + Note: The data (the number of cups of tea) is supplied as the last argument. We'll discuss this more in later lessons. -
    -## Tests -
    +# --hints-- -```yml -tests: - - text: The tea4GreenTeamFCC variable should hold 27 cups of green tea for the team. - testString: assert(tea4GreenTeamFCC.length === 27); - - text: The tea4GreenTeamFCC variable should hold cups of green tea. - testString: assert(tea4GreenTeamFCC[0] === 'greenTea'); - - text: The tea4BlackTeamFCC variable should hold 13 cups of black tea. - testString: assert(tea4BlackTeamFCC.length === 13); - - text: The tea4BlackTeamFCC variable should hold cups of black tea. - testString: assert(tea4BlackTeamFCC[0] === 'blackTea'); +The `tea4GreenTeamFCC` variable should hold 27 cups of green tea for the team. +```js +assert(tea4GreenTeamFCC.length === 27); ``` -
    +The `tea4GreenTeamFCC` variable should hold cups of green tea. -## Challenge Seed -
    +```js +assert(tea4GreenTeamFCC[0] === 'greenTea'); +``` -
    +The `tea4BlackTeamFCC` variable should hold 13 cups of black tea. + +```js +assert(tea4BlackTeamFCC.length === 13); +``` + +The `tea4BlackTeamFCC` variable should hold cups of black tea. + +```js +assert(tea4BlackTeamFCC[0] === 'blackTea'); +``` + +# --seed-- + +## --seed-contents-- ```js // Function that returns a string representing a cup of green tea @@ -78,14 +90,7 @@ console.log( ); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js const prepareGreenTea = () => 'greenTea'; @@ -104,5 +109,3 @@ const getTea = (prepareTea, numOfCups) => { const tea4BlackTeamFCC = getTea(prepareBlackTea, 13); const tea4GreenTeamFCC = getTea(prepareGreenTea, 27); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.md index 1b484dc4e2..5f375cf855 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.md @@ -5,44 +5,56 @@ challengeType: 1 forumTopicId: 301241 --- -## Description -
    +# --description-- + Functional programming is a good habit. It keeps your code easy to manage, and saves you from sneaky bugs. But before we get there, let's look at an imperative approach to programming to highlight where you may have issues. + In English (and many other languages), the imperative tense is used to give commands. Similarly, an imperative style in programming is one that gives the computer a set of statements to perform a task. -Often the statements change the state of the program, like updating global variables. A classic example is writing a for loop that gives exact directions to iterate over the indices of an array. + +Often the statements change the state of the program, like updating global variables. A classic example is writing a `for` loop that gives exact directions to iterate over the indices of an array. + In contrast, functional programming is a form of declarative programming. You tell the computer what you want done by calling a method or function. -JavaScript offers many predefined methods that handle common tasks so you don't need to write out how the computer should perform them. For example, instead of using the for loop mentioned above, you could call the map method which handles the details of iterating over an array. This helps to avoid semantic errors, like the "Off By One Errors" that were covered in the Debugging section. + +JavaScript offers many predefined methods that handle common tasks so you don't need to write out how the computer should perform them. For example, instead of using the `for` loop mentioned above, you could call the `map` method which handles the details of iterating over an array. This helps to avoid semantic errors, like the "Off By One Errors" that were covered in the Debugging section. + Consider the scenario: you are browsing the web in your browser, and want to track the tabs you have opened. Let's try to model this using some simple object-oriented code. + A Window object is made up of tabs, and you usually have more than one Window open. The titles of each open site in each Window object is held in an array. After working in the browser (opening new tabs, merging windows, and closing tabs), you want to print the tabs that are still open. Closed tabs are removed from the array and new tabs (for simplicity) get added to the end of it. -The code editor shows an implementation of this functionality with functions for tabOpen(), tabClose(), and join(). The array tabs is part of the Window object that stores the name of the open pages. +The code editor shows an implementation of this functionality with functions for `tabOpen()`, `tabClose()`, and `join()`. The array `tabs` is part of the Window object that stores the name of the open pages. -
    +# --instructions-- +Examine the code in the editor. It's using a method that has side effects in the program, causing incorrect behaviour. The final list of open tabs, stored in `finalTabs.tabs`, should be `['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab']` but the list produced by the code is slightly different. -## Instructions -
    -Examine the code in the editor. It's using a method that has side effects in the program, causing incorrect behaviour. The final list of open tabs, stored in finalTabs.tabs, should be ['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab'] but the list produced by the code is slightly different. +Change `Window.prototype.tabClose` so that it removes the correct tab. -Change Window.prototype.tabClose so that it removes the correct tab. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: finalTabs.tabs should be ['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab'] - testString: assert.deepEqual(finalTabs.tabs, ['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab']) +`finalTabs.tabs` should be `['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab']` +```js +assert.deepEqual(finalTabs.tabs, [ + 'FB', + 'Gitter', + 'Reddit', + 'Twitter', + 'Medium', + 'new tab', + 'Netflix', + 'YouTube', + 'Vine', + 'GMail', + 'Work mail', + 'Docs', + 'freeCodeCamp', + 'new tab' +]); ``` -
    +# --seed-- -## Challenge Seed -
    - -
    +## --seed-contents-- ```js // tabs is an array of titles of each site open within the window @@ -90,14 +102,7 @@ var finalTabs = socialWindow console.log(finalTabs.tabs); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js // tabs is an array of titles of each site open within the window @@ -137,5 +142,3 @@ var finalTabs = socialWindow .join(videoWindow.tabClose(2)) // Close third tab in video window, and join .join(workWindow.tabClose(1).tabOpen()); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.md index 4af8b13ecb..ed23075327 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.md @@ -1,50 +1,74 @@ --- id: 587d7b88367417b2b2512b45 -title: Use Higher-Order Functions map, filter, or reduce to Solve a Complex Problem +title: 'Use Higher-Order Functions map, filter, or reduce to Solve a Complex Problem' challengeType: 1 forumTopicId: 301311 --- -## Description +# --description-- -
    -Now that you have worked through a few challenges using higher-order functions like map(), filter(), and reduce(), you now get to apply them to solve a more complex challenge. -
    +Now that you have worked through a few challenges using higher-order functions like `map()`, `filter()`, and `reduce()`, you now get to apply them to solve a more complex challenge. -## Instructions +# --instructions-- -
    -We have defined a function named squareList. You need to complete the code for the squareList function using any combination of map(), filter(), and reduce() so that it returns a new array containing only the square of only the positive integers (decimal numbers are not integers) when an array of real numbers is passed to it. An example of an array containing only real numbers is [-3, 4.8, 5, 3, -3.2]. -Note: Your function should not use any kind of for or while loops or the forEach() function. -
    +We have defined a function named `squareList`. You need to complete the code for the `squareList` function using any combination of `map()`, `filter()`, and `reduce()` so that it returns a new array containing only the square of *only* the positive integers (decimal numbers are not integers) when an array of real numbers is passed to it. An example of an array containing only real numbers is `[-3, 4.8, 5, 3, -3.2]`. -## Tests +**Note:** Your function should not use any kind of `for` or `while` loops or the `forEach()` function. -
    +# --hints-- -```yml -tests: - - text: squareList should be a function. - testString: assert.typeOf(squareList, 'function'), 'squareList should be a function'; - - text: for, while, and forEach should not be used. - testString: assert(!__helpers.removeJSComments(code).match(/for|while|forEach/g)); - - text: map, filter, or reduce should be used. - testString: assert(__helpers.removeWhiteSpace(__helpers.removeJSComments(code)).match(/\.(map|filter|reduce)\(/g)); - - text: The function should return an array. - testString: assert(Array.isArray(squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]))); - - text: squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]) should return [16, 1764, 36]. - testString: assert.deepStrictEqual(squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]), [16, 1764, 36]); - - text: squareList([-3.7, -5, 3, 10, 12.5, 7, -4.5, -17, 0.3]) should return [9, 100, 49]. - testString: assert.deepStrictEqual(squareList([-3.7, -5, 3, 10, 12.5, 7, -4.5, -17, 0.3]), [9, 100, 49]); +`squareList` should be a `function`. + +```js +assert.typeOf(squareList, 'function'), + 'squareList should be a function'; ``` -
    +`for`, `while`, and `forEach` should not be used. -## Challenge Seed +```js +assert(!__helpers.removeJSComments(code).match(/for|while|forEach/g)); +``` -
    +`map`, `filter`, or `reduce` should be used. -
    +```js +assert( + __helpers + .removeWhiteSpace(__helpers.removeJSComments(code)) + .match(/\.(map|filter|reduce)\(/g) +); +``` + +The function should return an `array`. + +```js +assert(Array.isArray(squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]))); +``` + +`squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2])` should return `[16, 1764, 36]`. + +```js +assert.deepStrictEqual(squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]), [ + 16, + 1764, + 36 +]); +``` + +`squareList([-3.7, -5, 3, 10, 12.5, 7, -4.5, -17, 0.3])` should return `[9, 100, 49]`. + +```js +assert.deepStrictEqual(squareList([-3.7, -5, 3, 10, 12.5, 7, -4.5, -17, 0.3]), [ + 9, + 100, + 49 +]); +``` + +# --seed-- + +## --seed-contents-- ```js const squareList = arr => { @@ -57,13 +81,7 @@ const squaredIntegers = squareList([-3, 4.8, 5, 3, -3.2]); console.log(squaredIntegers); ``` -
    - -
    - -## Solution - -
    +# --solutions-- ```js const squareList = arr => { @@ -76,5 +94,3 @@ const squareList = arr => { return squaredIntegers; }; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.md index 4317257488..fba0dbfc0a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301312 --- -## Description -
    -The every method works with arrays to check if every element passes a particular test. It returns a Boolean value - true if all values meet the criteria, false if not. -For example, the following code would check if every element in the numbers array is less than 10: +# --description-- + +The `every` method works with arrays to check if *every* element passes a particular test. It returns a Boolean value - `true` if all values meet the criteria, `false` if not. + +For example, the following code would check if every element in the `numbers` array is less than 10: ```js var numbers = [1, 5, 8, 0, 10, 11]; @@ -18,35 +19,39 @@ numbers.every(function(currentValue) { // Returns false ``` -
    +# --instructions-- -## Instructions -
    -Use the every method inside the checkPositive function to check if every element in arr is positive. The function should return a Boolean value. -
    +Use the `every` method inside the `checkPositive` function to check if every element in `arr` is positive. The function should return a Boolean value. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your code should use the every method. - testString: assert(code.match(/\.every/g)); - - text: checkPositive([1, 2, 3, -4, 5]) should return false. - testString: assert.isFalse(checkPositive([1, 2, 3, -4, 5])); - - text: checkPositive([1, 2, 3, 4, 5]) should return true. - testString: assert.isTrue(checkPositive([1, 2, 3, 4, 5])); - - text: checkPositive([1, -2, 3, -4, 5]) should return false. - testString: assert.isFalse(checkPositive([1, -2, 3, -4, 5])); +Your code should use the `every` method. +```js +assert(code.match(/\.every/g)); ``` -
    +`checkPositive([1, 2, 3, -4, 5])` should return `false`. -## Challenge Seed -
    +```js +assert.isFalse(checkPositive([1, 2, 3, -4, 5])); +``` -
    +`checkPositive([1, 2, 3, 4, 5])` should return `true`. + +```js +assert.isTrue(checkPositive([1, 2, 3, 4, 5])); +``` + +`checkPositive([1, -2, 3, -4, 5])` should return `false`. + +```js +assert.isFalse(checkPositive([1, -2, 3, -4, 5])); +``` + +# --seed-- + +## --seed-contents-- ```js function checkPositive(arr) { @@ -58,14 +63,7 @@ function checkPositive(arr) { checkPositive([1, 2, 3, -4, 5]); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js function checkPositive(arr) { @@ -75,5 +73,3 @@ function checkPositive(arr) { } checkPositive([1, 2, 3, -4, 5]); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-filter-method-to-extract-data-from-an-array.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-filter-method-to-extract-data-from-an-array.md index ae5b3a6afd..c669c3fae4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-filter-method-to-extract-data-from-an-array.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-filter-method-to-extract-data-from-an-array.md @@ -5,12 +5,15 @@ challengeType: 1 forumTopicId: 18179 --- -## Description -
    -Another useful array function is Array.prototype.filter(), or simply filter(). -filter calls a function on each element of an array and returns a new array containing only the elements for which that function returns true. In other words, it filters the array, based on the function passed to it. Like map, it does this without needing to modify the original array. -The callback function accepts three arguments. The first argument is the current element being processed. The second is the index of that element and the third is the array upon which the filter method was called. -See below for an example using the filter method on the users array to return a new array containing only the users under the age of 30. For simplicity, the example only uses the first argument of the callback. +# --description-- + +Another useful array function is `Array.prototype.filter()`, or simply `filter()`. + +`filter` calls a function on each element of an array and returns a new array containing only the elements for which that function returns `true`. In other words, it filters the array, based on the function passed to it. Like `map`, it does this without needing to modify the original array. + +The callback function accepts three arguments. The first argument is the current element being processed. The second is the index of that element and the third is the array upon which the `filter` method was called. + +See below for an example using the `filter` method on the `users` array to return a new array containing only the users under the age of 30. For simplicity, the example only uses the first argument of the callback. ```js const users = [ @@ -23,35 +26,46 @@ const usersUnder30 = users.filter(user => user.age < 30); console.log(usersUnder30); // [ { name: 'Amy', age: 20 }, { name: 'camperCat', age: 10 } ] ``` -
    +# --instructions-- -## Instructions -
    -The variable watchList holds an array of objects with information on several movies. Use a combination of filter and map on watchList to assign a new array of objects with only title and rating keys. The new array should only include objects where imdbRating is greater than or equal to 8.0. Note that the rating values are saved as strings in the object and you may need to convert them into numbers to perform mathematical operations on them. -
    +The variable `watchList` holds an array of objects with information on several movies. Use a combination of `filter` and `map` on `watchList` to assign a new array of objects with only `title` and `rating` keys. The new array should only include objects where `imdbRating` is greater than or equal to 8.0. Note that the rating values are saved as strings in the object and you may need to convert them into numbers to perform mathematical operations on them. -## Tests -
    +# --hints-- -```yml -tests: - - text: The watchList variable should not change. - testString: assert(watchList[0].Title === "Inception" && watchList[4].Director == "James Cameron"); - - text: Your code should use the filter method. - testString: assert(code.match(/\.filter/g)); - - text: Your code should not use a for loop. - testString: assert(!code.match(/for\s*?\([\s\S]*?\)/g)); - - text: 'filteredList should equal [{"title": "Inception","rating": "8.8"},{"title": "Interstellar","rating": "8.6"},{"title": "The Dark Knight","rating": "9.0"},{"title": "Batman Begins","rating": "8.3"}].' - testString: 'assert.deepEqual(filteredList, [{"title": "Inception","rating": "8.8"},{"title": "Interstellar","rating": "8.6"},{"title": "The Dark Knight","rating": "9.0"},{"title": "Batman Begins","rating": "8.3"}]);' +The `watchList` variable should not change. +```js +assert( + watchList[0].Title === 'Inception' && watchList[4].Director == 'James Cameron' +); ``` -
    +Your code should use the `filter` method. -## Challenge Seed -
    +```js +assert(code.match(/\.filter/g)); +``` -
    +Your code should not use a `for` loop. + +```js +assert(!code.match(/for\s*?\([\s\S]*?\)/g)); +``` + +`filteredList` should equal `[{"title": "Inception","rating": "8.8"},{"title": "Interstellar","rating": "8.6"},{"title": "The Dark Knight","rating": "9.0"},{"title": "Batman Begins","rating": "8.3"}]`. + +```js +assert.deepEqual(filteredList, [ + { title: 'Inception', rating: '8.8' }, + { title: 'Interstellar', rating: '8.6' }, + { title: 'The Dark Knight', rating: '9.0' }, + { title: 'Batman Begins', rating: '8.3' } +]); +``` + +# --seed-- + +## --seed-contents-- ```js // The global variable @@ -177,14 +191,7 @@ var filteredList; console.log(filteredList); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js // The global variable @@ -305,5 +312,3 @@ var watchList = [ let filteredList = watchList.filter(e => e.imdbRating >= 8).map( ({Title: title, imdbRating: rating}) => ({title, rating}) ); // Only change code above this line ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array.md index 2d51d7fe0c..c69c491b86 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array.md @@ -5,15 +5,21 @@ challengeType: 1 forumTopicId: 18214 --- -## Description -
    +# --description-- + So far we have learned to use pure functions to avoid side effects in a program. Also, we have seen the value in having a function only depend on its input arguments. + This is only the beginning. As its name suggests, functional programming is centered around a theory of functions. + It would make sense to be able to pass them as arguments to other functions, and return a function from another function. Functions are considered first class objects in JavaScript, which means they can be used like any other object. They can be saved in variables, stored in an object, or passed as function arguments. -Let's start with some simple array functions, which are methods on the array object prototype. In this exercise we are looking at Array.prototype.map(), or more simply map. -The map method iterates over each item in an array and returns a new array containing the results of calling the callback function on each element. It does this without mutating the original array. -When the callback is used, it is passed three arguments. The first argument is the current element being processed. The second is the index of that element and the third is the array upon which the map method was called. -See below for an example using the map method on the users array to return a new array containing only the names of the users as elements. For simplicity, the example only uses the first argument of the callback. + +Let's start with some simple array functions, which are methods on the array object prototype. In this exercise we are looking at `Array.prototype.map()`, or more simply `map`. + +The `map` method iterates over each item in an array and returns a new array containing the results of calling the callback function on each element. It does this without mutating the original array. + +When the callback is used, it is passed three arguments. The first argument is the current element being processed. The second is the index of that element and the third is the array upon which the `map` method was called. + +See below for an example using the `map` method on the `users` array to return a new array containing only the names of the users as elements. For simplicity, the example only uses the first argument of the callback. ```js const users = [ @@ -26,35 +32,47 @@ const names = users.map(user => user.name); console.log(names); // [ 'John', 'Amy', 'camperCat' ] ``` -
    +# --instructions-- -## Instructions -
    -The watchList array holds objects with information on several movies. Use map on watchList to assign a new array of objects with only title and rating keys to the ratings variable. The code in the editor currently uses a for loop to do this, so you should replace the loop functionality with your map expression. -
    +The `watchList` array holds objects with information on several movies. Use `map` on `watchList` to assign a new array of objects with only `title` and `rating` keys to the `ratings` variable. The code in the editor currently uses a `for` loop to do this, so you should replace the loop functionality with your `map` expression. -## Tests -
    +# --hints-- -```yml -tests: - - text: The watchList variable should not change. - testString: assert(watchList[0].Title === "Inception" && watchList[4].Director == "James Cameron"); - - text: Your code should not use a for loop. - testString: assert(!__helpers.removeJSComments(code).match(/for\s*?\([\s\S]*?\)/)); - - text: Your code should use the map method. - testString: assert(code.match(/\.map/g)); - - text: ratings should equal [{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"},{"title":"Avatar","rating":"7.9"}]. - testString: assert.deepEqual(ratings, [{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"},{"title":"Avatar","rating":"7.9"}]); +The `watchList` variable should not change. +```js +assert( + watchList[0].Title === 'Inception' && watchList[4].Director == 'James Cameron' +); ``` -
    +Your code should not use a `for` loop. -## Challenge Seed -
    +```js +assert(!__helpers.removeJSComments(code).match(/for\s*?\([\s\S]*?\)/)); +``` -
    +Your code should use the `map` method. + +```js +assert(code.match(/\.map/g)); +``` + +`ratings` should equal `[{"title":"Inception","rating":"8.8"},{"title":"Interstellar","rating":"8.6"},{"title":"The Dark Knight","rating":"9.0"},{"title":"Batman Begins","rating":"8.3"},{"title":"Avatar","rating":"7.9"}]`. + +```js +assert.deepEqual(ratings, [ + { title: 'Inception', rating: '8.8' }, + { title: 'Interstellar', rating: '8.6' }, + { title: 'The Dark Knight', rating: '9.0' }, + { title: 'Batman Begins', rating: '8.3' }, + { title: 'Avatar', rating: '7.9' } +]); +``` + +# --seed-- + +## --seed-contents-- ```js // The global variable @@ -183,12 +201,7 @@ for(var i=0; i < watchList.length; i++){ console.log(JSON.stringify(ratings)); ``` -
    - -
    - -## Solution -
    +# --solutions-- ```js // The global variable @@ -312,5 +325,3 @@ var ratings = watchList.map(function(movie) { } }); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data.md index 0cf9f756c9..f77a179f64 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data.md @@ -5,19 +5,17 @@ challengeType: 1 forumTopicId: 301313 --- -## Description -
    +# --description-- -Array.prototype.reduce(), or simply reduce(), is the most general of all array operations in JavaScript. You can solve almost any array processing problem using the reduce method. +`Array.prototype.reduce()`, or simply `reduce()`, is the most general of all array operations in JavaScript. You can solve almost any array processing problem using the `reduce` method. -The reduce method allows for more general forms of array processing, and it's possible to show that both filter and map can be derived as special applications of reduce. -The reduce method iterates over each item in an array and returns a single value (i.e. string, number, object, array). This is achieved via a callback function that is called on each iteration. +The `reduce` method allows for more general forms of array processing, and it's possible to show that both `filter` and `map` can be derived as special applications of `reduce`. The `reduce` method iterates over each item in an array and returns a single value (i.e. string, number, object, array). This is achieved via a callback function that is called on each iteration. -The callback function accepts four arguments. The first argument is known as the accumulator, which gets assigned the return value of the callback function from the previous iteration, the second is the current element being processed, the third is the index of that element and the fourth is the array upon which reduce is called. +The callback function accepts four arguments. The first argument is known as the accumulator, which gets assigned the return value of the callback function from the previous iteration, the second is the current element being processed, the third is the index of that element and the fourth is the array upon which `reduce` is called. -In addition to the callback function, reduce has an additional parameter which takes an initial value for the accumulator. If this second parameter is not used, then the first iteration is skipped and the second iteration gets passed the first element of the array as the accumulator. +In addition to the callback function, `reduce` has an additional parameter which takes an initial value for the accumulator. If this second parameter is not used, then the first iteration is skipped and the second iteration gets passed the first element of the array as the accumulator. -See below for an example using reduce on the users array to return the sum of all the users' ages. For simplicity, the example only uses the first and second arguments. +See below for an example using `reduce` on the `users` array to return the sum of all the users' ages. For simplicity, the example only uses the first and second arguments. ```js const users = [ @@ -46,37 +44,47 @@ const usersObj = users.reduce((obj, user) => { console.log(usersObj); // { John: 34, Amy: 20, camperCat: 10 } ``` -
    +# --instructions-- -## Instructions -
    -The variable watchList holds an array of objects with information on several movies. Use reduce to find the average IMDB rating of the movies directed by Christopher Nolan. Recall from prior challenges how to filter data and map over it to pull what you need. You may need to create other variables, and return the average rating from getRating function. Note that the rating values are saved as strings in the object and need to be converted into numbers before they are used in any mathematical operations. -
    +The variable `watchList` holds an array of objects with information on several movies. Use `reduce` to find the average IMDB rating of the movies **directed by Christopher Nolan**. Recall from prior challenges how to `filter` data and `map` over it to pull what you need. You may need to create other variables, and return the average rating from `getRating` function. Note that the rating values are saved as strings in the object and need to be converted into numbers before they are used in any mathematical operations. -## Tests -
    +# --hints-- -```yml -tests: - - text: The watchList variable should not change. - testString: assert(watchList[0].Title === "Inception" && watchList[4].Director == "James Cameron"); - - text: Your code should use the reduce method. - testString: assert(code.match(/\.reduce/g)); - - text: The getRating(watchList) should equal 8.675. - testString: assert(getRating(watchList) === 8.675); - - text: Your code should not use a for loop. - testString: assert(!code.match(/for\s*?\([\s\S]*?\)/g)); - - text: Your code should return correct output after modifying the watchList object. - testString: assert(getRating(watchList.filter((_, i) => i < 1 || i > 2)) === 8.55); +The `watchList` variable should not change. +```js +assert( + watchList[0].Title === 'Inception' && watchList[4].Director == 'James Cameron' +); ``` -
    +Your code should use the `reduce` method. -## Challenge Seed -
    +```js +assert(code.match(/\.reduce/g)); +``` -
    +The `getRating(watchList)` should equal 8.675. + +```js +assert(getRating(watchList) === 8.675); +``` + +Your code should not use a `for` loop. + +```js +assert(!code.match(/for\s*?\([\s\S]*?\)/g)); +``` + +Your code should return correct output after modifying the `watchList` object. + +```js +assert(getRating(watchList.filter((_, i) => i < 1 || i > 2)) === 8.55); +``` + +# --seed-- + +## --seed-contents-- ```js // The global variable @@ -204,14 +212,7 @@ function getRating(watchList){ console.log(getRating(watchList)); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js // The global variable @@ -336,7 +337,4 @@ function getRating(watchList){ averageRating = rating.reduce((accum, curr) => accum + curr)/rating.length; return averageRating; } - ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.md index 65bbdba77d..6b0451c332 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/functional-programming/use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301314 --- -## Description -
    -The some method works with arrays to check if any element passes a particular test. It returns a Boolean value - true if any of the values meet the criteria, false if not. -For example, the following code would check if any element in the numbers array is less than 10: +# --description-- + +The `some` method works with arrays to check if *any* element passes a particular test. It returns a Boolean value - `true` if any of the values meet the criteria, `false` if not. + +For example, the following code would check if any element in the `numbers` array is less than 10: ```js var numbers = [10, 50, 8, 220, 110, 11]; @@ -18,35 +19,39 @@ numbers.some(function(currentValue) { // Returns true ``` -
    +# --instructions-- -## Instructions -
    -Use the some method inside the checkPositive function to check if any element in arr is positive. The function should return a Boolean value. -
    +Use the `some` method inside the `checkPositive` function to check if any element in `arr` is positive. The function should return a Boolean value. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your code should use the some method. - testString: assert(code.match(/\.some/g)); - - text: checkPositive([1, 2, 3, -4, 5]) should return true. - testString: assert(checkPositive([1, 2, 3, -4, 5])); - - text: checkPositive([1, 2, 3, 4, 5]) should return true. - testString: assert(checkPositive([1, 2, 3, 4, 5])); - - text: checkPositive([-1, -2, -3, -4, -5]) should return false. - testString: assert(!checkPositive([-1, -2, -3, -4, -5])); +Your code should use the `some` method. +```js +assert(code.match(/\.some/g)); ``` -
    +`checkPositive([1, 2, 3, -4, 5])` should return `true`. -## Challenge Seed -
    +```js +assert(checkPositive([1, 2, 3, -4, 5])); +``` -
    +`checkPositive([1, 2, 3, 4, 5])` should return `true`. + +```js +assert(checkPositive([1, 2, 3, 4, 5])); +``` + +`checkPositive([-1, -2, -3, -4, -5])` should return `false`. + +```js +assert(!checkPositive([-1, -2, -3, -4, -5])); +``` + +# --seed-- + +## --seed-contents-- ```js function checkPositive(arr) { @@ -58,14 +63,7 @@ function checkPositive(arr) { checkPositive([1, 2, 3, -4, 5]); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js function checkPositive(arr) { @@ -75,5 +73,3 @@ function checkPositive(arr) { } checkPositive([1, 2, 3, -4, 5]); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md index 3c93a0bb3e..a0596b28d9 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md @@ -5,47 +5,61 @@ challengeType: 5 forumTopicId: 14271 --- -## Description -
    +# --description-- + Create a function that sums two arguments together. If only one argument is provided, then return a function that expects one argument and returns the sum. -For example, addTogether(2, 3) should return 5, and addTogether(2) should return a function. + +For example, `addTogether(2, 3)` should return `5`, and `addTogether(2)` should return a function. + Calling this returned function with a single argument will then return the sum: -var sumTwoAnd = addTogether(2); -sumTwoAnd(3) returns 5. + +`var sumTwoAnd = addTogether(2);` + +`sumTwoAnd(3)` returns `5`. + If either argument isn't a valid number, return undefined. -
    -## Instructions -
    +# --hints-- -
    - -## Tests -
    - -```yml -tests: - - text: addTogether(2, 3) should return 5. - testString: assert.deepEqual(addTogether(2, 3), 5); - - text: addTogether(23, 30) should return 53. - testString: assert.deepEqual(addTogether(23, 30), 53); - - text: addTogether(5)(7) should return 12. - testString: assert.deepEqual(addTogether(5)(7), 12); - - text: addTogether("http://bit.ly/IqT6zt") should return undefined. - testString: assert.isUndefined(addTogether("http://bit.ly/IqT6zt")); - - text: addTogether(2, "3") should return undefined. - testString: assert.isUndefined(addTogether(2, "3")); - - text: addTogether(2)([3]) should return undefined. - testString: assert.isUndefined(addTogether(2)([3])); +`addTogether(2, 3)` should return 5. +```js +assert.deepEqual(addTogether(2, 3), 5); ``` -
    +`addTogether(23, 30)` should return 53. -## Challenge Seed -
    +```js +assert.deepEqual(addTogether(23, 30), 53); +``` -
    +`addTogether(5)(7)` should return 12. + +```js +assert.deepEqual(addTogether(5)(7), 12); +``` + +`addTogether("http://bit.ly/IqT6zt")` should return undefined. + +```js +assert.isUndefined(addTogether('http://bit.ly/IqT6zt')); +``` + +`addTogether(2, "3")` should return undefined. + +```js +assert.isUndefined(addTogether(2, '3')); +``` + +`addTogether(2)([3])` should return undefined. + +```js +assert.isUndefined(addTogether(2)([3])); +``` + +# --seed-- + +## --seed-contents-- ```js function addTogether() { @@ -55,15 +69,7 @@ function addTogether() { addTogether(2,3); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function addTogether() { @@ -80,5 +86,3 @@ function addTogether() { return a + arguments[1]; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/binary-agents.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/binary-agents.md index 0c3ce306b2..c18bea0eb9 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/binary-agents.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/binary-agents.md @@ -5,35 +5,39 @@ challengeType: 5 forumTopicId: 14273 --- -## Description -
    +# --description-- + Return an English translated sentence of the passed binary string. + The binary string will be space separated. -
    -## Instructions -
    +# --hints-- -
    - -## Tests -
    - -```yml -tests: - - text: binaryAgent("01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111") should return "Aren't bonfires fun!?" - testString: assert.deepEqual(binaryAgent('01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111'), "Aren't bonfires fun!?"); - - text: binaryAgent("01001001 00100000 01101100 01101111 01110110 01100101 00100000 01000110 01110010 01100101 01100101 01000011 01101111 01100100 01100101 01000011 01100001 01101101 01110000 00100001") should return "I love FreeCodeCamp!" - testString: assert.deepEqual(binaryAgent('01001001 00100000 01101100 01101111 01110110 01100101 00100000 01000110 01110010 01100101 01100101 01000011 01101111 01100100 01100101 01000011 01100001 01101101 01110000 00100001'), "I love FreeCodeCamp!"); +`binaryAgent("01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111")` should return "Aren't bonfires fun!?" +```js +assert.deepEqual( + binaryAgent( + '01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111' + ), + "Aren't bonfires fun!?" +); ``` -
    +`binaryAgent("01001001 00100000 01101100 01101111 01110110 01100101 00100000 01000110 01110010 01100101 01100101 01000011 01101111 01100100 01100101 01000011 01100001 01101101 01110000 00100001")` should return "I love FreeCodeCamp!" -## Challenge Seed -
    +```js +assert.deepEqual( + binaryAgent( + '01001001 00100000 01101100 01101111 01110110 01100101 00100000 01000110 01110010 01100101 01100101 01000011 01101111 01100100 01100101 01000011 01100001 01101101 01110000 00100001' + ), + 'I love FreeCodeCamp!' +); +``` -
    +# --seed-- + +## --seed-contents-- ```js function binaryAgent(str) { @@ -43,20 +47,10 @@ function binaryAgent(str) { binaryAgent("01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111"); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function binaryAgent(str) { return str.split(' ').map(function(s) { return parseInt(s, 2); }).map(function(b) { return String.fromCharCode(b);}).join(''); } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities.md index 285351cd8f..857bbce170 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities.md @@ -5,44 +5,63 @@ challengeType: 5 forumTopicId: 16007 --- -## Description -
    -Convert the characters &, <, >, " (double quote), and ' (apostrophe), in a string to their corresponding HTML entities. -
    +# --description-- -## Instructions -
    +Convert the characters `&`, `<`, `>`, `"` (double quote), and `'` (apostrophe), in a string to their corresponding HTML entities. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: convertHTML("Dolce & Gabbana") should return "Dolce &amp; Gabbana". - testString: assert.match(convertHTML("Dolce & Gabbana"), /Dolce & Gabbana/); - - text: convertHTML("Hamburgers < Pizza < Tacos") should return "Hamburgers &lt; Pizza &lt; Tacos". - testString: assert.match(convertHTML("Hamburgers < Pizza < Tacos"), /Hamburgers < Pizza < Tacos/); - - text: convertHTML("Sixty > twelve") should return "Sixty &gt; twelve". - testString: assert.match(convertHTML("Sixty > twelve"), /Sixty > twelve/); - - text: convertHTML('Stuff in "quotation marks"') should return "Stuff in &quot;quotation marks&quot;". - testString: assert.match(convertHTML('Stuff in "quotation marks"'), /Stuff in "quotation marks"/); - - text: convertHTML("Schindler's List") should return "Schindler&apos;s List". - testString: assert.match(convertHTML("Schindler's List"), /Schindler's List/); - - text: convertHTML("<>") should return "&lt;&gt;". - testString: assert.match(convertHTML('<>'), /<>/); - - text: convertHTML("abc") should return "abc". - testString: assert.strictEqual(convertHTML('abc'), 'abc'); +`convertHTML("Dolce & Gabbana")` should return `"Dolce & Gabbana"`. +```js +assert.match(convertHTML('Dolce & Gabbana'), /Dolce & Gabbana/); ``` -
    +`convertHTML("Hamburgers < Pizza < Tacos")` should return `"Hamburgers < Pizza < Tacos"`. -## Challenge Seed -
    +```js +assert.match( + convertHTML('Hamburgers < Pizza < Tacos'), + /Hamburgers < Pizza < Tacos/ +); +``` -
    +`convertHTML("Sixty > twelve")` should return `"Sixty > twelve"`. + +```js +assert.match(convertHTML('Sixty > twelve'), /Sixty > twelve/); +``` + +`convertHTML('Stuff in "quotation marks"')` should return `"Stuff in "quotation marks""`. + +```js +assert.match( + convertHTML('Stuff in "quotation marks"'), + /Stuff in "quotation marks"/ +); +``` + +`convertHTML("Schindler's List")` should return `"Schindler's List"`. + +```js +assert.match(convertHTML("Schindler's List"), /Schindler's List/); +``` + +`convertHTML("<>")` should return `"<>"`. + +```js +assert.match(convertHTML('<>'), /<>/); +``` + +`convertHTML("abc")` should return `"abc"`. + +```js +assert.strictEqual(convertHTML('abc'), 'abc'); +``` + +# --seed-- + +## --seed-contents-- ```js function convertHTML(str) { @@ -52,15 +71,7 @@ function convertHTML(str) { convertHTML("Dolce & Gabbana"); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js var MAP = { '&': '&', @@ -75,5 +86,3 @@ function convertHTML(str) { }); } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays.md index bc5143fb31..e445ec2777 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays.md @@ -5,61 +5,155 @@ challengeType: 5 forumTopicId: 16008 --- -## Description -
    +# --description-- + Compare two arrays and return a new array with any items only found in one of the two given arrays, but not both. In other words, return the symmetric difference of the two arrays. -Note
    You can return the array with its elements in any order. -
    -## Instructions -
    +**Note** +You can return the array with its elements in any order. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]) should return an array. - testString: assert(typeof diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]) === "object"); - - text: ["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"] should return ["pink wool"]. - testString: assert.sameMembers(diffArray(["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]), ["pink wool"]); - - text: ["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"] should return an array with one item. - testString: assert(diffArray(["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]).length === 1); - - text: ["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"] should return ["diorite", "pink wool"]. - testString: assert.sameMembers(diffArray(["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]), ["diorite", "pink wool"]); - - text: ["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"] should return an array with two items. - testString: assert(diffArray(["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]).length === 2); - - text: ["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"] should return []. - testString: assert.sameMembers(diffArray(["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"]), []); - - text: ["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"] should return an empty array. - testString: assert(diffArray(["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"]).length === 0); - - text: [1, 2, 3, 5], [1, 2, 3, 4, 5] should return [4]. - testString: assert.sameMembers(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]), [4]); - - text: [1, 2, 3, 5], [1, 2, 3, 4, 5] should return an array with one item. - testString: assert(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]).length === 1); - - text: [1, "calf", 3, "piglet"], [1, "calf", 3, 4] should return ["piglet", 4]. - testString: assert.sameMembers(diffArray([1, "calf", 3, "piglet"], [1, "calf", 3, 4]), ["piglet", 4]); - - text: [1, "calf", 3, "piglet"], [1, "calf", 3, 4] should return an array with two items. - testString: assert(diffArray([1, "calf", 3, "piglet"], [1, "calf", 3, 4]).length === 2); - - text: [], ["snuffleupagus", "cookie monster", "elmo"] should return ["snuffleupagus", "cookie monster", "elmo"]. - testString: assert.sameMembers(diffArray([], ["snuffleupagus", "cookie monster", "elmo"]), ["snuffleupagus", "cookie monster", "elmo"]); - - text: [], ["snuffleupagus", "cookie monster", "elmo"] should return an array with three items. - testString: assert(diffArray([], ["snuffleupagus", "cookie monster", "elmo"]).length === 3); - - text: [1, "calf", 3, "piglet"], [7, "filly"] should return [1, "calf", 3, "piglet", 7, "filly"]. - testString: assert.sameMembers(diffArray([1, "calf", 3, "piglet"], [7, "filly"]), [1, "calf", 3, "piglet", 7, "filly"]); - - text: [1, "calf", 3, "piglet"], [7, "filly"] should return an array with six items. - testString: assert(diffArray([1, "calf", 3, "piglet"], [7, "filly"]).length === 6); +`diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5])` should return an array. +```js +assert(typeof diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]) === 'object'); ``` -
    +`["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` should return `["pink wool"]`. -## Challenge Seed -
    +```js +assert.sameMembers( + diffArray( + ['diorite', 'andesite', 'grass', 'dirt', 'pink wool', 'dead shrub'], + ['diorite', 'andesite', 'grass', 'dirt', 'dead shrub'] + ), + ['pink wool'] +); +``` -
    +`["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` should return an array with one item. + +```js +assert( + diffArray( + ['diorite', 'andesite', 'grass', 'dirt', 'pink wool', 'dead shrub'], + ['diorite', 'andesite', 'grass', 'dirt', 'dead shrub'] + ).length === 1 +); +``` + +`["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` should return `["diorite", "pink wool"]`. + +```js +assert.sameMembers( + diffArray( + ['andesite', 'grass', 'dirt', 'pink wool', 'dead shrub'], + ['diorite', 'andesite', 'grass', 'dirt', 'dead shrub'] + ), + ['diorite', 'pink wool'] +); +``` + +`["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` should return an array with two items. + +```js +assert( + diffArray( + ['andesite', 'grass', 'dirt', 'pink wool', 'dead shrub'], + ['diorite', 'andesite', 'grass', 'dirt', 'dead shrub'] + ).length === 2 +); +``` + +`["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"]` should return `[]`. + +```js +assert.sameMembers( + diffArray( + ['andesite', 'grass', 'dirt', 'dead shrub'], + ['andesite', 'grass', 'dirt', 'dead shrub'] + ), + [] +); +``` + +`["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"]` should return an empty array. + +```js +assert( + diffArray( + ['andesite', 'grass', 'dirt', 'dead shrub'], + ['andesite', 'grass', 'dirt', 'dead shrub'] + ).length === 0 +); +``` + +`[1, 2, 3, 5], [1, 2, 3, 4, 5]` should return `[4]`. + +```js +assert.sameMembers(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]), [4]); +``` + +`[1, 2, 3, 5], [1, 2, 3, 4, 5]` should return an array with one item. + +```js +assert(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]).length === 1); +``` + +`[1, "calf", 3, "piglet"], [1, "calf", 3, 4]` should return `["piglet", 4]`. + +```js +assert.sameMembers(diffArray([1, 'calf', 3, 'piglet'], [1, 'calf', 3, 4]), [ + 'piglet', + 4 +]); +``` + +`[1, "calf", 3, "piglet"], [1, "calf", 3, 4]` should return an array with two items. + +```js +assert(diffArray([1, 'calf', 3, 'piglet'], [1, 'calf', 3, 4]).length === 2); +``` + +`[], ["snuffleupagus", "cookie monster", "elmo"]` should return `["snuffleupagus", "cookie monster", "elmo"]`. + +```js +assert.sameMembers(diffArray([], ['snuffleupagus', 'cookie monster', 'elmo']), [ + 'snuffleupagus', + 'cookie monster', + 'elmo' +]); +``` + +`[], ["snuffleupagus", "cookie monster", "elmo"]` should return an array with three items. + +```js +assert(diffArray([], ['snuffleupagus', 'cookie monster', 'elmo']).length === 3); +``` + +`[1, "calf", 3, "piglet"], [7, "filly"]` should return `[1, "calf", 3, "piglet", 7, "filly"]`. + +```js +assert.sameMembers(diffArray([1, 'calf', 3, 'piglet'], [7, 'filly']), [ + 1, + 'calf', + 3, + 'piglet', + 7, + 'filly' +]); +``` + +`[1, "calf", 3, "piglet"], [7, "filly"]` should return an array with six items. + +```js +assert(diffArray([1, 'calf', 3, 'piglet'], [7, 'filly']).length === 6); +``` + +# --seed-- + +## --seed-contents-- ```js function diffArray(arr1, arr2) { @@ -70,15 +164,7 @@ function diffArray(arr1, arr2) { diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function diffArray(arr1, arr2) { @@ -102,5 +188,3 @@ function diffArray(arr1, arr2) { return newArr; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md index c84f7ae791..6ca3be6964 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md @@ -5,40 +5,59 @@ challengeType: 5 forumTopicId: 16009 --- -## Description -
    +# --description-- + The DNA strand is missing the pairing element. Take each character, get its pair, and return the results as a 2d array. -Base pairs are a pair of AT and CG. Match the missing element to the provided character. + +[Base pairs](http://en.wikipedia.org/wiki/Base_pair) are a pair of AT and CG. Match the missing element to the provided character. + Return the provided character as the first element in each array. -For example, for the input GCG, return [["G", "C"], ["C","G"],["G", "C"]] + +For example, for the input GCG, return \[\["G", "C"], \["C","G"],\["G", "C"]] + The character and its pair are paired up in an array, and all the arrays are grouped into one encapsulating array. -
    -## Instructions -
    +# --hints-- -
    - -## Tests -
    - -```yml -tests: - - text: pairElement("ATCGA") should return [["A","T"],["T","A"],["C","G"],["G","C"],["A","T"]]. - testString: assert.deepEqual(pairElement("ATCGA"),[["A","T"],["T","A"],["C","G"],["G","C"],["A","T"]]); - - text: pairElement("TTGAG") should return [["T","A"],["T","A"],["G","C"],["A","T"],["G","C"]]. - testString: assert.deepEqual(pairElement("TTGAG"),[["T","A"],["T","A"],["G","C"],["A","T"],["G","C"]]); - - text: pairElement("CTCTA") should return [["C","G"],["T","A"],["C","G"],["T","A"],["A","T"]]. - testString: assert.deepEqual(pairElement("CTCTA"),[["C","G"],["T","A"],["C","G"],["T","A"],["A","T"]]); +`pairElement("ATCGA")` should return `[["A","T"],["T","A"],["C","G"],["G","C"],["A","T"]]`. +```js +assert.deepEqual(pairElement('ATCGA'), [ + ['A', 'T'], + ['T', 'A'], + ['C', 'G'], + ['G', 'C'], + ['A', 'T'] +]); ``` -
    +`pairElement("TTGAG")` should return `[["T","A"],["T","A"],["G","C"],["A","T"],["G","C"]]`. -## Challenge Seed -
    +```js +assert.deepEqual(pairElement('TTGAG'), [ + ['T', 'A'], + ['T', 'A'], + ['G', 'C'], + ['A', 'T'], + ['G', 'C'] +]); +``` -
    +`pairElement("CTCTA")` should return `[["C","G"],["T","A"],["C","G"],["T","A"],["A","T"]]`. + +```js +assert.deepEqual(pairElement('CTCTA'), [ + ['C', 'G'], + ['T', 'A'], + ['C', 'G'], + ['T', 'A'], + ['A', 'T'] +]); +``` + +# --seed-- + +## --seed-contents-- ```js function pairElement(str) { @@ -48,15 +67,7 @@ function pairElement(str) { pairElement("GCG"); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js var lookup = Object.create(null); @@ -69,5 +80,3 @@ function pairElement(str) { return str.split('').map(function(p) {return [p, lookup[p]];}); } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md index c8e5563246..e5caeb7567 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md @@ -5,43 +5,83 @@ challengeType: 5 forumTopicId: 16010 --- -## Description -
    -Given the array arr, iterate through and remove each element starting from the first element (the 0 index) until the function func returns true when the iterated element is passed through it. -Then return the rest of the array once the condition is satisfied, otherwise, arr should be returned as an empty array. -
    +# --description-- -## Instructions -
    +Given the array `arr`, iterate through and remove each element starting from the first element (the 0 index) until the function `func` returns `true` when the iterated element is passed through it. -
    +Then return the rest of the array once the condition is satisfied, otherwise, `arr` should be returned as an empty array. -## Tests -
    +# --hints-- -```yml -tests: - - text: dropElements([1, 2, 3, 4], function(n) {return n >= 3;}) should return [3, 4]. - testString: assert.deepEqual(dropElements([1, 2, 3, 4], function(n) {return n >= 3;}), [3, 4]); - - text: dropElements([0, 1, 0, 1], function(n) {return n === 1;}) should return [1, 0, 1]. - testString: assert.deepEqual(dropElements([0, 1, 0, 1], function(n) {return n === 1;}), [1, 0, 1]); - - text: dropElements([1, 2, 3], function(n) {return n > 0;}) should return [1, 2, 3]. - testString: assert.deepEqual(dropElements([1, 2, 3], function(n) {return n > 0;}), [1, 2, 3]); - - text: dropElements([1, 2, 3, 4], function(n) {return n > 5;}) should return []. - testString: assert.deepEqual(dropElements([1, 2, 3, 4], function(n) {return n > 5;}), []); - - text: dropElements([1, 2, 3, 7, 4], function(n) {return n > 3;}) should return [7, 4]. - testString: assert.deepEqual(dropElements([1, 2, 3, 7, 4], function(n) {return n > 3;}), [7, 4]); - - text: dropElements([1, 2, 3, 9, 2], function(n) {return n > 2;}) should return [3, 9, 2]. - testString: assert.deepEqual(dropElements([1, 2, 3, 9, 2], function(n) {return n > 2;}), [3, 9, 2]); +`dropElements([1, 2, 3, 4], function(n) {return n >= 3;})` should return `[3, 4]`. +```js +assert.deepEqual( + dropElements([1, 2, 3, 4], function (n) { + return n >= 3; + }), + [3, 4] +); ``` -
    +`dropElements([0, 1, 0, 1], function(n) {return n === 1;})` should return `[1, 0, 1]`. -## Challenge Seed -
    +```js +assert.deepEqual( + dropElements([0, 1, 0, 1], function (n) { + return n === 1; + }), + [1, 0, 1] +); +``` -
    +`dropElements([1, 2, 3], function(n) {return n > 0;})` should return `[1, 2, 3]`. + +```js +assert.deepEqual( + dropElements([1, 2, 3], function (n) { + return n > 0; + }), + [1, 2, 3] +); +``` + +`dropElements([1, 2, 3, 4], function(n) {return n > 5;})` should return `[]`. + +```js +assert.deepEqual( + dropElements([1, 2, 3, 4], function (n) { + return n > 5; + }), + [] +); +``` + +`dropElements([1, 2, 3, 7, 4], function(n) {return n > 3;})` should return `[7, 4]`. + +```js +assert.deepEqual( + dropElements([1, 2, 3, 7, 4], function (n) { + return n > 3; + }), + [7, 4] +); +``` + +`dropElements([1, 2, 3, 9, 2], function(n) {return n > 2;})` should return `[3, 9, 2]`. + +```js +assert.deepEqual( + dropElements([1, 2, 3, 9, 2], function (n) { + return n > 2; + }), + [3, 9, 2] +); +``` + +# --seed-- + +## --seed-contents-- ```js function dropElements(arr, func) { @@ -51,15 +91,7 @@ function dropElements(arr, func) { dropElements([1, 2, 3], function(n) {return n < 3; }); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function dropElements(arr, func) { @@ -69,5 +101,3 @@ function dropElements(arr, func) { return arr; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md index 3ab0fb6165..5bbe0d4826 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md @@ -5,51 +5,137 @@ challengeType: 5 forumTopicId: 16011 --- -## Description -
    +# --description-- + Check if the predicate (second argument) is truthy on all elements of a collection (first argument). -In other words, you are given an array collection of objects. The predicate pre will be an object property and you need to return true if its value is truthy. Otherwise, return false. -In JavaScript, truthy values are values that translate to true when evaluated in a Boolean context. -Remember, you can access object properties through either dot notation or [] notation. -
    -## Instructions -
    +In other words, you are given an array collection of objects. The predicate `pre` will be an object property and you need to return `true` if its value is `truthy`. Otherwise, return `false`. -
    +In JavaScript, `truthy` values are values that translate to `true` when evaluated in a Boolean context. -## Tests -
    +Remember, you can access object properties through either dot notation or `[]` notation. -```yml -tests: - - text: 'truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy", "sex": "male"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex") should return true.' - testString: 'assert.strictEqual(truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy", "sex": "male"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex"), true);' - - text: 'truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex") should return false.' - testString: 'assert.strictEqual(truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex"), false);' - - text: 'truthCheck([{"user": "Tinky-Winky", "sex": "male", "age": 0}, {"user": "Dipsy", "sex": "male", "age": 3}, {"user": "Laa-Laa", "sex": "female", "age": 5}, {"user": "Po", "sex": "female", "age": 4}], "age") should return false.' - testString: 'assert.strictEqual(truthCheck([{"user": "Tinky-Winky", "sex": "male", "age": 2}, {"user": "Dipsy", "sex": "male", "age": 0}, {"user": "Laa-Laa", "sex": "female", "age": 5}, {"user": "Po", "sex": "female", "age": 4}], "age"), false);' - - text: 'truthCheck([{"name": "Pete", "onBoat": true}, {"name": "Repeat", "onBoat": true}, {"name": "FastForward", "onBoat": null}], "onBoat") should return false' - testString: 'assert.strictEqual(truthCheck([{"name": "Pete", "onBoat": true}, {"name": "Repeat", "onBoat": true}, {"name": "FastForward", "onBoat": null}], "onBoat"), false);' - - text: 'truthCheck([{"name": "Pete", "onBoat": true}, {"name": "Repeat", "onBoat": true, "alias": "Repete"}, {"name": "FastForward", "onBoat": true}], "onBoat") should return true' - testString: 'assert.strictEqual(truthCheck([{"name": "Pete", "onBoat": true}, {"name": "Repeat", "onBoat": true, "alias": "Repete"}, {"name": "FastForward", "onBoat": true}], "onBoat"), true);' - - text: 'truthCheck([{"single": "yes"}], "single") should return true' - testString: 'assert.strictEqual(truthCheck([{"single": "yes"}], "single"), true);' - - text: 'truthCheck([{"single": ""}, {"single": "double"}], "single") should return false' - testString: 'assert.strictEqual(truthCheck([{"single": ""}, {"single": "double"}], "single"), false);' - - text: 'truthCheck([{"single": "double"}, {"single": undefined}], "single") should return false' - testString: 'assert.strictEqual(truthCheck([{"single": "double"}, {"single": undefined}], "single"), false);' - - text: 'truthCheck([{"single": "double"}, {"single": NaN}], "single") should return false' - testString: 'assert.strictEqual(truthCheck([{"single": "double"}, {"single": NaN}], "single"), false);' +# --hints-- +`truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy", "sex": "male"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex")` should return true. + +```js +assert.strictEqual( + truthCheck( + [ + { user: 'Tinky-Winky', sex: 'male' }, + { user: 'Dipsy', sex: 'male' }, + { user: 'Laa-Laa', sex: 'female' }, + { user: 'Po', sex: 'female' } + ], + 'sex' + ), + true +); ``` -
    +`truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex")` should return false. -## Challenge Seed -
    +```js +assert.strictEqual( + truthCheck( + [ + { user: 'Tinky-Winky', sex: 'male' }, + { user: 'Dipsy' }, + { user: 'Laa-Laa', sex: 'female' }, + { user: 'Po', sex: 'female' } + ], + 'sex' + ), + false +); +``` -
    +`truthCheck([{"user": "Tinky-Winky", "sex": "male", "age": 0}, {"user": "Dipsy", "sex": "male", "age": 3}, {"user": "Laa-Laa", "sex": "female", "age": 5}, {"user": "Po", "sex": "female", "age": 4}], "age")` should return false. + +```js +assert.strictEqual( + truthCheck( + [ + { user: 'Tinky-Winky', sex: 'male', age: 2 }, + { user: 'Dipsy', sex: 'male', age: 0 }, + { user: 'Laa-Laa', sex: 'female', age: 5 }, + { user: 'Po', sex: 'female', age: 4 } + ], + 'age' + ), + false +); +``` + +`truthCheck([{"name": "Pete", "onBoat": true}, {"name": "Repeat", "onBoat": true}, {"name": "FastForward", "onBoat": null}], "onBoat")` should return false + +```js +assert.strictEqual( + truthCheck( + [ + { name: 'Pete', onBoat: true }, + { name: 'Repeat', onBoat: true }, + { name: 'FastForward', onBoat: null } + ], + 'onBoat' + ), + false +); +``` + +`truthCheck([{"name": "Pete", "onBoat": true}, {"name": "Repeat", "onBoat": true, "alias": "Repete"}, {"name": "FastForward", "onBoat": true}], "onBoat")` should return true + +```js +assert.strictEqual( + truthCheck( + [ + { name: 'Pete', onBoat: true }, + { name: 'Repeat', onBoat: true, alias: 'Repete' }, + { name: 'FastForward', onBoat: true } + ], + 'onBoat' + ), + true +); +``` + +`truthCheck([{"single": "yes"}], "single")` should return true + +```js +assert.strictEqual(truthCheck([{ single: 'yes' }], 'single'), true); +``` + +`truthCheck([{"single": ""}, {"single": "double"}], "single")` should return false + +```js +assert.strictEqual( + truthCheck([{ single: '' }, { single: 'double' }], 'single'), + false +); +``` + +`truthCheck([{"single": "double"}, {"single": undefined}], "single")` should return false + +```js +assert.strictEqual( + truthCheck([{ single: 'double' }, { single: undefined }], 'single'), + false +); +``` + +`truthCheck([{"single": "double"}, {"single": NaN}], "single")` should return false + +```js +assert.strictEqual( + truthCheck([{ single: 'double' }, { single: NaN }], 'single'), + false +); +``` + +# --seed-- + +## --seed-contents-- ```js function truthCheck(collection, pre) { @@ -59,20 +145,10 @@ function truthCheck(collection, pre) { truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy", "sex": "male"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex"); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function truthCheck(collection, pre) { return collection.every(function(e) { return e[pre]; }); } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md index cc182083e8..cbbe8b38fc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md @@ -5,8 +5,8 @@ challengeType: 5 forumTopicId: 16020 --- -## Description -
    +# --description-- + Fill in the object constructor with the following methods below: ```js @@ -18,54 +18,124 @@ setLastName(last) setFullName(firstAndLast) ``` -Run the tests to see the expected output for each method. -The methods that take an argument must accept only one argument and it has to be a string. -These methods must be the only available means of interacting with the object. -
    +Run the tests to see the expected output for each method. The methods that take an argument must accept only one argument and it has to be a string. These methods must be the only available means of interacting with the object. -## Instructions -
    +# --hints-- -
    - -## Tests -
    - -```yml -tests: - - text: Object.keys(bob).length should return 6. - testString: assert.deepEqual(Object.keys(bob).length, 6); - - text: bob instanceof Person should return true. - testString: assert.deepEqual(bob instanceof Person, true); - - text: bob.firstName should return undefined. - testString: assert.deepEqual(bob.firstName, undefined); - - text: bob.lastName should return undefined. - testString: assert.deepEqual(bob.lastName, undefined); - - text: bob.getFirstName() should return "Bob". - testString: assert.deepEqual(bob.getFirstName(), 'Bob'); - - text: bob.getLastName() should return "Ross". - testString: assert.deepEqual(bob.getLastName(), 'Ross'); - - text: bob.getFullName() should return "Bob Ross". - testString: assert.deepEqual(bob.getFullName(), 'Bob Ross'); - - text: bob.getFullName() should return "Haskell Ross" after bob.setFirstName("Haskell"). - testString: assert.strictEqual((function () { bob.setFirstName("Haskell"); return bob.getFullName(); })(), 'Haskell Ross'); - - text: bob.getFullName() should return "Haskell Curry" after bob.setLastName("Curry"). - testString: assert.strictEqual((function () { var _bob=new Person('Haskell Ross'); _bob.setLastName("Curry"); return _bob.getFullName(); })(), 'Haskell Curry'); - - text: bob.getFullName() should return "Haskell Curry" after bob.setFullName("Haskell Curry"). - testString: assert.strictEqual((function () { bob.setFullName("Haskell Curry"); return bob.getFullName(); })(), 'Haskell Curry'); - - text: bob.getFirstName() should return "Haskell" after bob.setFullName("Haskell Curry"). - testString: assert.strictEqual((function () { bob.setFullName("Haskell Curry"); return bob.getFirstName(); })(), 'Haskell'); - - text: bob.getLastName() should return "Curry" after bob.setFullName("Haskell Curry"). - testString: assert.strictEqual((function () { bob.setFullName("Haskell Curry"); return bob.getLastName(); })(), 'Curry'); +`Object.keys(bob).length` should return 6. +```js +assert.deepEqual(Object.keys(bob).length, 6); ``` -
    +`bob instanceof Person` should return true. -## Challenge Seed -
    +```js +assert.deepEqual(bob instanceof Person, true); +``` -
    +`bob.firstName` should return undefined. + +```js +assert.deepEqual(bob.firstName, undefined); +``` + +`bob.lastName` should return undefined. + +```js +assert.deepEqual(bob.lastName, undefined); +``` + +`bob.getFirstName()` should return "Bob". + +```js +assert.deepEqual(bob.getFirstName(), 'Bob'); +``` + +`bob.getLastName()` should return "Ross". + +```js +assert.deepEqual(bob.getLastName(), 'Ross'); +``` + +`bob.getFullName()` should return "Bob Ross". + +```js +assert.deepEqual(bob.getFullName(), 'Bob Ross'); +``` + +`bob.getFullName()` should return "Haskell Ross" after `bob.setFirstName("Haskell")`. + +```js +assert.strictEqual( + (function () { + bob.setFirstName('Haskell'); + return bob.getFullName(); + })(), + 'Haskell Ross' +); +``` + +`bob.getFullName()` should return "Haskell Curry" after `bob.setLastName("Curry")`. + +```js +assert.strictEqual( + (function () { + var _bob = new Person('Haskell Ross'); + _bob.setLastName('Curry'); + return _bob.getFullName(); + })(), + 'Haskell Curry' +); +``` + +`bob.getFullName()` should return "Haskell Curry" after `bob.setFullName("Haskell Curry")`. + +```js +assert.strictEqual( + (function () { + bob.setFullName('Haskell Curry'); + return bob.getFullName(); + })(), + 'Haskell Curry' +); +``` + +`bob.getFirstName()` should return "Haskell" after `bob.setFullName("Haskell Curry")`. + +```js +assert.strictEqual( + (function () { + bob.setFullName('Haskell Curry'); + return bob.getFirstName(); + })(), + 'Haskell' +); +``` + +`bob.getLastName()` should return "Curry" after `bob.setFullName("Haskell Curry")`. + +```js +assert.strictEqual( + (function () { + bob.setFullName('Haskell Curry'); + return bob.getLastName(); + })(), + 'Curry' +); +``` + +# --seed-- + +## --after-user-code-- + +```js +if(bob){ + bob = new Person("Bob Ross"); +} +``` + +## --seed-contents-- ```js var Person = function(firstAndLast) { @@ -81,26 +151,7 @@ var bob = new Person('Bob Ross'); bob.getFullName(); ``` -
    - -### After Test - -
    - -```js -if(bob){ - bob = new Person("Bob Ross"); -} -``` - -
    - - -
    - -## Solution -
    - +# --solutions-- ```js var Person = function(firstAndLast) { @@ -143,5 +194,3 @@ var Person = function(firstAndLast) { var bob = new Person('Bob Ross'); bob.getFullName(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/map-the-debris.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/map-the-debris.md index 17c4aa3241..4fdbaaa049 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/map-the-debris.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/map-the-debris.md @@ -5,38 +5,48 @@ challengeType: 5 forumTopicId: 16021 --- -## Description -
    +# --description-- + Return a new array that transforms the elements' average altitude into their orbital periods (in seconds). -The array will contain objects in the format {name: 'name', avgAlt: avgAlt}. -You can read about orbital periods on Wikipedia. + +The array will contain objects in the format `{name: 'name', avgAlt: avgAlt}`. + +You can read about orbital periods [on Wikipedia](http://en.wikipedia.org/wiki/Orbital_period). + The values should be rounded to the nearest whole number. The body being orbited is Earth. + The radius of the earth is 6367.4447 kilometers, and the GM value of earth is 398600.4418 km3s-2. -
    -## Instructions -
    +# --hints-- -
    - -## Tests -
    - -```yml -tests: - - text: 'orbitalPeriod([{name : "sputnik", avgAlt : 35873.5553}]) should return [{name: "sputnik", orbitalPeriod: 86400}].' - testString: 'assert.deepEqual(orbitalPeriod([{name : "sputnik", avgAlt : 35873.5553}]), [{name: "sputnik", orbitalPeriod: 86400}]);' - - text: 'orbitalPeriod([{name: "iss", avgAlt: 413.6}, {name: "hubble", avgAlt: 556.7}, {name: "moon", avgAlt: 378632.553}]) should return [{name : "iss", orbitalPeriod: 5557}, {name: "hubble", orbitalPeriod: 5734}, {name: "moon", orbitalPeriod: 2377399}].' - testString: 'assert.deepEqual(orbitalPeriod([{name: "iss", avgAlt: 413.6}, {name: "hubble", avgAlt: 556.7}, {name: "moon", avgAlt: 378632.553}]), [{name : "iss", orbitalPeriod: 5557}, {name: "hubble", orbitalPeriod: 5734}, {name: "moon", orbitalPeriod: 2377399}]);' +`orbitalPeriod([{name : "sputnik", avgAlt : 35873.5553}])` should return `[{name: "sputnik", orbitalPeriod: 86400}]`. +```js +assert.deepEqual(orbitalPeriod([{ name: 'sputnik', avgAlt: 35873.5553 }]), [ + { name: 'sputnik', orbitalPeriod: 86400 } +]); ``` -
    +`orbitalPeriod([{name: "iss", avgAlt: 413.6}, {name: "hubble", avgAlt: 556.7}, {name: "moon", avgAlt: 378632.553}])` should return `[{name : "iss", orbitalPeriod: 5557}, {name: "hubble", orbitalPeriod: 5734}, {name: "moon", orbitalPeriod: 2377399}]`. -## Challenge Seed -
    +```js +assert.deepEqual( + orbitalPeriod([ + { name: 'iss', avgAlt: 413.6 }, + { name: 'hubble', avgAlt: 556.7 }, + { name: 'moon', avgAlt: 378632.553 } + ]), + [ + { name: 'iss', orbitalPeriod: 5557 }, + { name: 'hubble', orbitalPeriod: 5734 }, + { name: 'moon', orbitalPeriod: 2377399 } + ] +); +``` -
    +# --seed-- + +## --seed-contents-- ```js function orbitalPeriod(arr) { @@ -48,15 +58,7 @@ function orbitalPeriod(arr) { orbitalPeriod([{name : "sputnik", avgAlt : 35873.5553}]); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function orbitalPeriod(arr) { @@ -72,7 +74,4 @@ function orbitalPeriod(arr) { } orbitalPeriod([{name : "sputkin", avgAlt : 35873.5553}]); - ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/missing-letters.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/missing-letters.md index 6411eedd24..20325f25fa 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/missing-letters.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/missing-letters.md @@ -5,41 +5,47 @@ challengeType: 5 forumTopicId: 16023 --- -## Description -
    +# --description-- + Find the missing letter in the passed letter range and return it. + If all letters are present in the range, return undefined. -
    -## Instructions -
    +# --hints-- -
    - -## Tests -
    - -```yml -tests: - - text: fearNotLetter("abce") should return "d". - testString: assert.deepEqual(fearNotLetter('abce'), 'd'); - - text: fearNotLetter("abcdefghjklmno") should return "i". - testString: assert.deepEqual(fearNotLetter('abcdefghjklmno'), 'i'); - - text: fearNotLetter("stvwx") should return "u". - testString: assert.deepEqual(fearNotLetter('stvwx'), 'u'); - - text: fearNotLetter("bcdf") should return "e". - testString: assert.deepEqual(fearNotLetter('bcdf'), 'e'); - - text: fearNotLetter("abcdefghijklmnopqrstuvwxyz") should return undefined. - testString: assert.isUndefined(fearNotLetter('abcdefghijklmnopqrstuvwxyz')); +`fearNotLetter("abce")` should return "d". +```js +assert.deepEqual(fearNotLetter('abce'), 'd'); ``` -
    +`fearNotLetter("abcdefghjklmno")` should return "i". -## Challenge Seed -
    +```js +assert.deepEqual(fearNotLetter('abcdefghjklmno'), 'i'); +``` -
    +`fearNotLetter("stvwx")` should return "u". + +```js +assert.deepEqual(fearNotLetter('stvwx'), 'u'); +``` + +`fearNotLetter("bcdf")` should return "e". + +```js +assert.deepEqual(fearNotLetter('bcdf'), 'e'); +``` + +`fearNotLetter("abcdefghijklmnopqrstuvwxyz")` should return undefined. + +```js +assert.isUndefined(fearNotLetter('abcdefghijklmnopqrstuvwxyz')); +``` + +# --seed-- + +## --seed-contents-- ```js function fearNotLetter(str) { @@ -49,15 +55,7 @@ function fearNotLetter(str) { fearNotLetter("abce"); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function fearNotLetter (str) { @@ -71,5 +69,3 @@ function fearNotLetter (str) { return undefined; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/pig-latin.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/pig-latin.md index 54dfa58718..120a2ad596 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/pig-latin.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/pig-latin.md @@ -5,46 +5,65 @@ challengeType: 5 forumTopicId: 16039 --- -## Description -
    +# --description-- + Pig Latin is a way of altering English Words. The rules are as follows: -- If a word begins with a consonant, take the first consonant or consonant cluster, move it to the end of the word, and add "ay" to it. -- If a word begins with a vowel, just add "way" at the end. -
    -## Instructions -
    +\- If a word begins with a consonant, take the first consonant or consonant cluster, move it to the end of the word, and add "ay" to it. + +\- If a word begins with a vowel, just add "way" at the end. + +# --instructions-- + Translate the provided string to Pig Latin. Input strings are guaranteed to be English words in all lowercase. -
    -## Tests -
    +# --hints-- -```yml -tests: - - text: translatePigLatin("california") should return "aliforniacay". - testString: assert.deepEqual(translatePigLatin("california"), "aliforniacay"); - - text: translatePigLatin("paragraphs") should return "aragraphspay". - testString: assert.deepEqual(translatePigLatin("paragraphs"), "aragraphspay"); - - text: translatePigLatin("glove") should return "oveglay". - testString: assert.deepEqual(translatePigLatin("glove"), "oveglay"); - - text: translatePigLatin("algorithm") should return "algorithmway". - testString: assert.deepEqual(translatePigLatin("algorithm"), "algorithmway"); - - text: translatePigLatin("eight") should return "eightway". - testString: assert.deepEqual(translatePigLatin("eight"), "eightway"); - - text: Should handle words where the first vowel comes in the middle of the word. translatePigLatin("schwartz") should return "artzschway". - testString: assert.deepEqual(translatePigLatin("schwartz"), "artzschway"); - - text: Should handle words without vowels. translatePigLatin("rhythm") should return "rhythmay". - testString: assert.deepEqual(translatePigLatin("rhythm"), "rhythmay"); +`translatePigLatin("california")` should return "aliforniacay". +```js +assert.deepEqual(translatePigLatin('california'), 'aliforniacay'); ``` -
    +`translatePigLatin("paragraphs")` should return "aragraphspay". -## Challenge Seed -
    +```js +assert.deepEqual(translatePigLatin('paragraphs'), 'aragraphspay'); +``` -
    +`translatePigLatin("glove")` should return "oveglay". + +```js +assert.deepEqual(translatePigLatin('glove'), 'oveglay'); +``` + +`translatePigLatin("algorithm")` should return "algorithmway". + +```js +assert.deepEqual(translatePigLatin('algorithm'), 'algorithmway'); +``` + +`translatePigLatin("eight")` should return "eightway". + +```js +assert.deepEqual(translatePigLatin('eight'), 'eightway'); +``` + +Should handle words where the first vowel comes in the middle of the word. `translatePigLatin("schwartz")` should return "artzschway". + +```js +assert.deepEqual(translatePigLatin('schwartz'), 'artzschway'); +``` + +Should handle words without vowels. `translatePigLatin("rhythm")` should return "rhythmay". + +```js +assert.deepEqual(translatePigLatin('rhythm'), 'rhythmay'); +``` + +# --seed-- + +## --seed-contents-- ```js function translatePigLatin(str) { @@ -54,15 +73,7 @@ function translatePigLatin(str) { translatePigLatin("consonant"); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function translatePigLatin(str) { @@ -79,5 +90,3 @@ function isVowel(c) { return ['a', 'e', 'i', 'o', 'u'].indexOf(c.toLowerCase()) !== -1; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/search-and-replace.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/search-and-replace.md index aaef790fcb..464c0e00e8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/search-and-replace.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/search-and-replace.md @@ -5,46 +5,78 @@ challengeType: 5 forumTopicId: 16045 --- -## Description -
    +# --description-- + Perform a search and replace on the sentence using the arguments provided and return the new sentence. + First argument is the sentence to perform the search and replace on. + Second argument is the word that you will be replacing (before). + Third argument is what you will be replacing the second argument with (after). -Note
    Preserve the case of the first character in the original word when you are replacing it. For example if you mean to replace the word "Book" with the word "dog", it should be replaced as "Dog" -
    -## Instructions -
    +**Note** +Preserve the case of the first character in the original word when you are replacing it. For example if you mean to replace the word "Book" with the word "dog", it should be replaced as "Dog" -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: myReplace("Let us go to the store", "store", "mall") should return "Let us go to the mall". - testString: assert.deepEqual(myReplace("Let us go to the store", "store", "mall"), "Let us go to the mall"); - - text: myReplace("He is Sleeping on the couch", "Sleeping", "sitting") should return "He is Sitting on the couch". - testString: assert.deepEqual(myReplace("He is Sleeping on the couch", "Sleeping", "sitting"), "He is Sitting on the couch"); - - text: myReplace("I think we should look up there", "up", "Down") should return "I think we should look down there". - testString: assert.deepEqual(myReplace("I think we should look up there", "up", "Down"), "I think we should look down there"); - - text: myReplace("This has a spellngi error", "spellngi", "spelling") should return "This has a spelling error". - testString: assert.deepEqual(myReplace("This has a spellngi error", "spellngi", "spelling"), "This has a spelling error"); - - text: myReplace("His name is Tom", "Tom", "john") should return "His name is John". - testString: assert.deepEqual(myReplace("His name is Tom", "Tom", "john"), "His name is John"); - - text: myReplace("Let us get back to more Coding", "Coding", "algorithms") should return "Let us get back to more Algorithms". - testString: assert.deepEqual(myReplace("Let us get back to more Coding", "Coding", "algorithms"), "Let us get back to more Algorithms"); +`myReplace("Let us go to the store", "store", "mall")` should return "Let us go to the mall". +```js +assert.deepEqual( + myReplace('Let us go to the store', 'store', 'mall'), + 'Let us go to the mall' +); ``` -
    +`myReplace("He is Sleeping on the couch", "Sleeping", "sitting")` should return "He is Sitting on the couch". -## Challenge Seed -
    +```js +assert.deepEqual( + myReplace('He is Sleeping on the couch', 'Sleeping', 'sitting'), + 'He is Sitting on the couch' +); +``` -
    +`myReplace("I think we should look up there", "up", "Down")` should return "I think we should look down there". + +```js +assert.deepEqual( + myReplace('I think we should look up there', 'up', 'Down'), + 'I think we should look down there' +); +``` + +`myReplace("This has a spellngi error", "spellngi", "spelling")` should return "This has a spelling error". + +```js +assert.deepEqual( + myReplace('This has a spellngi error', 'spellngi', 'spelling'), + 'This has a spelling error' +); +``` + +`myReplace("His name is Tom", "Tom", "john")` should return "His name is John". + +```js +assert.deepEqual( + myReplace('His name is Tom', 'Tom', 'john'), + 'His name is John' +); +``` + +`myReplace("Let us get back to more Coding", "Coding", "algorithms")` should return "Let us get back to more Algorithms". + +```js +assert.deepEqual( + myReplace('Let us get back to more Coding', 'Coding', 'algorithms'), + 'Let us get back to more Algorithms' +); +``` + +# --seed-- + +## --seed-contents-- ```js function myReplace(str, before, after) { @@ -54,15 +86,7 @@ function myReplace(str, before, after) { myReplace("A quick brown fox jumped over the lazy dog", "jumped", "leaped"); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function myReplace(str, before, after) { @@ -74,5 +98,3 @@ function myReplace(str, before, after) { return str.replace(before, after); } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md index aaa32f75d8..f014d59c91 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md @@ -5,43 +5,81 @@ challengeType: 5 forumTopicId: 16046 --- -## Description -
    +# --description-- + You will be provided with an initial array (the first argument in the destroyer function), followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments. -Note
    You have to use the arguments object. -
    -## Instructions -
    +**Note** +You have to use the `arguments` object. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: destroyer([1, 2, 3, 1, 2, 3], 2, 3) should return [1, 1]. - testString: assert.deepEqual(destroyer([1, 2, 3, 1, 2, 3], 2, 3), [1, 1]); - - text: destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3) should return [1, 5, 1]. - testString: assert.deepEqual(destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3), [1, 5, 1]); - - text: destroyer([3, 5, 1, 2, 2], 2, 3, 5) should return [1]. - testString: assert.deepEqual(destroyer([3, 5, 1, 2, 2], 2, 3, 5), [1]); - - text: destroyer([2, 3, 2, 3], 2, 3) should return []. - testString: assert.deepEqual(destroyer([2, 3, 2, 3], 2, 3), []); - - text: destroyer(["tree", "hamburger", 53], "tree", 53) should return ["hamburger"]. - testString: assert.deepEqual(destroyer(["tree", "hamburger", 53], "tree", 53), ["hamburger"]); - - text: destroyer(["possum", "trollo", 12, "safari", "hotdog", 92, 65, "grandma", "bugati", "trojan", "yacht"], "yacht", "possum", "trollo", "safari", "hotdog", "grandma", "bugati", "trojan") should return [12,92,65]. - testString: assert.deepEqual(destroyer(["possum", "trollo", 12, "safari", "hotdog", 92, 65, "grandma", "bugati", "trojan", "yacht"], "yacht", "possum", "trollo", "safari", "hotdog", "grandma", "bugati", "trojan"), [12,92,65]); +`destroyer([1, 2, 3, 1, 2, 3], 2, 3)` should return `[1, 1]`. +```js +assert.deepEqual(destroyer([1, 2, 3, 1, 2, 3], 2, 3), [1, 1]); ``` -
    +`destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3)` should return `[1, 5, 1]`. -## Challenge Seed -
    +```js +assert.deepEqual(destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3), [1, 5, 1]); +``` -
    +`destroyer([3, 5, 1, 2, 2], 2, 3, 5)` should return `[1]`. + +```js +assert.deepEqual(destroyer([3, 5, 1, 2, 2], 2, 3, 5), [1]); +``` + +`destroyer([2, 3, 2, 3], 2, 3)` should return `[]`. + +```js +assert.deepEqual(destroyer([2, 3, 2, 3], 2, 3), []); +``` + +`destroyer(["tree", "hamburger", 53], "tree", 53)` should return `["hamburger"]`. + +```js +assert.deepEqual(destroyer(['tree', 'hamburger', 53], 'tree', 53), [ + 'hamburger' +]); +``` + +`destroyer(["possum", "trollo", 12, "safari", "hotdog", 92, 65, "grandma", "bugati", "trojan", "yacht"], "yacht", "possum", "trollo", "safari", "hotdog", "grandma", "bugati", "trojan")` should return `[12,92,65]`. + +```js +assert.deepEqual( + destroyer( + [ + 'possum', + 'trollo', + 12, + 'safari', + 'hotdog', + 92, + 65, + 'grandma', + 'bugati', + 'trojan', + 'yacht' + ], + 'yacht', + 'possum', + 'trollo', + 'safari', + 'hotdog', + 'grandma', + 'bugati', + 'trojan' + ), + [12, 92, 65] +); +``` + +# --seed-- + +## --seed-contents-- ```js function destroyer(arr) { @@ -51,15 +89,7 @@ function destroyer(arr) { destroyer([1, 2, 3, 1, 2, 3], 2, 3); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function destroyer(arr) { @@ -71,7 +101,4 @@ function destroyer(arr) { } destroyer([1, 2, 3, 1, 2, 3], 2, 3); - ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/smallest-common-multiple.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/smallest-common-multiple.md index 3b90c6f141..09bf8fcaed 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/smallest-common-multiple.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/smallest-common-multiple.md @@ -5,44 +5,55 @@ challengeType: 5 forumTopicId: 16075 --- -## Description -
    +# --description-- + Find the smallest common multiple of the provided parameters that can be evenly divided by both, as well as by all sequential numbers in the range between these parameters. + The range will be an array of two numbers that will not necessarily be in numerical order. -For example, if given 1 and 3, find the smallest common multiple of both 1 and 3 that is also evenly divisible by all numbers between 1 and 3. The answer here would be 6. -
    -## Instructions -
    +For example, if given 1 and 3, find the smallest common multiple of both 1 and 3 that is also evenly divisible by all numbers *between* 1 and 3. The answer here would be 6. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: smallestCommons([1, 5]) should return a number. - testString: assert.deepEqual(typeof smallestCommons([1, 5]), 'number'); - - text: smallestCommons([1, 5]) should return 60. - testString: assert.deepEqual(smallestCommons([1, 5]), 60); - - text: smallestCommons([5, 1]) should return 60. - testString: assert.deepEqual(smallestCommons([5, 1]), 60); - - text: smallestCommons([2, 10]) should return 2520. - testString: assert.deepEqual(smallestCommons([2, 10]), 2520); - - text: smallestCommons([1, 13]) should return 360360. - testString: assert.deepEqual(smallestCommons([1, 13]), 360360); - - text: smallestCommons([23, 18]) should return 6056820. - testString: assert.deepEqual(smallestCommons([23, 18]), 6056820); +`smallestCommons([1, 5])` should return a number. +```js +assert.deepEqual(typeof smallestCommons([1, 5]), 'number'); ``` -
    +`smallestCommons([1, 5])` should return 60. -## Challenge Seed -
    +```js +assert.deepEqual(smallestCommons([1, 5]), 60); +``` -
    +`smallestCommons([5, 1])` should return 60. + +```js +assert.deepEqual(smallestCommons([5, 1]), 60); +``` + +`smallestCommons([2, 10])` should return 2520. + +```js +assert.deepEqual(smallestCommons([2, 10]), 2520); +``` + +`smallestCommons([1, 13])` should return 360360. + +```js +assert.deepEqual(smallestCommons([1, 13]), 360360); +``` + +`smallestCommons([23, 18])` should return 6056820. + +```js +assert.deepEqual(smallestCommons([23, 18]), 6056820); +``` + +# --seed-- + +## --seed-contents-- ```js function smallestCommons(arr) { @@ -53,15 +64,7 @@ function smallestCommons(arr) { smallestCommons([1,5]); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function gcd(a, b) { @@ -84,5 +87,3 @@ function smallestCommons(arr) { return rng.reduce(lcm); } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md index 10b58c174c..1743713a3c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md @@ -5,39 +5,48 @@ challengeType: 5 forumTopicId: 16077 --- -## Description -
    +# --description-- + Write a function that takes two or more arrays and returns a new array of unique values in the order of the original provided arrays. + In other words, all values present from all arrays should be included in their original order, but with no duplicates in the final array. + The unique numbers should be sorted by their original order, but the final array should not be sorted in numerical order. + Check the assertion tests for examples. -
    -## Instructions -
    +# --hints-- -
    - -## Tests -
    - -```yml -tests: - - text: uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]) should return [1, 3, 2, 5, 4]. - testString: assert.deepEqual(uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]), [1, 3, 2, 5, 4]); - - text: uniteUnique([1, 2, 3], [5, 2, 1]) should return [1, 2, 3, 5]. - testString: assert.deepEqual(uniteUnique([1, 2, 3], [5, 2, 1]), [1, 2, 3, 5]); - - text: uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8]) should return [1, 2, 3, 5, 4, 6, 7, 8]. - testString: assert.deepEqual(uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8]), [1, 2, 3, 5, 4, 6, 7, 8]); +`uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1])` should return `[1, 3, 2, 5, 4]`. +```js +assert.deepEqual(uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]), [1, 3, 2, 5, 4]); ``` -
    +`uniteUnique([1, 2, 3], [5, 2, 1])` should return `[1, 2, 3, 5]`. -## Challenge Seed -
    +```js +assert.deepEqual(uniteUnique([1, 2, 3], [5, 2, 1]), [1, 2, 3, 5]); +``` -
    +`uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8])` should return `[1, 2, 3, 5, 4, 6, 7, 8]`. + +```js +assert.deepEqual(uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8]), [ + 1, + 2, + 3, + 5, + 4, + 6, + 7, + 8 +]); +``` + +# --seed-- + +## --seed-contents-- ```js function uniteUnique(arr) { @@ -47,15 +56,7 @@ function uniteUnique(arr) { uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function uniteUnique(arr) { @@ -64,5 +65,3 @@ function uniteUnique(arr) { }, []); } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/spinal-tap-case.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/spinal-tap-case.md index 6122e135d7..fb64ed5be1 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/spinal-tap-case.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/spinal-tap-case.md @@ -5,40 +5,51 @@ challengeType: 5 forumTopicId: 16078 --- -## Description -
    +# --description-- + Convert a string to spinal case. Spinal case is all-lowercase-words-joined-by-dashes. -
    -## Instructions -
    +# --hints-- -
    - -## Tests -
    - -```yml -tests: - - text: spinalCase("This Is Spinal Tap") should return "this-is-spinal-tap". - testString: assert.deepEqual(spinalCase("This Is Spinal Tap"), "this-is-spinal-tap"); - - text: spinalCase("thisIsSpinalTap") should return "this-is-spinal-tap". - testString: assert.strictEqual(spinalCase('thisIsSpinalTap'), "this-is-spinal-tap"); - - text: spinalCase("The_Andy_Griffith_Show") should return "the-andy-griffith-show". - testString: assert.strictEqual(spinalCase("The_Andy_Griffith_Show"), "the-andy-griffith-show"); - - text: spinalCase("Teletubbies say Eh-oh") should return "teletubbies-say-eh-oh". - testString: assert.strictEqual(spinalCase("Teletubbies say Eh-oh"), "teletubbies-say-eh-oh"); - - text: spinalCase("AllThe-small Things") should return "all-the-small-things". - testString: assert.strictEqual(spinalCase("AllThe-small Things"), "all-the-small-things"); +`spinalCase("This Is Spinal Tap")` should return `"this-is-spinal-tap"`. +```js +assert.deepEqual(spinalCase('This Is Spinal Tap'), 'this-is-spinal-tap'); ``` -
    +`spinalCase("thisIsSpinalTap")` should return `"this-is-spinal-tap"`. -## Challenge Seed -
    +```js +assert.strictEqual(spinalCase('thisIsSpinalTap'), 'this-is-spinal-tap'); +``` -
    +`spinalCase("The_Andy_Griffith_Show")` should return `"the-andy-griffith-show"`. + +```js +assert.strictEqual( + spinalCase('The_Andy_Griffith_Show'), + 'the-andy-griffith-show' +); +``` + +`spinalCase("Teletubbies say Eh-oh")` should return `"teletubbies-say-eh-oh"`. + +```js +assert.strictEqual( + spinalCase('Teletubbies say Eh-oh'), + 'teletubbies-say-eh-oh' +); +``` + +`spinalCase("AllThe-small Things")` should return `"all-the-small-things"`. + +```js +assert.strictEqual(spinalCase('AllThe-small Things'), 'all-the-small-things'); +``` + +# --seed-- + +## --seed-contents-- ```js function spinalCase(str) { @@ -48,15 +59,7 @@ function spinalCase(str) { spinalCase('This Is Spinal Tap'); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function spinalCase(str) { @@ -64,5 +67,3 @@ function spinalCase(str) { return str.toLowerCase().replace(/\ |\_/g, '-'); } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md index b8ddc44cb0..4a1aba7252 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md @@ -5,43 +5,45 @@ challengeType: 5 forumTopicId: 16079 --- -## Description +# --description-- -
    Flatten a nested array. You must account for varying levels of nesting. -
    -## Instructions +# --hints-- -
    +`steamrollArray([[["a"]], [["b"]]])` should return `["a", "b"]`. -
    - -## Tests - -
    - -```yml -tests: - - text: steamrollArray([[["a"]], [["b"]]]) should return ["a", "b"]. - testString: assert.deepEqual(steamrollArray([[["a"]], [["b"]]]), ["a", "b"]); - - text: steamrollArray([1, [2], [3, [[4]]]]) should return [1, 2, 3, 4]. - testString: assert.deepEqual(steamrollArray([1, [2], [3, [[4]]]]), [1, 2, 3, 4]); - - text: steamrollArray([1, [], [3, [[4]]]]) should return [1, 3, 4]. - testString: assert.deepEqual(steamrollArray([1, [], [3, [[4]]]]), [1, 3, 4]); - - text: steamrollArray([1, {}, [3, [[4]]]]) should return [1, {}, 3, 4]. - testString: assert.deepEqual(steamrollArray([1, {}, [3, [[4]]]]), [1, {}, 3, 4]); - - text: Your solution should not use the Array.prototype.flat() or Array.prototype.flatMap() methods. - testString: assert(!code.match(/\.\s*flat\s*\(/) && !code.match(/\.\s*flatMap\s*\(/)); +```js +assert.deepEqual(steamrollArray([[['a']], [['b']]]), ['a', 'b']); ``` -
    +`steamrollArray([1, [2], [3, [[4]]]])` should return `[1, 2, 3, 4]`. -## Challenge Seed +```js +assert.deepEqual(steamrollArray([1, [2], [3, [[4]]]]), [1, 2, 3, 4]); +``` -
    +`steamrollArray([1, [], [3, [[4]]]])` should return `[1, 3, 4]`. -
    +```js +assert.deepEqual(steamrollArray([1, [], [3, [[4]]]]), [1, 3, 4]); +``` + +`steamrollArray([1, {}, [3, [[4]]]])` should return `[1, {}, 3, 4]`. + +```js +assert.deepEqual(steamrollArray([1, {}, [3, [[4]]]]), [1, {}, 3, 4]); +``` + +Your solution should not use the `Array.prototype.flat()` or `Array.prototype.flatMap()` methods. + +```js +assert(!code.match(/\.\s*flat\s*\(/) && !code.match(/\.\s*flatMap\s*\(/)); +``` + +# --seed-- + +## --seed-contents-- ```js function steamrollArray(arr) { @@ -51,13 +53,7 @@ function steamrollArray(arr) { steamrollArray([1, [2], [3, [[4]]]]); ``` -
    - -
    - -## Solution - -
    +# --solutions-- ```js function steamrollArray(arr) { @@ -73,5 +69,3 @@ function steamrollArray(arr) { return out; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-numbers-in-a-range.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-numbers-in-a-range.md index db8634f1da..99c06f0bd5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-numbers-in-a-range.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-numbers-in-a-range.md @@ -5,44 +5,47 @@ challengeType: 5 forumTopicId: 16083 --- -## Description -
    +# --description-- + We'll pass you an array of two numbers. Return the sum of those two numbers plus the sum of all the numbers between them. The lowest number will not always come first. -For example, sumAll([4,1]) should return 10 because sum of all the numbers between 1 and 4 (both inclusive) is 10. +For example, `sumAll([4,1])` should return `10` because sum of all the numbers between 1 and 4 (both inclusive) is `10`. +# --hints-- -
    - -## Instructions -
    - -
    - -## Tests -
    - -```yml -tests: - - text: sumAll([1, 4]) should return a number. - testString: assert(typeof sumAll([1, 4]) === 'number'); - - text: sumAll([1, 4]) should return 10. - testString: assert.deepEqual(sumAll([1, 4]), 10); - - text: sumAll([4, 1]) should return 10. - testString: assert.deepEqual(sumAll([4, 1]), 10); - - text: sumAll([5, 10]) should return 45. - testString: assert.deepEqual(sumAll([5, 10]), 45); - - text: sumAll([10, 5]) should return 45. - testString: assert.deepEqual(sumAll([10, 5]), 45); +`sumAll([1, 4])` should return a number. +```js +assert(typeof sumAll([1, 4]) === 'number'); ``` -
    +`sumAll([1, 4])` should return 10. -## Challenge Seed -
    +```js +assert.deepEqual(sumAll([1, 4]), 10); +``` -
    +`sumAll([4, 1])` should return 10. + +```js +assert.deepEqual(sumAll([4, 1]), 10); +``` + +`sumAll([5, 10])` should return 45. + +```js +assert.deepEqual(sumAll([5, 10]), 45); +``` + +`sumAll([10, 5])` should return 45. + +```js +assert.deepEqual(sumAll([10, 5]), 45); +``` + +# --seed-- + +## --seed-contents-- ```js function sumAll(arr) { @@ -52,15 +55,7 @@ function sumAll(arr) { sumAll([1, 4]); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function sumAll(arr) { @@ -72,5 +67,3 @@ function sumAll(arr) { return sum; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md index c5331b3593..8430774ae4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md @@ -5,44 +5,55 @@ challengeType: 5 forumTopicId: 16084 --- -## Description -
    -Given a positive integer num, return the sum of all odd Fibonacci numbers that are less than or equal to num. +# --description-- + +Given a positive integer `num`, return the sum of all odd Fibonacci numbers that are less than or equal to `num`. + The first two numbers in the Fibonacci sequence are 1 and 1. Every additional number in the sequence is the sum of the two previous numbers. The first six numbers of the Fibonacci sequence are 1, 1, 2, 3, 5 and 8. -For example, sumFibs(10) should return 10 because all odd Fibonacci numbers less than or equal to 10 are 1, 1, 3, and 5. -
    -## Instructions -
    +For example, `sumFibs(10)` should return `10` because all odd Fibonacci numbers less than or equal to `10` are 1, 1, 3, and 5. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: sumFibs(1) should return a number. - testString: assert(typeof sumFibs(1) === "number"); - - text: sumFibs(1000) should return 1785. - testString: assert(sumFibs(1000) === 1785); - - text: sumFibs(4000000) should return 4613732. - testString: assert(sumFibs(4000000) === 4613732); - - text: sumFibs(4) should return 5. - testString: assert(sumFibs(4) === 5); - - text: sumFibs(75024) should return 60696. - testString: assert(sumFibs(75024) === 60696); - - text: sumFibs(75025) should return 135721. - testString: assert(sumFibs(75025) === 135721); +`sumFibs(1)` should return a number. +```js +assert(typeof sumFibs(1) === 'number'); ``` -
    +`sumFibs(1000)` should return 1785. -## Challenge Seed -
    +```js +assert(sumFibs(1000) === 1785); +``` -
    +`sumFibs(4000000)` should return 4613732. + +```js +assert(sumFibs(4000000) === 4613732); +``` + +`sumFibs(4)` should return 5. + +```js +assert(sumFibs(4) === 5); +``` + +`sumFibs(75024)` should return 60696. + +```js +assert(sumFibs(75024) === 60696); +``` + +`sumFibs(75025)` should return 135721. + +```js +assert(sumFibs(75025) === 135721); +``` + +# --seed-- + +## --seed-contents-- ```js function sumFibs(num) { @@ -52,15 +63,7 @@ function sumFibs(num) { sumFibs(4); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function sumFibs(num) { @@ -76,5 +79,3 @@ function sumFibs(num) { return s; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md index dc7ee9c9a6..df47b2c140 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md @@ -5,43 +5,35 @@ challengeType: 5 forumTopicId: 16085 --- -## Description -
    +# --description-- -A prime number is a whole number greater than 1 with exactly two divisors: 1 and -itself. For example, 2 is a prime number because it is only divisible by 1 and 2. In -contrast, 4 is not prime since it is divisible by 1, 2 and 4. +A prime number is a whole number greater than 1 with exactly two divisors: 1 and itself. For example, 2 is a prime number because it is only divisible by 1 and 2. In contrast, 4 is not prime since it is divisible by 1, 2 and 4. -Rewrite `sumPrimes` so it returns the sum of all prime numbers that are less than or -equal to num. +Rewrite `sumPrimes` so it returns the sum of all prime numbers that are less than or equal to num. -
    +# --hints-- -## Instructions -
    - -
    - -## Tests -
    - -```yml -tests: - - text: sumPrimes(10) should return a number. - testString: assert.deepEqual(typeof sumPrimes(10), 'number'); - - text: sumPrimes(10) should return 17. - testString: assert.deepEqual(sumPrimes(10), 17); - - text: sumPrimes(977) should return 73156. - testString: assert.deepEqual(sumPrimes(977), 73156); +`sumPrimes(10)` should return a number. +```js +assert.deepEqual(typeof sumPrimes(10), 'number'); ``` -
    +`sumPrimes(10)` should return 17. -## Challenge Seed -
    +```js +assert.deepEqual(sumPrimes(10), 17); +``` -
    +`sumPrimes(977)` should return 73156. + +```js +assert.deepEqual(sumPrimes(977), 73156); +``` + +# --seed-- + +## --seed-contents-- ```js function sumPrimes(num) { @@ -51,15 +43,7 @@ function sumPrimes(num) { sumPrimes(10); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function eratosthenesArray(n) { @@ -88,5 +72,3 @@ function sumPrimes(num) { sumPrimes(10); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md index 9ad14eb338..cdd8737edf 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md @@ -5,43 +5,100 @@ challengeType: 5 forumTopicId: 16092 --- -## Description -
    +# --description-- + Make a function that looks through an array of objects (first argument) and returns an array of all objects that have matching name and value pairs (second argument). Each name and value pair of the source object has to be present in the object from the collection if it is to be included in the returned array. -For example, if the first argument is [{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], and the second argument is { last: "Capulet" }, then you must return the third object from the array (the first argument), because it contains the name and its value, that was passed on as the second argument. -
    -## Instructions -
    +For example, if the first argument is `[{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]`, and the second argument is `{ last: "Capulet" }`, then you must return the third object from the array (the first argument), because it contains the name and its value, that was passed on as the second argument. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: 'whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" }) should return [{ first: "Tybalt", last: "Capulet" }].' - testString: 'assert.deepEqual(whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" }), [{ first: "Tybalt", last: "Capulet" }]);' - - text: 'whatIsInAName([{ "apple": 1 }, { "apple": 1 }, { "apple": 1, "bat": 2 }], { "apple": 1 }) should return [{ "apple": 1 }, { "apple": 1 }, { "apple": 1, "bat": 2 }].' - testString: 'assert.deepEqual(whatIsInAName([{ "apple": 1 }, { "apple": 1 }, { "apple": 1, "bat": 2 }], { "apple": 1 }), [{ "apple": 1 }, { "apple": 1 }, { "apple": 1, "bat": 2 }]);' - - text: 'whatIsInAName([{ "apple": 1, "bat": 2 }, { "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "bat": 2 }) should return [{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }].' - testString: 'assert.deepEqual(whatIsInAName([{ "apple": 1, "bat": 2 }, { "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "bat": 2 }), [{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }]);' - - text: 'whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "cookie": 2 }) should return [{ "apple": 1, "bat": 2, "cookie": 2 }].' - testString: 'assert.deepEqual(whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "cookie": 2 }), [{ "apple": 1, "bat": 2, "cookie": 2 }]);' - - text: 'whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }, { "bat":2 }], { "apple": 1, "bat": 2 }) should return [{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie":2 }].' - testString: 'assert.deepEqual(whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }, {"bat":2}], { "apple": 1, "bat": 2 }), [{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie":2 }]);' - - text: 'whatIsInAName([{"a": 1, "b": 2, "c": 3}], {"a": 1, "b": 9999, "c": 3}) should return []' - testString: 'assert.deepEqual(whatIsInAName([{ "a": 1, "b": 2, "c": 3 }], { "a": 1, "b": 9999, "c": 3 }), []);' +`whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" })` should return `[{ first: "Tybalt", last: "Capulet" }]`. +```js +assert.deepEqual( + whatIsInAName( + [ + { first: 'Romeo', last: 'Montague' }, + { first: 'Mercutio', last: null }, + { first: 'Tybalt', last: 'Capulet' } + ], + { last: 'Capulet' } + ), + [{ first: 'Tybalt', last: 'Capulet' }] +); ``` -
    +`whatIsInAName([{ "apple": 1 }, { "apple": 1 }, { "apple": 1, "bat": 2 }], { "apple": 1 })` should return `[{ "apple": 1 }, { "apple": 1 }, { "apple": 1, "bat": 2 }]`. -## Challenge Seed -
    +```js +assert.deepEqual( + whatIsInAName([{ apple: 1 }, { apple: 1 }, { apple: 1, bat: 2 }], { + apple: 1 + }), + [{ apple: 1 }, { apple: 1 }, { apple: 1, bat: 2 }] +); +``` -
    +`whatIsInAName([{ "apple": 1, "bat": 2 }, { "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "bat": 2 })` should return `[{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }]`. + +```js +assert.deepEqual( + whatIsInAName( + [{ apple: 1, bat: 2 }, { bat: 2 }, { apple: 1, bat: 2, cookie: 2 }], + { apple: 1, bat: 2 } + ), + [ + { apple: 1, bat: 2 }, + { apple: 1, bat: 2, cookie: 2 } + ] +); +``` + +`whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "cookie": 2 })` should return `[{ "apple": 1, "bat": 2, "cookie": 2 }]`. + +```js +assert.deepEqual( + whatIsInAName( + [{ apple: 1, bat: 2 }, { apple: 1 }, { apple: 1, bat: 2, cookie: 2 }], + { apple: 1, cookie: 2 } + ), + [{ apple: 1, bat: 2, cookie: 2 }] +); +``` + +`whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }, { "bat":2 }], { "apple": 1, "bat": 2 })` should return `[{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie":2 }]`. + +```js +assert.deepEqual( + whatIsInAName( + [ + { apple: 1, bat: 2 }, + { apple: 1 }, + { apple: 1, bat: 2, cookie: 2 }, + { bat: 2 } + ], + { apple: 1, bat: 2 } + ), + [ + { apple: 1, bat: 2 }, + { apple: 1, bat: 2, cookie: 2 } + ] +); +``` + +`whatIsInAName([{"a": 1, "b": 2, "c": 3}], {"a": 1, "b": 9999, "c": 3})` should return `[]` + +```js +assert.deepEqual( + whatIsInAName([{ a: 1, b: 2, c: 3 }], { a: 1, b: 9999, c: 3 }), + [] +); +``` + +# --seed-- + +## --seed-contents-- ```js function whatIsInAName(collection, source) { @@ -56,15 +113,7 @@ function whatIsInAName(collection, source) { whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" }); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function whatIsInAName(collection, source) { @@ -78,5 +127,3 @@ function whatIsInAName(collection, source) { return arr; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-001.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-001.md index af5432e635..2414841ab5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-001.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-001.md @@ -4,54 +4,25 @@ title: Part 1 challengeType: 0 --- -## Description -
    +# --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-- -
    - - -## Instructions -
    -
    - - -## Tests -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); +See description above for instructions. +```js +assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); ``` -
    +# --seed-- - -## Challenge Seed -
    - -
    - -```html - -``` - -
    - - -### Before Test -
    +## --before-user-code-- ```html @@ -102,29 +73,25 @@ tests:
    ``` - - - -### After Test -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -## Solution -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-002.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-002.md index 5d0f71d413..11d4b3821d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-002.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-002.md @@ -4,9 +4,7 @@ title: Part 2 challengeType: 0 --- -## Description - -
    +# --description-- In our HTML document, we have a form element with an `id` attribute: `
    ` @@ -14,42 +12,21 @@ To reference and access this particular form in JavaScript, we can use the getEl 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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -109,24 +86,22 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-003.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-003.md index f6d6128010..6dbd4e3731 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-003.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-003.md @@ -4,9 +4,7 @@ title: Part 3 challengeType: 0 --- -## Description - -
    +# --description-- Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button. @@ -18,42 +16,23 @@ Assign a function named `calculate` to the `onsubmit` event of your form. You will create the `calculate` function later. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/ + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -113,29 +92,25 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-004.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-004.md index a29b678ec1..f92bdc5f2c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-004.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-004.md @@ -4,53 +4,25 @@ title: Part 4 challengeType: 0 --- -## Description +# --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`: +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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( typeof calculate === "function" ); +```js +assert(typeof calculate === 'function'); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -110,24 +82,22 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-005.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-005.md index 81b8062486..a1cccd3b63 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-005.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-005.md @@ -4,13 +4,9 @@ title: Part 5 challengeType: 0 --- -## Description +# --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. +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: @@ -18,44 +14,17 @@ Here is an example of an empty function called `square` that takes a `number` as function square(number) {} ``` -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); +```js +assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -115,24 +84,24 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-006.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-006.md index d41de4a78e..3062fd3166 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-006.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-006.md @@ -4,52 +4,23 @@ title: Part 6 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); +```js +assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -109,24 +80,24 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-007.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-007.md index c788240b5b..3f80f08256 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-007.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-007.md @@ -4,9 +4,7 @@ title: Part 7 challengeType: 0 --- -## Description - -
    +# --description-- If you inspect the inputs in the form, you will notice that they have the class name `cal-control`. @@ -14,46 +12,21 @@ To access elements with a certain class name, we use the `getElementsByClassName 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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -113,24 +86,26 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-008.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-008.md index c5095b8569..7d557db45f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-008.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-008.md @@ -4,53 +4,25 @@ title: Part 8 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test(code)); +```js +assert( + /const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -110,24 +82,27 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-009.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-009.md index aa9916b0d0..88774dafa2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-009.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-009.md @@ -4,54 +4,27 @@ title: Part 9 challengeType: 0 --- -## Description +# --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. -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. -## Instructions - -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/ + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -111,24 +84,27 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-010.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-010.md index 424bd2977d..066b97fa37 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-010.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-010.md @@ -4,53 +4,21 @@ title: Part 10 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); +```js +assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -110,24 +78,27 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-011.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-011.md index 54d4ca591a..32f3fc7abe 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-011.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-011.md @@ -4,54 +4,21 @@ title: Part 11 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    +```js -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: '' ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -111,24 +78,14 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    - -
    - -## Solution - -
    +## --seed-contents-- ```html ``` -
    +# --solutions-- + +```html + +``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-012.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-012.md index 4578ef13e0..3fe4fe8bc5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-012.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-012.md @@ -4,59 +4,32 @@ title: Part 12 challengeType: 0 --- -## Description - -
    +# --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()` +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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.toString().replace(/\s/g, '').match(/Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/) ); +```js +assert( + code + .toString() + .replace(/\s/g, '') + .match( + /Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/ + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -116,24 +89,28 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-013.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-013.md index 85e59cb6b2..d6327b0166 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-013.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-013.md @@ -4,9 +4,7 @@ title: Part 13 challengeType: 0 --- -## Description - -
    +# --description-- Now we need to provide a function to `map()` that will be performed on each item of the array. @@ -18,49 +16,17 @@ function(meal){} Enter in the above function as an argument in between the parentheses of the `.map()` function. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/) ); +```js +assert(code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -120,24 +86,29 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-014.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-014.md index 44baaf8046..af085dffa5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-014.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-014.md @@ -4,57 +4,25 @@ title: Part 14 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) ); +```js +assert( + code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -114,24 +82,29 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-015.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-015.md index a7f6f8523f..ae3c2148c8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-015.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-015.md @@ -4,57 +4,21 @@ title: Part 15 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/) ); +```js +assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -114,24 +78,31 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-016.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-016.md index 37264d19a5..72cd7e0aa6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-016.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-016.md @@ -4,57 +4,21 @@ title: Part 16 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/) ); +```js +assert(code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -114,24 +78,31 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-017.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-017.md index 292942fa1b..d54908b092 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-017.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-017.md @@ -4,58 +4,23 @@ title: Part 17 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/) ); +```js +assert(code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -115,24 +80,30 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-018.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-018.md index 977594513f..c7f726acc5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-018.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-018.md @@ -4,9 +4,7 @@ title: Part 18 challengeType: 0 --- -## Description - -
    +# --description-- The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value: @@ -18,50 +16,21 @@ or using arrow functions: Insert the above callback function as an argument in the `.reduce()` method. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -121,24 +90,30 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-019.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-019.md index d0141b6453..0d08bb5549 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-019.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-019.md @@ -4,9 +4,7 @@ title: Part 19 challengeType: 0 --- -## Description - -
    +# --description-- Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument. @@ -18,52 +16,23 @@ arr.reduce((accumulator, currentValue) => { }, {}); ``` -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/ + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -123,24 +92,32 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-020.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-020.md index ed4d4590d0..11e6ff3946 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-020.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-020.md @@ -4,9 +4,7 @@ title: Part 20 challengeType: 0 --- -## Description - -
    +# --description-- Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers. @@ -18,8 +16,7 @@ arr.reduce((accumulator, currentValue) => { }, 0); ``` -At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`, -since `arr[0] = 1 = currentValue`. +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`, @@ -27,52 +24,23 @@ Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is ` In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/ + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -132,24 +100,32 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-021.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-021.md index f8cf697c6f..4a73d2069a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-021.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-021.md @@ -4,9 +4,7 @@ title: Part 21 challengeType: 0 --- -## Description - -
    +# --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 })` @@ -14,55 +12,17 @@ You can also check your progress by adding `console.log({ total })` at the end o 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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/console.log\({accumulator}\)/) ); +```js +assert(code.replace(/\s/g, '').match(/console.log\({accumulator}\)/)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -122,24 +82,35 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-022.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-022.md index a953c1a16f..cc617aa9da 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-022.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-022.md @@ -4,9 +4,7 @@ title: Part 22 challengeType: 0 --- -## Description - -
    +# --description-- Now let's simplify the `reduce()` callback function by refactoring it. @@ -16,56 +14,23 @@ So the function can be simplified to just `(accumulator, currentValue) => accumu Replace the current callback function argument in the `reduce()` function with the simplified callback function from above. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/ + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -125,24 +90,36 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-023.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-023.md index d03b04977e..5a2be476bd 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-023.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-023.md @@ -4,9 +4,7 @@ title: Part 23 challengeType: 0 --- -## Description - -
    +# --description-- Now that we have the `total` number of calories that the user entered, we need to determine the maximum calories they should consume. @@ -16,51 +14,21 @@ If you inspect the Female radio button you will notice its id: ` +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -120,24 +88,30 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-024.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-024.md index 872d81f802..4e6645f405 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-024.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-024.md @@ -4,60 +4,27 @@ title: Part 24 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test(code)); +```js +assert( + /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -117,24 +84,32 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-025.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-025.md index 9d23e88a6f..c54a7273bc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-025.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-025.md @@ -4,9 +4,7 @@ title: Part 25 challengeType: 0 --- -## Description - -
    +# --description-- Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. @@ -22,52 +20,21 @@ if (5 - 3 === 4) { `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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test(code)); +```js +assert( + /const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -127,24 +94,32 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-026.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-026.md index da5b5bfee4..5d7e6a3869 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-026.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-026.md @@ -4,60 +4,23 @@ title: Part 26 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); +```js +assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -117,24 +80,32 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-027.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-027.md index f86a4ee9ca..d046ae4706 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-027.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-027.md @@ -4,9 +4,7 @@ title: Part 27 challengeType: 0 --- -## Description - -
    +# --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. @@ -16,54 +14,21 @@ If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus Use the same ternary syntax that you used to determine `maxCalories`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test(code)); +```js +assert( + /const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -123,24 +88,34 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-028.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-028.md index 3c081334b9..1499590fb0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-028.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-028.md @@ -4,9 +4,7 @@ title: Part 28 challengeType: 0 --- -## Description - -
    +# --description-- If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
    `. @@ -14,56 +12,21 @@ We will be inserting output inside this `div`, telling the user if they are in a Create a variable named `output` and set it equal to this division element with the `id` of `output`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test(code)) +```js +assert( + /const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -123,24 +86,36 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-029.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-029.md index 65b9040a25..925d5d3948 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-029.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-029.md @@ -4,9 +4,7 @@ title: Part 29 challengeType: 0 --- -## Description - -
    +# --description-- Now it's time to create the HTML elements that we will add inside of `output`. @@ -18,58 +16,21 @@ const myHeading1 = document.createElement('h1') Create an `h3` element and assign it to a variable named `result`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test(code)); +```js +assert( + /const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -129,24 +90,38 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-030.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-030.md index 61f73c16f3..7d53ee7fae 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-030.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-030.md @@ -4,9 +4,7 @@ title: Part 30 challengeType: 0 --- -## Description - -
    +# --description-- Next, we will create a text node that we will later append to the `result` element. @@ -18,60 +16,21 @@ 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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code)); +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -131,24 +90,40 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-031.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-031.md index 6067b117e2..9e9bbbb56d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-031.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-031.md @@ -4,9 +4,7 @@ title: Part 31 challengeType: 0 --- -## Description - -
    +# --description-- We can now use the `difference` variable that we created above. @@ -14,61 +12,21 @@ 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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test(code)); +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -128,24 +86,41 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-032.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-032.md index 1b25d52d32..cf158f02e3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-032.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-032.md @@ -4,9 +4,7 @@ title: Part 32 challengeType: 0 --- -## Description - -
    +# --description-- Notice how if `total` is less than `maxCalories`, `difference` is a negative number. @@ -14,61 +12,21 @@ We want to show the absolute value of the difference so it displays "300" rather Wrap the `difference` in a `Math.abs()` function. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test(code)); +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -128,24 +86,41 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-033.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-033.md index 2eb541ba48..dc6c7f6dbe 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-033.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-033.md @@ -4,67 +4,25 @@ title: Part 33 challengeType: 0 --- -## Description - -
    +# --description-- Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test(code)); +```js +assert( + /const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -124,24 +82,41 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-034.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-034.md index 7de153743d..f0acc499c0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-034.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-034.md @@ -4,71 +4,27 @@ title: Part 34 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: 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)); +```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-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -128,24 +84,43 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-035.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-035.md index 77f936cfdb..94500b196a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-035.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-035.md @@ -4,9 +4,7 @@ title: Part 35 challengeType: 0 --- -## Description - -
    +# --description-- The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. @@ -18,63 +16,23 @@ For example, ``console.log(`Hello ${firstName}, today is ${Date.now()}`)`` is th Convert the data inside of `createTextNode()` to be a template literal. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/ + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -134,24 +92,43 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-036.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-036.md index b703847d2a..02a5468071 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-036.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-036.md @@ -4,9 +4,7 @@ title: Part 36 challengeType: 0 --- -## Description - -
    +# --description-- Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: @@ -14,63 +12,17 @@ Now you can append the `resultText` to the `result` with the `appendChild()` met result.appendChild(resultText); ``` -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/) ); +```js +assert(code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -130,24 +82,43 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-037.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-037.md index 2274be18a8..863fb7ab10 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-037.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-037.md @@ -4,73 +4,23 @@ title: Part 37 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(result\)/) ); +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(result\)/)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -130,24 +80,45 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-038.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-038.md index 647befbd79..3636d55170 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-038.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-038.md @@ -4,74 +4,25 @@ title: Part 38 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code)) +```js +assert( + /const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -131,24 +82,46 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-039.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-039.md index f5bb73b860..56336ada43 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-039.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-039.md @@ -4,74 +4,21 @@ title: Part 39 challengeType: 0 --- -## Description - -
    +# --description-- Add the `line` to the `output` element using the `appendChild()` method. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(line\)/) ); +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(line\)/)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -131,24 +78,48 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-040.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-040.md index 9cdbd4a79c..f99b199b55 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-040.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-040.md @@ -4,77 +4,27 @@ title: Part 40 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code)); +```js +assert( + /const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -134,24 +84,49 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-041.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-041.md index e06e1ba155..f663703c7d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-041.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-041.md @@ -4,79 +4,27 @@ title: Part 41 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code)); +```js +assert( + /const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -136,24 +84,51 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-042.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-042.md index e2ea9b4940..afd1069447 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-042.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-042.md @@ -4,9 +4,7 @@ title: Part 42 challengeType: 0 --- -## Description - -
    +# --description-- We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. @@ -14,72 +12,21 @@ Update text of `recommendedText` to use the `maxCalories` variable in a template This is similar to template literal syntax previously used to create `resultText`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) ); +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -139,24 +86,52 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-043.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-043.md index 76612ee5a7..9a61fc1f7c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-043.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-043.md @@ -4,82 +4,25 @@ title: Part 43 challengeType: 0 --- -## Description - -
    +# --description-- Append the `recommendedText` node to the `recommended` element. This is similar to how the `resultText` is appended to `result` previously. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) ); +```js +assert( + code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -139,24 +82,54 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-044.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-044.md index 5e754aacd5..c11ee6121e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-044.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-044.md @@ -4,82 +4,21 @@ title: Part 44 challengeType: 0 --- -## Description - -
    +# --description-- Append the `recommended` element to `output`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/) ); +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -139,24 +78,56 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-045.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-045.md index f3b1c451cf..1bea90651f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-045.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-045.md @@ -4,85 +4,27 @@ title: Part 45 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code)); +```js +assert( + /const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -142,24 +84,57 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-046.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-046.md index 0c09060b4f..f7c68389c8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-046.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-046.md @@ -4,93 +4,33 @@ title: Part 46 challengeType: 0 --- -## Description - -
    +# --description-- Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. For example: -```js +```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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) ); +```js +assert( + code + .replace(/\s/g, '') + .match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -150,24 +90,59 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-047.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-047.md index 79528553aa..eb43365af8 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-047.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-047.md @@ -4,86 +4,21 @@ title: Part 47 challengeType: 0 --- -## Description - -
    +# --description-- Append the `consumed` element to `output`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/) ); +```js +assert(code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/)); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -143,24 +78,60 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-048.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-048.md index cc53a2b393..797c734e3d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-048.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-048.md @@ -4,9 +4,7 @@ title: Part 48 challengeType: 0 --- -## Description - -
    +# --description-- Now it's time to add some styling which can be added directly as attributes or classes. @@ -16,82 +14,19 @@ On line **20**, right after creating the `result` element, set the `className` p 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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) ); +```js +assert( + code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -151,24 +86,62 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-049.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-049.md index 379f2bf29b..915805fd3f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-049.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-049.md @@ -4,9 +4,7 @@ title: Part 49 challengeType: 0 --- -## Description - -
    +# --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. @@ -14,84 +12,23 @@ For example, if you want to set the `width` of an `input` element to 100px, you Set the `class` attribute of the `output` element equal to a class named `bordered-class`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/ + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -151,24 +88,64 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-050.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-050.md index e54fedd9c5..ea7243d970 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-050.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-050.md @@ -4,9 +4,7 @@ title: Part 50 challengeType: 0 --- -## Description - -
    +# --description-- Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. @@ -14,84 +12,21 @@ Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. The `calculate()` function is now finished! -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) ); +```js +assert( + code + .replace(/\s/g, '') + .match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -151,24 +86,64 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-051.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-051.md index a29bac12ee..0a45698b89 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-051.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-051.md @@ -4,13 +4,11 @@ title: Part 51 challengeType: 0 --- -## Description - -
    +# --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`: +In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: ```html
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]add[\'\"\`]\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.getElementById\([\'\"\`]add[\'\"\`]\)/) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -156,24 +90,65 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-052.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-052.md index 8d3d1924a8..cc140667ed 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-052.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-052.md @@ -4,99 +4,33 @@ title: Part 52 challengeType: 0 --- -## Description - -
    +# --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: +Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: ```js function() {} ``` -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/ + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -156,24 +90,67 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-053.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-053.md index 9bde52268a..92fd79b15c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-053.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-053.md @@ -4,95 +4,27 @@ title: Part 53 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code)); +```js +assert( + /const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -152,24 +84,67 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-054.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-054.md index bae5340522..d056d1818c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-054.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-054.md @@ -4,95 +4,25 @@ title: Part 54 challengeType: 0 --- -## Description - -
    +# --description-- Set the `placeholder` property of the `foodInput` equal to `'food name'`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) ); +```js +assert( + code + .replace(/\s/g, '') + .match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -152,24 +82,69 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-055.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-055.md index 616dd912fd..6e924917ee 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-055.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-055.md @@ -4,9 +4,7 @@ title: Part 55 challengeType: 0 --- -## Description - -
    +# --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. @@ -14,90 +12,21 @@ In addition to using the `setAttribute` method, we can also update the `classLis Add the class name `food-control` to the `foodInput` element. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -157,24 +86,70 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-056.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-056.md index fe6d8a11bd..ce2bd92671 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-056.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-056.md @@ -4,9 +4,7 @@ title: Part 56 challengeType: 0 --- -## Description - -
    +# --description-- Notice that parent container of all of the inputs has an `id` of `entries`: `
    `. @@ -14,91 +12,23 @@ Get a reference to the document element with the `id` attribute `entries` and ap This is similar to the other `appendChild()` methods that you have used previously. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/ + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -158,24 +88,71 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-057.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-057.md index aee2728a7d..f2e6178e26 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-057.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-057.md @@ -4,98 +4,25 @@ title: Part 57 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code)); +```js +assert( + /const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test( + code + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -155,24 +82,72 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-058.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-058.md index 61076ddaf1..8f072a9320 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-058.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-058.md @@ -4,102 +4,29 @@ title: Part 58 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/ + ) +); ``` -
    +# --seed-- -## Challenge Seed - -
    - -
    - -```html - -``` - -
    - -### Before Test - -
    +## --before-user-code-- ```html @@ -159,24 +86,74 @@ tests: ``` -
    - -### After Test - -
    +## --after-user-code-- ```html ``` -
    +## --seed-contents-- -
    +```html + +``` + +# --solutions-- ```html ``` - - diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-059.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-059.md index c28b2c60a7..dfbeea19dd 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-059.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-059.md @@ -4,38 +4,96 @@ title: Part 59 challengeType: 0 --- -## Description - -
    +# --description-- The `calorieInput` element should only accept numbers that are 0 or above. Set the `min` attribute of `calorieInput` to `0`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/ + ) +); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    + +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-060.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-060.md index 257511aa3d..5631d806c9 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-060.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-060.md @@ -4,38 +4,94 @@ title: Part 60 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) +); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-061.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-061.md index a611c59100..1bd432eb4b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-061.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-061.md @@ -4,38 +4,94 @@ title: Part 61 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) +); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-062.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-062.md index d47e090213..ca48501bb4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-062.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-062.md @@ -4,38 +4,96 @@ title: Part 62 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/ + ) +); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-063.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-063.md index 9c635fc0f2..8be5766827 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-063.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-063.md @@ -4,38 +4,96 @@ title: Part 63 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/ + ) +); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-064.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-064.md index 0a8d79aec9..0fb2117781 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-064.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-064.md @@ -4,36 +4,88 @@ title: Part 64 challengeType: 0 --- -## Description - -
    +# --description-- Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code) ) +```js +assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code)); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-065.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-065.md index 7e3ecfd664..836d82e4d9 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-065.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-065.md @@ -4,11 +4,9 @@ title: Part 65 challengeType: 0 --- -## Description +# --description-- -
    - -Create a variable named `clearOutput` and set it equal to a blank arrow function: +Create a variable named `clearOutput` and set it equal to a blank arrow function: ```js const clearOutput = () => {} @@ -16,30 +14,84 @@ const clearOutput = () => {} This is similar to `function clearOutput () {}`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( typeof clearOutput === "function" ); +```js +assert(typeof clearOutput === 'function'); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-066.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-066.md index f8dc8e3044..3eea48c306 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-066.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-066.md @@ -4,38 +4,96 @@ title: Part 66 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/ + ) +); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-067.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-067.md index 1eb479802f..4bdad3e5fb 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-067.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-067.md @@ -4,9 +4,7 @@ title: Part 67 challengeType: 0 --- -## Description - -
    +# --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. @@ -16,30 +14,90 @@ Remove the `bordered-class` class. For example: document.getElementById('my-div').classList.remove('my-class') ``` -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/ + ) +); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-068.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-068.md index 89b3d5455a..c7ce88c161 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-068.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-068.md @@ -4,38 +4,90 @@ title: Part 68 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( calculate.toString().match(/clearOutput\(\)/) ); +```js +assert(calculate.toString().match(/clearOutput\(\)/)); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-069.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-069.md index 6232d9d4df..be9e1c8570 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-069.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-069.md @@ -4,36 +4,88 @@ title: Part 69 challengeType: 0 --- -## Description - -
    +# --description-- Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( typeof clearForm === "function") +```js +assert(typeof clearForm === 'function'); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-070.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-070.md index f2fdb8e659..d0ebb3c8c4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-070.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-070.md @@ -4,9 +4,7 @@ title: Part 70 challengeType: 0 --- -## Description - -
    +# --description-- We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. @@ -14,30 +12,90 @@ Inside the function body of `clearForm`, create a variable named `foodInputs` an This is similar to how you declared the `total` variable previously in the `calculate` method. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/ + ) +); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-071.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-071.md index 65ae70766c..a00433ddbc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-071.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-071.md @@ -4,38 +4,90 @@ title: Part 71 challengeType: 0 --- -## Description - -
    +# --description-- To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. Add `foodInputs.forEach()`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/) ) +```js +assert(code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/)); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-072.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-072.md index 7265f4fd17..58b9d5ce5a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-072.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-072.md @@ -4,9 +4,7 @@ title: Part 72 challengeType: 0 --- -## Description - -
    +# --description-- We need to provide a callback function in the parentheses of `forEach()`. @@ -14,30 +12,86 @@ This function will take each input item, in our case we'll call it `input`, as a In between the parentheses of the `.forEach()` function, enter `input => input.remove()`. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) ) +```js +assert( + code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) +); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-073.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-073.md index 51a03757b2..76642df849 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-073.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-073.md @@ -4,9 +4,7 @@ title: Part 73 challengeType: 0 --- -## Description - -
    +# --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. @@ -14,30 +12,90 @@ Create a variable named `calInputs` and set it equal to an array of elements wit This is similar to how you declared the `foodInputs` variable previously. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match( + /const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/ + ) +); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-074.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-074.md index 04b39c730d..dd30a2a459 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-074.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-074.md @@ -4,36 +4,90 @@ title: Part 74 challengeType: 0 --- -## Description - -
    +# --description-- Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) ) +```js +assert( + code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) +); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-075.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-075.md index 9c956fd525..75557b52cc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-075.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-075.md @@ -4,38 +4,94 @@ title: Part 75 challengeType: 0 --- -## Description - -
    +# --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-- -## Instructions +See description above for instructions. -
    -
    - -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) ); +```js +assert( + code + .replace(/\s/g, '') + .match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) +); ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    - -```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    +# --solutions-- ```html ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-076.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-076.md index 6523a5d053..cba1efce9b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-076.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-076.md @@ -4,36 +4,88 @@ title: Part 76 challengeType: 0 --- -## Description - -
    +# --description-- Congratulations! Have fun playing with your completed calorie counter. -
    +# --hints-- -## Instructions +See description above for instructions. -
    -
    +```js -## Tests - -
    - -```yml -tests: - - text: See description above for instructions. - testString: '' ``` -
    +# --seed-- -## Challenge Seed +## --before-user-code-- -
    +```html + + + + + + + + + + +
    +
    +

    Calorie Counter

    +
    + Sex +
    + + -
    +
    + + +
    +
    +
    +
    + Breakfast +
    + Lunch +
    + Dinner +
    + + + + +
    +
    + + +``` + +## --after-user-code-- + +```html + + +``` + +## --seed-contents-- ```html ``` -
    - -### Before Test - -
    +# --solutions-- ```html - - - - - - - - - - -
    -
    -

    Calorie Counter

    -
    - Sex -
    - - - -
    - - -
    -
    -
    -
    - Breakfast -
    - Lunch -
    - Dinner -
    - - - -
    -
    -
    - - -``` - -
    - -### After Test - -
    - -```html - - -``` - -
    - -
    - -## Solution - -
    - -```html - - ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md index 76d2e67b5a..edcd648205 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md @@ -5,41 +5,48 @@ challengeType: 5 forumTopicId: 16003 --- -## Description -
    +# --description-- + One of the simplest and most widely known ciphers is a Caesar cipher, also known as a shift cipher. In a shift cipher the meanings of the letters are shifted by some set amount. -A common modern use is the ROT13 cipher, where the values of the letters are shifted by 13 places. Thus 'A' ↔ 'N', 'B' ↔ 'O' and so on. -Write a function which takes a ROT13 encoded string as input and returns a decoded string. + +A common modern use is the [ROT13](https://en.wikipedia.org/wiki/ROT13) cipher, where the values of the letters are shifted by 13 places. Thus 'A' ↔ 'N', 'B' ↔ 'O' and so on. + +Write a function which takes a [ROT13](https://en.wikipedia.org/wiki/ROT13) encoded string as input and returns a decoded string. + All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on. -
    -## Instructions -
    +# --hints-- -
    - -## Tests -
    - -```yml -tests: - - text: rot13("SERR PBQR PNZC") should decode to FREE CODE CAMP - testString: assert(rot13("SERR PBQR PNZC") === "FREE CODE CAMP"); - - text: rot13("SERR CVMMN!") should decode to FREE PIZZA! - testString: assert(rot13("SERR CVMMN!") === "FREE PIZZA!"); - - text: rot13("SERR YBIR?") should decode to FREE LOVE? - testString: assert(rot13("SERR YBIR?") === "FREE LOVE?"); - - text: rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.") should decode to THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG. - testString: assert(rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.") === "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG."); +`rot13("SERR PBQR PNZC")` should decode to `FREE CODE CAMP` +```js +assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP'); ``` -
    +`rot13("SERR CVMMN!")` should decode to `FREE PIZZA!` -## Challenge Seed -
    +```js +assert(rot13('SERR CVMMN!') === 'FREE PIZZA!'); +``` -
    +`rot13("SERR YBIR?")` should decode to `FREE LOVE?` + +```js +assert(rot13('SERR YBIR?') === 'FREE LOVE?'); +``` + +`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` should decode to `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.` + +```js +assert( + rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') === + 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.' +); +``` + +# --seed-- + +## --seed-contents-- ```js function rot13(str) { @@ -50,15 +57,7 @@ function rot13(str) { rot13("SERR PBQR PNZC"); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js var lookup = { @@ -87,5 +86,3 @@ function rot13(encodedStr) { return decodedArr.join(""); // Array to String } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md index 73a7494972..90ff0c80f6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md @@ -5,15 +5,21 @@ challengeType: 5 forumTopicId: 16012 --- -## Description -
    -Design a cash register drawer function checkCashRegister() that accepts purchase price as the first argument (price), payment as the second argument (cash), and cash-in-drawer (cid) as the third argument. -cid is a 2D array listing available currency. -The checkCashRegister() function should always return an object with a status key and a change key. -Return {status: "INSUFFICIENT_FUNDS", change: []} if cash-in-drawer is less than the change due, or if you cannot return the exact change. -Return {status: "CLOSED", change: [...]} with cash-in-drawer as the value for the key change if it is equal to the change due. -Otherwise, return {status: "OPEN", change: [...]}, with the change due in coins and bills, sorted in highest to lowest order, as the value of the change key. -
    Currency UnitAmount
    Penny$0.01 (PENNY)
    Nickel$0.05 (NICKEL)
    Dime$0.1 (DIME)
    Quarter$0.25 (QUARTER)
    Dollar$1 (ONE)
    Five Dollars$5 (FIVE)
    Ten Dollars$10 (TEN)
    Twenty Dollars$20 (TWENTY)
    One-hundred Dollars$100 (ONE HUNDRED)
    +# --description-- + +Design a cash register drawer function `checkCashRegister()` that accepts purchase price as the first argument (`price`), payment as the second argument (`cash`), and cash-in-drawer (`cid`) as the third argument. + +`cid` is a 2D array listing available currency. + +The `checkCashRegister()` function should always return an object with a `status` key and a `change` key. + +Return `{status: "INSUFFICIENT_FUNDS", change: []}` if cash-in-drawer is less than the change due, or if you cannot return the exact change. + +Return `{status: "CLOSED", change: [...]}` with cash-in-drawer as the value for the key `change` if it is equal to the change due. + +Otherwise, return `{status: "OPEN", change: [...]}`, with the change due in coins and bills, sorted in highest to lowest order, as the value of the `change` key. + +
    Currency UnitAmount
    Penny$0.01 (PENNY)
    Nickel$0.05 (NICKEL)
    Dime$0.1 (DIME)
    Quarter$0.25 (QUARTER)
    Dollar$1 (ONE)
    Five Dollars$5 (FIVE)
    Ten Dollars$10 (TEN)
    Twenty Dollars$20 (TWENTY)
    One-hundred Dollars$100 (ONE HUNDRED)
    See below for an example of a cash-in-drawer array: @@ -31,39 +37,151 @@ See below for an example of a cash-in-drawer array: ] ``` -
    +# --hints-- -## Instructions -
    - -
    - -## Tests -
    - -```yml -tests: - - text: checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]) should return an object. - testString: assert.deepEqual(Object.prototype.toString.call(checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])), '[object Object]'); - - text: 'checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]) should return {status: "OPEN", change: [["QUARTER", 0.5]]}.' - testString: 'assert.deepEqual(checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]), {status: "OPEN", change: [["QUARTER", 0.5]]});' - - text: 'checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]) should return {status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}.' - testString: 'assert.deepEqual(checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]), {status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]});' - - text: 'checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]) should return {status: "INSUFFICIENT_FUNDS", change: []}.' - testString: 'assert.deepEqual(checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]), {status: "INSUFFICIENT_FUNDS", change: []});' - - text: 'checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]) should return {status: "INSUFFICIENT_FUNDS", change: []}.' - testString: 'assert.deepEqual(checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]), {status: "INSUFFICIENT_FUNDS", change: []});' - - text: 'checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]) should return {status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}.' - testString: 'assert.deepEqual(checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]), {status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]});' +`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return an object. +```js +assert.deepEqual( + Object.prototype.toString.call( + checkCashRegister(19.5, 20, [ + ['PENNY', 1.01], + ['NICKEL', 2.05], + ['DIME', 3.1], + ['QUARTER', 4.25], + ['ONE', 90], + ['FIVE', 55], + ['TEN', 20], + ['TWENTY', 60], + ['ONE HUNDRED', 100] + ]) + ), + '[object Object]' +); ``` -
    +`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return `{status: "OPEN", change: [["QUARTER", 0.5]]}`. -## Challenge Seed -
    +```js +assert.deepEqual( + checkCashRegister(19.5, 20, [ + ['PENNY', 1.01], + ['NICKEL', 2.05], + ['DIME', 3.1], + ['QUARTER', 4.25], + ['ONE', 90], + ['FIVE', 55], + ['TEN', 20], + ['TWENTY', 60], + ['ONE HUNDRED', 100] + ]), + { status: 'OPEN', change: [['QUARTER', 0.5]] } +); +``` -
    +`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`. + +```js +assert.deepEqual( + checkCashRegister(3.26, 100, [ + ['PENNY', 1.01], + ['NICKEL', 2.05], + ['DIME', 3.1], + ['QUARTER', 4.25], + ['ONE', 90], + ['FIVE', 55], + ['TEN', 20], + ['TWENTY', 60], + ['ONE HUNDRED', 100] + ]), + { + status: 'OPEN', + change: [ + ['TWENTY', 60], + ['TEN', 20], + ['FIVE', 15], + ['ONE', 1], + ['QUARTER', 0.5], + ['DIME', 0.2], + ['PENNY', 0.04] + ] + } +); +``` + +`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "INSUFFICIENT_FUNDS", change: []}`. + +```js +assert.deepEqual( + checkCashRegister(19.5, 20, [ + ['PENNY', 0.01], + ['NICKEL', 0], + ['DIME', 0], + ['QUARTER', 0], + ['ONE', 0], + ['FIVE', 0], + ['TEN', 0], + ['TWENTY', 0], + ['ONE HUNDRED', 0] + ]), + { status: 'INSUFFICIENT_FUNDS', change: [] } +); +``` + +`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "INSUFFICIENT_FUNDS", change: []}`. + +```js +assert.deepEqual( + checkCashRegister(19.5, 20, [ + ['PENNY', 0.01], + ['NICKEL', 0], + ['DIME', 0], + ['QUARTER', 0], + ['ONE', 1], + ['FIVE', 0], + ['TEN', 0], + ['TWENTY', 0], + ['ONE HUNDRED', 0] + ]), + { status: 'INSUFFICIENT_FUNDS', change: [] } +); +``` + +`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`. + +```js +assert.deepEqual( + checkCashRegister(19.5, 20, [ + ['PENNY', 0.5], + ['NICKEL', 0], + ['DIME', 0], + ['QUARTER', 0], + ['ONE', 0], + ['FIVE', 0], + ['TEN', 0], + ['TWENTY', 0], + ['ONE HUNDRED', 0] + ]), + { + status: 'CLOSED', + change: [ + ['PENNY', 0.5], + ['NICKEL', 0], + ['DIME', 0], + ['QUARTER', 0], + ['ONE', 0], + ['FIVE', 0], + ['TEN', 0], + ['TWENTY', 0], + ['ONE HUNDRED', 0] + ] + } +); +``` + +# --seed-- + +## --seed-contents-- ```js function checkCashRegister(price, cash, cid) { @@ -74,27 +192,19 @@ function checkCashRegister(price, cash, cid) { checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js var denom = [ - { name: 'ONE HUNDRED', val: 100}, - { name: 'TWENTY', val: 20}, - { name: 'TEN', val: 10}, - { name: 'FIVE', val: 5}, - { name: 'ONE', val: 1}, - { name: 'QUARTER', val: 0.25}, - { name: 'DIME', val: 0.1}, - { name: 'NICKEL', val: 0.05}, - { name: 'PENNY', val: 0.01} + { name: 'ONE HUNDRED', val: 100}, + { name: 'TWENTY', val: 20}, + { name: 'TEN', val: 10}, + { name: 'FIVE', val: 5}, + { name: 'ONE', val: 1}, + { name: 'QUARTER', val: 0.25}, + { name: 'DIME', val: 0.1}, + { name: 'NICKEL', val: 0.05}, + { name: 'PENNY', val: 0.01} ]; function checkCashRegister(price, cash, cid) { @@ -136,5 +246,3 @@ function checkCashRegister(price, cash, cid) { return output; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md index ba7b6efaad..e162bd1898 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md @@ -5,60 +5,101 @@ challengeType: 5 forumTopicId: 16004 --- -## Description -
    -Return true if the given string is a palindrome. Otherwise, return false. +# --description-- + +Return `true` if the given string is a palindrome. Otherwise, return `false`. + A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing. -Note
    You'll need to remove all non-alphanumeric characters (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes. -We'll pass strings with varying formats, such as "racecar", "RaceCar", and "race CAR" among others. -We'll also pass strings with special symbols, such as "2A3*3a2", "2A3 3a2", and "2_A3*3#A2". -
    -## Instructions -
    +**Note:** You'll need to remove **all non-alphanumeric characters** (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes. -
    +We'll pass strings with varying formats, such as `"racecar"`, `"RaceCar"`, and `"race CAR"` among others. -## Tests -
    +We'll also pass strings with special symbols, such as `"2A3*3a2"`, `"2A3 3a2"`, and `"2_A3*3#A2"`. -```yml -tests: - - text: palindrome("eye") should return a boolean. - testString: assert(typeof palindrome("eye") === "boolean"); - - text: palindrome("eye") should return true. - testString: assert(palindrome("eye") === true); - - text: palindrome("_eye") should return true. - testString: assert(palindrome("_eye") === true); - - text: palindrome("race car") should return true. - testString: assert(palindrome("race car") === true); - - text: palindrome("not a palindrome") should return false. - testString: assert(palindrome("not a palindrome") === false); - - text: palindrome("A man, a plan, a canal. Panama") should return true. - testString: assert(palindrome("A man, a plan, a canal. Panama") === true); - - text: palindrome("never odd or even") should return true. - testString: assert(palindrome("never odd or even") === true); - - text: palindrome("nope") should return false. - testString: assert(palindrome("nope") === false); - - text: palindrome("almostomla") should return false. - testString: assert(palindrome("almostomla") === false); - - text: palindrome("My age is 0, 0 si ega ym.") should return true. - testString: assert(palindrome("My age is 0, 0 si ega ym.") === true); - - text: palindrome("1 eye for of 1 eye.") should return false. - testString: assert(palindrome("1 eye for of 1 eye.") === false); - - text: 'palindrome("0_0 (: /-\ :) 0-0") should return true.' - testString: 'assert(palindrome("0_0 (: /-\ :) 0-0") === true);' - - text: palindrome("five|\_/|four") should return false. - testString: assert(palindrome("five|\_/|four") === false); +# --hints-- +`palindrome("eye")` should return a boolean. + +```js +assert(typeof palindrome('eye') === 'boolean'); ``` -
    +`palindrome("eye")` should return true. -## Challenge Seed -
    +```js +assert(palindrome('eye') === true); +``` -
    +`palindrome("_eye")` should return true. + +```js +assert(palindrome('_eye') === true); +``` + +`palindrome("race car")` should return true. + +```js +assert(palindrome('race car') === true); +``` + +`palindrome("not a palindrome")` should return false. + +```js +assert(palindrome('not a palindrome') === false); +``` + +`palindrome("A man, a plan, a canal. Panama")` should return true. + +```js +assert(palindrome('A man, a plan, a canal. Panama') === true); +``` + +`palindrome("never odd or even")` should return true. + +```js +assert(palindrome('never odd or even') === true); +``` + +`palindrome("nope")` should return false. + +```js +assert(palindrome('nope') === false); +``` + +`palindrome("almostomla")` should return false. + +```js +assert(palindrome('almostomla') === false); +``` + +`palindrome("My age is 0, 0 si ega ym.")` should return true. + +```js +assert(palindrome('My age is 0, 0 si ega ym.') === true); +``` + +`palindrome("1 eye for of 1 eye.")` should return false. + +```js +assert(palindrome('1 eye for of 1 eye.') === false); +``` + +`palindrome("0_0 (: /-\ :) 0-0")` should return true. + +```js +assert(palindrome('0_0 (: /- :) 0-0') === true); +``` + +`palindrome("five|\_/|four")` should return false. + +```js +assert(palindrome('five|_/|four') === false); +``` + +# --seed-- + +## --seed-contents-- ```js function palindrome(str) { @@ -70,15 +111,7 @@ function palindrome(str) { palindrome("eye"); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function palindrome(str) { @@ -91,5 +124,3 @@ function palindrome(str) { return false; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md index a961d813ae..339b29b7a5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md @@ -5,83 +5,173 @@ challengeType: 5 forumTopicId: 16044 --- -## Description -
    +# --description-- + Convert the given number into a roman numeral. -All roman numerals answers should be provided in upper-case. -
    -## Instructions -
    +All [roman numerals](http://www.mathsisfun.com/roman-numerals.html) answers should be provided in upper-case. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: convertToRoman(2) should return "II". - testString: assert.deepEqual(convertToRoman(2), "II"); - - text: convertToRoman(3) should return "III". - testString: assert.deepEqual(convertToRoman(3), "III"); - - text: convertToRoman(4) should return "IV". - testString: assert.deepEqual(convertToRoman(4), "IV"); - - text: convertToRoman(5) should return "V". - testString: assert.deepEqual(convertToRoman(5), "V"); - - text: convertToRoman(9) should return "IX". - testString: assert.deepEqual(convertToRoman(9), "IX"); - - text: convertToRoman(12) should return "XII". - testString: assert.deepEqual(convertToRoman(12), "XII"); - - text: convertToRoman(16) should return "XVI". - testString: assert.deepEqual(convertToRoman(16), "XVI"); - - text: convertToRoman(29) should return "XXIX". - testString: assert.deepEqual(convertToRoman(29), "XXIX"); - - text: convertToRoman(44) should return "XLIV". - testString: assert.deepEqual(convertToRoman(44), "XLIV"); - - text: convertToRoman(45) should return "XLV" - testString: assert.deepEqual(convertToRoman(45), "XLV"); - - text: convertToRoman(68) should return "LXVIII" - testString: assert.deepEqual(convertToRoman(68), "LXVIII"); - - text: convertToRoman(83) should return "LXXXIII" - testString: assert.deepEqual(convertToRoman(83), "LXXXIII"); - - text: convertToRoman(97) should return "XCVII" - testString: assert.deepEqual(convertToRoman(97), "XCVII"); - - text: convertToRoman(99) should return "XCIX" - testString: assert.deepEqual(convertToRoman(99), "XCIX"); - - text: convertToRoman(400) should return "CD" - testString: assert.deepEqual(convertToRoman(400), "CD"); - - text: convertToRoman(500) should return "D" - testString: assert.deepEqual(convertToRoman(500), "D"); - - text: convertToRoman(501) should return "DI" - testString: assert.deepEqual(convertToRoman(501), "DI"); - - text: convertToRoman(649) should return "DCXLIX" - testString: assert.deepEqual(convertToRoman(649), "DCXLIX"); - - text: convertToRoman(798) should return "DCCXCVIII" - testString: assert.deepEqual(convertToRoman(798), "DCCXCVIII"); - - text: convertToRoman(891) should return "DCCCXCI" - testString: assert.deepEqual(convertToRoman(891), "DCCCXCI"); - - text: convertToRoman(1000) should return "M" - testString: assert.deepEqual(convertToRoman(1000), "M"); - - text: convertToRoman(1004) should return "MIV" - testString: assert.deepEqual(convertToRoman(1004), "MIV"); - - text: convertToRoman(1006) should return "MVI" - testString: assert.deepEqual(convertToRoman(1006), "MVI"); - - text: convertToRoman(1023) should return "MXXIII" - testString: assert.deepEqual(convertToRoman(1023), "MXXIII"); - - text: convertToRoman(2014) should return "MMXIV" - testString: assert.deepEqual(convertToRoman(2014), "MMXIV"); - - text: convertToRoman(3999) should return "MMMCMXCIX" - testString: assert.deepEqual(convertToRoman(3999), "MMMCMXCIX"); +`convertToRoman(2)` should return "II". +```js +assert.deepEqual(convertToRoman(2), 'II'); ``` -
    +`convertToRoman(3)` should return "III". -## Challenge Seed -
    +```js +assert.deepEqual(convertToRoman(3), 'III'); +``` -
    +`convertToRoman(4)` should return "IV". + +```js +assert.deepEqual(convertToRoman(4), 'IV'); +``` + +`convertToRoman(5)` should return "V". + +```js +assert.deepEqual(convertToRoman(5), 'V'); +``` + +`convertToRoman(9)` should return "IX". + +```js +assert.deepEqual(convertToRoman(9), 'IX'); +``` + +`convertToRoman(12)` should return "XII". + +```js +assert.deepEqual(convertToRoman(12), 'XII'); +``` + +`convertToRoman(16)` should return "XVI". + +```js +assert.deepEqual(convertToRoman(16), 'XVI'); +``` + +`convertToRoman(29)` should return "XXIX". + +```js +assert.deepEqual(convertToRoman(29), 'XXIX'); +``` + +`convertToRoman(44)` should return "XLIV". + +```js +assert.deepEqual(convertToRoman(44), 'XLIV'); +``` + +`convertToRoman(45)` should return "XLV" + +```js +assert.deepEqual(convertToRoman(45), 'XLV'); +``` + +`convertToRoman(68)` should return "LXVIII" + +```js +assert.deepEqual(convertToRoman(68), 'LXVIII'); +``` + +`convertToRoman(83)` should return "LXXXIII" + +```js +assert.deepEqual(convertToRoman(83), 'LXXXIII'); +``` + +`convertToRoman(97)` should return "XCVII" + +```js +assert.deepEqual(convertToRoman(97), 'XCVII'); +``` + +`convertToRoman(99)` should return "XCIX" + +```js +assert.deepEqual(convertToRoman(99), 'XCIX'); +``` + +`convertToRoman(400)` should return "CD" + +```js +assert.deepEqual(convertToRoman(400), 'CD'); +``` + +`convertToRoman(500)` should return "D" + +```js +assert.deepEqual(convertToRoman(500), 'D'); +``` + +`convertToRoman(501)` should return "DI" + +```js +assert.deepEqual(convertToRoman(501), 'DI'); +``` + +`convertToRoman(649)` should return "DCXLIX" + +```js +assert.deepEqual(convertToRoman(649), 'DCXLIX'); +``` + +`convertToRoman(798)` should return "DCCXCVIII" + +```js +assert.deepEqual(convertToRoman(798), 'DCCXCVIII'); +``` + +`convertToRoman(891)` should return "DCCCXCI" + +```js +assert.deepEqual(convertToRoman(891), 'DCCCXCI'); +``` + +`convertToRoman(1000)` should return "M" + +```js +assert.deepEqual(convertToRoman(1000), 'M'); +``` + +`convertToRoman(1004)` should return "MIV" + +```js +assert.deepEqual(convertToRoman(1004), 'MIV'); +``` + +`convertToRoman(1006)` should return "MVI" + +```js +assert.deepEqual(convertToRoman(1006), 'MVI'); +``` + +`convertToRoman(1023)` should return "MXXIII" + +```js +assert.deepEqual(convertToRoman(1023), 'MXXIII'); +``` + +`convertToRoman(2014)` should return "MMXIV" + +```js +assert.deepEqual(convertToRoman(2014), 'MMXIV'); +``` + +`convertToRoman(3999)` should return "MMMCMXCIX" + +```js +assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX'); +``` + +# --seed-- + +## --seed-contents-- ```js function convertToRoman(num) { @@ -91,15 +181,7 @@ function convertToRoman(num) { convertToRoman(36); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function convertToRoman(num) { @@ -114,5 +196,3 @@ function convertToRoman(num) { return res.join(''); } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md index 540e75a32f..9f1064f340 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md @@ -5,87 +5,183 @@ challengeType: 5 forumTopicId: 16090 --- -## Description -
    -Return true if the passed string looks like a valid US phone number. +# --description-- + +Return `true` if the passed string looks like a valid US phone number. + The user may fill out the form field any way they choose as long as it has the format of a valid US number. The following are examples of valid formats for US numbers (refer to the tests below for other variants): +
    555-555-5555
    (555)555-5555
    (555) 555-5555
    555 555 5555
    5555555555
    1 555 555 5555
    -For this challenge you will be presented with a string such as 800-692-7753 or 8oo-six427676;laskdjf. Your job is to validate or reject the US phone number based on any combination of the formats provided above. The area code is required. If the country code is provided, you must confirm that the country code is 1. Return true if the string is a valid US phone number; otherwise return false. -
    -## Instructions -
    +For this challenge you will be presented with a string such as `800-692-7753` or `8oo-six427676;laskdjf`. Your job is to validate or reject the US phone number based on any combination of the formats provided above. The area code is required. If the country code is provided, you must confirm that the country code is `1`. Return `true` if the string is a valid US phone number; otherwise return `false`. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: telephoneCheck("555-555-5555") should return a boolean. - testString: assert(typeof telephoneCheck("555-555-5555") === "boolean"); - - text: telephoneCheck("1 555-555-5555") should return true. - testString: assert(telephoneCheck("1 555-555-5555") === true); - - text: telephoneCheck("1 (555) 555-5555") should return true. - testString: assert(telephoneCheck("1 (555) 555-5555") === true); - - text: telephoneCheck("5555555555") should return true. - testString: assert(telephoneCheck("5555555555") === true); - - text: telephoneCheck("555-555-5555") should return true. - testString: assert(telephoneCheck("555-555-5555") === true); - - text: telephoneCheck("(555)555-5555") should return true. - testString: assert(telephoneCheck("(555)555-5555") === true); - - text: telephoneCheck("1(555)555-5555") should return true. - testString: assert(telephoneCheck("1(555)555-5555") === true); - - text: telephoneCheck("555-5555") should return false. - testString: assert(telephoneCheck("555-5555") === false); - - text: telephoneCheck("5555555") should return false. - testString: assert(telephoneCheck("5555555") === false); - - text: telephoneCheck("1 555)555-5555") should return false. - testString: assert(telephoneCheck("1 555)555-5555") === false); - - text: telephoneCheck("1 555 555 5555") should return true. - testString: assert(telephoneCheck("1 555 555 5555") === true); - - text: telephoneCheck("1 456 789 4444") should return true. - testString: assert(telephoneCheck("1 456 789 4444") === true); - - text: telephoneCheck("123**&!!asdf#") should return false. - testString: assert(telephoneCheck("123**&!!asdf#") === false); - - text: telephoneCheck("55555555") should return false. - testString: assert(telephoneCheck("55555555") === false); - - text: telephoneCheck("(6054756961)") should return false - testString: assert(telephoneCheck("(6054756961)") === false); - - text: telephoneCheck("2 (757) 622-7382") should return false. - testString: assert(telephoneCheck("2 (757) 622-7382") === false); - - text: telephoneCheck("0 (757) 622-7382") should return false. - testString: assert(telephoneCheck("0 (757) 622-7382") === false); - - text: telephoneCheck("-1 (757) 622-7382") should return false - testString: assert(telephoneCheck("-1 (757) 622-7382") === false); - - text: telephoneCheck("2 757 622-7382") should return false. - testString: assert(telephoneCheck("2 757 622-7382") === false); - - text: telephoneCheck("10 (757) 622-7382") should return false. - testString: assert(telephoneCheck("10 (757) 622-7382") === false); - - text: telephoneCheck("27576227382") should return false. - testString: assert(telephoneCheck("27576227382") === false); - - text: telephoneCheck("(275)76227382") should return false. - testString: assert(telephoneCheck("(275)76227382") === false); - - text: telephoneCheck("2(757)6227382") should return false. - testString: assert(telephoneCheck("2(757)6227382") === false); - - text: telephoneCheck("2(757)622-7382") should return false. - testString: assert(telephoneCheck("2(757)622-7382") === false); - - text: telephoneCheck("555)-555-5555") should return false. - testString: assert(telephoneCheck("555)-555-5555") === false); - - text: telephoneCheck("(555-555-5555") should return false. - testString: assert(telephoneCheck("(555-555-5555") === false); - - text: telephoneCheck("(555)5(55?)-5555") should return false. - testString: assert(telephoneCheck("(555)5(55?)-5555") === false); +`telephoneCheck("555-555-5555")` should return a boolean. +```js +assert(typeof telephoneCheck('555-555-5555') === 'boolean'); ``` -
    +`telephoneCheck("1 555-555-5555")` should return true. -## Challenge Seed -
    +```js +assert(telephoneCheck('1 555-555-5555') === true); +``` -
    +`telephoneCheck("1 (555) 555-5555")` should return true. + +```js +assert(telephoneCheck('1 (555) 555-5555') === true); +``` + +`telephoneCheck("5555555555")` should return true. + +```js +assert(telephoneCheck('5555555555') === true); +``` + +`telephoneCheck("555-555-5555")` should return true. + +```js +assert(telephoneCheck('555-555-5555') === true); +``` + +`telephoneCheck("(555)555-5555")` should return true. + +```js +assert(telephoneCheck('(555)555-5555') === true); +``` + +`telephoneCheck("1(555)555-5555")` should return true. + +```js +assert(telephoneCheck('1(555)555-5555') === true); +``` + +`telephoneCheck("555-5555")` should return false. + +```js +assert(telephoneCheck('555-5555') === false); +``` + +`telephoneCheck("5555555")` should return false. + +```js +assert(telephoneCheck('5555555') === false); +``` + +`telephoneCheck("1 555)555-5555")` should return false. + +```js +assert(telephoneCheck('1 555)555-5555') === false); +``` + +`telephoneCheck("1 555 555 5555")` should return true. + +```js +assert(telephoneCheck('1 555 555 5555') === true); +``` + +`telephoneCheck("1 456 789 4444")` should return true. + +```js +assert(telephoneCheck('1 456 789 4444') === true); +``` + +`telephoneCheck("123**&!!asdf#")` should return false. + +```js +assert(telephoneCheck('123**&!!asdf#') === false); +``` + +`telephoneCheck("55555555")` should return false. + +```js +assert(telephoneCheck('55555555') === false); +``` + +`telephoneCheck("(6054756961)")` should return false + +```js +assert(telephoneCheck('(6054756961)') === false); +``` + +`telephoneCheck("2 (757) 622-7382")` should return false. + +```js +assert(telephoneCheck('2 (757) 622-7382') === false); +``` + +`telephoneCheck("0 (757) 622-7382")` should return false. + +```js +assert(telephoneCheck('0 (757) 622-7382') === false); +``` + +`telephoneCheck("-1 (757) 622-7382")` should return false + +```js +assert(telephoneCheck('-1 (757) 622-7382') === false); +``` + +`telephoneCheck("2 757 622-7382")` should return false. + +```js +assert(telephoneCheck('2 757 622-7382') === false); +``` + +`telephoneCheck("10 (757) 622-7382")` should return false. + +```js +assert(telephoneCheck('10 (757) 622-7382') === false); +``` + +`telephoneCheck("27576227382")` should return false. + +```js +assert(telephoneCheck('27576227382') === false); +``` + +`telephoneCheck("(275)76227382")` should return false. + +```js +assert(telephoneCheck('(275)76227382') === false); +``` + +`telephoneCheck("2(757)6227382")` should return false. + +```js +assert(telephoneCheck('2(757)6227382') === false); +``` + +`telephoneCheck("2(757)622-7382")` should return false. + +```js +assert(telephoneCheck('2(757)622-7382') === false); +``` + +`telephoneCheck("555)-555-5555")` should return false. + +```js +assert(telephoneCheck('555)-555-5555') === false); +``` + +`telephoneCheck("(555-555-5555")` should return false. + +```js +assert(telephoneCheck('(555-555-5555') === false); +``` + +`telephoneCheck("(555)5(55?)-5555")` should return false. + +```js +assert(telephoneCheck('(555)5(55?)-5555') === false); +``` + +# --seed-- + +## --seed-contents-- ```js function telephoneCheck(str) { @@ -95,15 +191,7 @@ function telephoneCheck(str) { telephoneCheck("555-555-5555"); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/; @@ -114,5 +202,3 @@ function telephoneCheck(str) { telephoneCheck("555-555-5555"); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md index 1d41bc5e6f..a6006a4393 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301315 --- -## Description -
    -A constructor function that inherits its prototype object from a supertype constructor function can still have its own methods in addition to inherited methods. -For example, Bird is a constructor that inherits its prototype from Animal: +# --description-- + +A constructor function that inherits its `prototype` object from a supertype constructor function can still have its own methods in addition to inherited methods. + +For example, `Bird` is a constructor that inherits its `prototype` from `Animal`: ```js function Animal() { } @@ -20,7 +21,7 @@ Bird.prototype = Object.create(Animal.prototype); Bird.prototype.constructor = Bird; ``` -In addition to what is inherited from Animal, you want to add behavior that is unique to Bird objects. Here, Bird will get a fly() function. Functions are added to Bird's prototype the same way as any constructor function: +In addition to what is inherited from `Animal`, you want to add behavior that is unique to `Bird` objects. Here, `Bird` will get a `fly()` function. Functions are added to `Bird's` `prototype` the same way as any constructor function: ```js Bird.prototype.fly = function() { @@ -28,7 +29,7 @@ Bird.prototype.fly = function() { }; ``` -Now instances of Bird will have both eat() and fly() methods: +Now instances of `Bird` will have both `eat()` and `fly()` methods: ```js let duck = new Bird(); @@ -36,44 +37,63 @@ duck.eat(); // prints "nom nom nom" duck.fly(); // prints "I'm flying!" ``` -
    +# --instructions-- -## Instructions -
    -Add all necessary code so the Dog object inherits from Animal and the Dog's prototype constructor is set to Dog. Then add a bark() method to the Dog object so that beagle can both eat() and bark(). The bark() method should print "Woof!" to the console. -
    +Add all necessary code so the `Dog` object inherits from `Animal` and the `Dog's` `prototype` constructor is set to Dog. Then add a `bark()` method to the `Dog` object so that `beagle` can both `eat()` and `bark()`. The `bark()` method should print "Woof!" to the console. -## Tests -
    +# --hints-- -```yml -tests: - - text: Animal should not respond to the bark() method. - testString: assert(typeof Animal.prototype.bark == "undefined"); - - text: Dog should inherit the eat() method from Animal. - testString: assert(typeof Dog.prototype.eat == "function"); - - text: Dog should have the bark() method as an own property. - testString: assert(Dog.prototype.hasOwnProperty('bark')); - - text: beagle should be an instanceof Animal. - testString: assert(beagle instanceof Animal); - - text: The constructor for beagle should be set to Dog. - testString: assert(beagle.constructor === Dog); - - text: beagle.eat() should log "nom nom nom" - testString: | - console.log = function(msg){throw msg;} - assert.throws(() => beagle.eat(),"nom nom nom"); - - text: beagle.bark() should log "Woof!" - testString: | - console.log = function(msg){throw msg;} - assert.throws(() => beagle.bark(),"Woof!"); +`Animal` should not respond to the `bark()` method. + +```js +assert(typeof Animal.prototype.bark == 'undefined'); ``` -
    +`Dog` should inherit the `eat()` method from `Animal`. -## Challenge Seed -
    +```js +assert(typeof Dog.prototype.eat == 'function'); +``` -
    +`Dog` should have the `bark()` method as an `own` property. + +```js +assert(Dog.prototype.hasOwnProperty('bark')); +``` + +`beagle` should be an `instanceof` `Animal`. + +```js +assert(beagle instanceof Animal); +``` + +The constructor for `beagle` should be set to `Dog`. + +```js +assert(beagle.constructor === Dog); +``` + +`beagle.eat()` should log `"nom nom nom"` + +```js +console.log = function (msg) { + throw msg; +}; +assert.throws(() => beagle.eat(), 'nom nom nom'); +``` + +`beagle.bark()` should log `"Woof!"` + +```js +console.log = function (msg) { + throw msg; +}; +assert.throws(() => beagle.bark(), 'Woof!'); +``` + +# --seed-- + +## --seed-contents-- ```js function Animal() { } @@ -91,15 +111,7 @@ function Dog() { } let beagle = new Dog(); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Animal() { } @@ -116,5 +128,3 @@ let beagle = new Dog(); beagle.eat(); beagle.bark(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/change-the-prototype-to-a-new-object.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/change-the-prototype-to-a-new-object.md index a296611a89..1b46b5deb2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/change-the-prototype-to-a-new-object.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/change-the-prototype-to-a-new-object.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301316 --- -## Description -
    -Up until now you have been adding properties to the prototype individually: +# --description-- + +Up until now you have been adding properties to the `prototype` individually: ```js Bird.prototype.numLegs = 2; @@ -25,7 +25,7 @@ Bird.prototype.describe = function() { } ``` -A more efficient way is to set the prototype to a new object that already contains the properties. This way, the properties are added all at once: +A more efficient way is to set the `prototype` to a new object that already contains the properties. This way, the properties are added all at once: ```js Bird.prototype = { @@ -39,35 +39,39 @@ Bird.prototype = { }; ``` -
    +# --instructions-- -## Instructions -
    -Add the property numLegs and the two methods eat() and describe() to the prototype of Dog by setting the prototype to a new object. -
    +Add the property `numLegs` and the two methods `eat()` and `describe()` to the `prototype` of `Dog` by setting the `prototype` to a new object. -## Tests -
    +# --hints-- -```yml -tests: - - text: Dog.prototype should be set to a new object. - testString: assert((/Dog\.prototype\s*?=\s*?{/).test(code)); - - text: Dog.prototype should have the property numLegs. - testString: assert(Dog.prototype.numLegs !== undefined); - - text: Dog.prototype should have the method eat(). - testString: assert(typeof Dog.prototype.eat === 'function'); - - text: Dog.prototype should have the method describe(). - testString: assert(typeof Dog.prototype.describe === 'function'); +`Dog.prototype` should be set to a new object. +```js +assert(/Dog\.prototype\s*?=\s*?{/.test(code)); ``` -
    +`Dog.prototype` should have the property `numLegs`. -## Challenge Seed -
    +```js +assert(Dog.prototype.numLegs !== undefined); +``` -
    +`Dog.prototype` should have the method `eat()`. + +```js +assert(typeof Dog.prototype.eat === 'function'); +``` + +`Dog.prototype` should have the method `describe()`. + +```js +assert(typeof Dog.prototype.describe === 'function'); +``` + +# --seed-- + +## --seed-contents-- ```js function Dog(name) { @@ -80,15 +84,7 @@ Dog.prototype = { }; ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Dog(name) { @@ -104,5 +100,3 @@ numLegs: 4, } }; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-basic-javascript-object.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-basic-javascript-object.md index 06d80f3454..2d56463154 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-basic-javascript-object.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-basic-javascript-object.md @@ -5,12 +5,15 @@ challengeType: 1 forumTopicId: 301317 --- -## Description -
    +# --description-- + Think about things people see every day, like cars, shops, and birds. These are all objects: tangible things people can observe and interact with. + What are some qualities of these objects? A car has wheels. Shops sell items. Birds have wings. + These qualities, or properties, define what makes up an object. Note that similar objects share the same properties, but may have different values for those properties. For example, all cars have wheels, but not all cars have the same number of wheels. -Objects in JavaScript are used to model real-world objects, giving them properties and behavior just like their real-world counterparts. Here's an example using these concepts to create a duck object: + +Objects in JavaScript are used to model real-world objects, giving them properties and behavior just like their real-world counterparts. Here's an example using these concepts to create a `duck` object: ```js let duck = { @@ -19,34 +22,35 @@ let duck = { }; ``` -This duck object has two property/value pairs: a name of "Aflac" and a numLegs of 2. -
    +This `duck` object has two property/value pairs: a `name` of "Aflac" and a `numLegs` of 2. -## Instructions -
    -Create a dog object with name and numLegs properties, and set them to a string and a number, respectively. -
    +# --instructions-- -## Tests -
    +Create a `dog` object with `name` and `numLegs` properties, and set them to a string and a number, respectively. -```yml -tests: - - text: dog should be an object. - testString: assert(typeof(dog) === 'object'); - - text: dog should have a name property set to a string. - testString: assert(typeof(dog.name) === 'string'); - - text: dog should have a numLegs property set to a number. - testString: assert(typeof(dog.numLegs) === 'number'); +# --hints-- +`dog` should be an object. + +```js +assert(typeof dog === 'object'); ``` -
    +`dog` should have a `name` property set to a `string`. -## Challenge Seed -
    +```js +assert(typeof dog.name === 'string'); +``` -
    +`dog` should have a `numLegs` property set to a `number`. + +```js +assert(typeof dog.numLegs === 'number'); +``` + +# --seed-- + +## --seed-contents-- ```js let dog = { @@ -54,15 +58,7 @@ let dog = { }; ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js let dog = { @@ -70,5 +66,3 @@ let dog = { numLegs: 4 }; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-method-on-an-object.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-method-on-an-object.md index d443878098..52736be696 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-method-on-an-object.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-method-on-an-object.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301318 --- -## Description -
    +# --description-- + Objects can have a special type of property, called a method. -Methods are properties that are functions. This adds different behavior to an object. Here is the duck example with a method: + +Methods are properties that are functions. This adds different behavior to an object. Here is the `duck` example with a method: ```js let duck = { @@ -20,33 +21,29 @@ duck.sayName(); // Returns "The name of this duck is Aflac." ``` -The example adds the sayName method, which is a function that returns a sentence giving the name of the duck. -Notice that the method accessed the name property in the return statement using duck.name. The next challenge will cover another way to do this. -
    +The example adds the `sayName` method, which is a function that returns a sentence giving the name of the `duck`. Notice that the method accessed the `name` property in the return statement using `duck.name`. The next challenge will cover another way to do this. -## Instructions -
    -Using the dog object, give it a method called sayLegs. The method should return the sentence "This dog has 4 legs." -
    +# --instructions-- -## Tests -
    +Using the `dog` object, give it a method called `sayLegs`. The method should return the sentence "This dog has 4 legs." -```yml -tests: - - text: dog.sayLegs() should be a function. - testString: assert(typeof(dog.sayLegs) === 'function'); - - text: dog.sayLegs() should return the given string - note that punctuation and spacing matter. - testString: assert(dog.sayLegs() === 'This dog has 4 legs.'); +# --hints-- +`dog.sayLegs()` should be a function. + +```js +assert(typeof dog.sayLegs === 'function'); ``` -
    +`dog.sayLegs()` should return the given string - note that punctuation and spacing matter. -## Challenge Seed -
    +```js +assert(dog.sayLegs() === 'This dog has 4 legs.'); +``` -
    +# --seed-- + +## --seed-contents-- ```js let dog = { @@ -58,15 +55,7 @@ let dog = { dog.sayLegs(); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js let dog = { @@ -79,5 +68,3 @@ let dog = { dog.sayLegs(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/define-a-constructor-function.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/define-a-constructor-function.md index ff3bc22865..87279fd5dc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/define-a-constructor-function.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/define-a-constructor-function.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 16804 --- -## Description -
    +# --description-- + Constructors are functions that create new objects. They define properties and behaviors that will belong to the new object. Think of them as a blueprint for the creation of new objects. + Here is an example of a constructor: ```js @@ -18,50 +19,42 @@ function Bird() { } ``` -This constructor defines a Bird object with properties name, color, and numLegs set to Albert, blue, and 2, respectively. -Constructors follow a few conventions: +This constructor defines a `Bird` object with properties `name`, `color`, and `numLegs` set to Albert, blue, and 2, respectively. Constructors follow a few conventions: + -
    -## Instructions -
    -Create a constructor, Dog, with properties name, color, and numLegs that are set to a string, a string, and a number, respectively. -
    +# --instructions-- -## Tests -
    +Create a constructor, `Dog`, with properties `name`, `color`, and `numLegs` that are set to a string, a string, and a number, respectively. -```yml -tests: - - text: Dog should have a name property set to a string. - testString: assert(typeof (new Dog()).name === 'string'); - - text: Dog should have a color property set to a string. - testString: assert(typeof (new Dog()).color === 'string'); - - text: Dog should have a numLegs property set to a number. - testString: assert(typeof (new Dog()).numLegs === 'number'); +# --hints-- -``` - -
    - -## Challenge Seed -
    - -
    +`Dog` should have a `name` property set to a string. ```js - +assert(typeof new Dog().name === 'string'); ``` -
    +`Dog` should have a `color` property set to a string. +```js +assert(typeof new Dog().color === 'string'); +``` +`Dog` should have a `numLegs` property set to a number. -
    +```js +assert(typeof new Dog().numLegs === 'number'); +``` -## Solution -
    +# --seed-- +## --seed-contents-- + +```js +``` + +# --solutions-- ```js function Dog (name, color, numLegs) { @@ -70,5 +63,3 @@ function Dog (name, color, numLegs) { this.numLegs = 4; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/extend-constructors-to-receive-arguments.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/extend-constructors-to-receive-arguments.md index 12464ae840..1d039c0298 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/extend-constructors-to-receive-arguments.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/extend-constructors-to-receive-arguments.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 18235 --- -## Description -
    -The Bird and Dog constructors from last challenge worked well. However, notice that all Birds that are created with the Bird constructor are automatically named Albert, are blue in color, and have two legs. What if you want birds with different values for name and color? It's possible to change the properties of each bird manually but that would be a lot of work: +# --description-- + +The `Bird` and `Dog` constructors from last challenge worked well. However, notice that all `Birds` that are created with the `Bird` constructor are automatically named Albert, are blue in color, and have two legs. What if you want birds with different values for name and color? It's possible to change the properties of each bird manually but that would be a lot of work: ```js let swan = new Bird(); @@ -15,8 +15,7 @@ swan.name = "Carlos"; swan.color = "white"; ``` -Suppose you were writing a program to keep track of hundreds or even thousands of different birds in an aviary. It would take a lot of time to create all the birds, then change the properties to different values for every one. -To more easily create different Bird objects, you can design your Bird constructor to accept parameters: +Suppose you were writing a program to keep track of hundreds or even thousands of different birds in an aviary. It would take a lot of time to create all the birds, then change the properties to different values for every one. To more easily create different `Bird` objects, you can design your Bird constructor to accept parameters: ```js function Bird(name, color) { @@ -26,10 +25,7 @@ function Bird(name, color) { } ``` -Then pass in the values as arguments to define each unique bird into the Bird constructor: -let cardinal = new Bird("Bruce", "red"); -This gives a new instance of Bird with name and color properties set to Bruce and red, respectively. The numLegs property is still set to 2. -The cardinal has these properties: +Then pass in the values as arguments to define each unique bird into the `Bird` constructor: `let cardinal = new Bird("Bruce", "red");` This gives a new instance of `Bird` with name and color properties set to Bruce and red, respectively. The `numLegs` property is still set to 2. The `cardinal` has these properties: ```js cardinal.name // => Bruce @@ -37,54 +33,49 @@ cardinal.color // => red cardinal.numLegs // => 2 ``` -The constructor is more flexible. It's now possible to define the properties for each Bird at the time it is created, which is one way that JavaScript constructors are so useful. They group objects together based on shared characteristics and behavior and define a blueprint that automates their creation. -
    +The constructor is more flexible. It's now possible to define the properties for each `Bird` at the time it is created, which is one way that JavaScript constructors are so useful. They group objects together based on shared characteristics and behavior and define a blueprint that automates their creation. -## Instructions -
    -Create another Dog constructor. This time, set it up to take the parameters name and color, and have the property numLegs fixed at 4. Then create a new Dog saved in a variable terrier. Pass it two strings as arguments for the name and color properties. -
    +# --instructions-- -## Tests -
    +Create another `Dog` constructor. This time, set it up to take the parameters `name` and `color`, and have the property `numLegs` fixed at 4. Then create a new `Dog` saved in a variable `terrier`. Pass it two strings as arguments for the `name` and `color` properties. -```yml -tests: - - text: Dog should receive an argument for name. - testString: assert((new Dog('Clifford')).name === 'Clifford'); - - text: Dog should receive an argument for color. - testString: assert((new Dog('Clifford', 'yellow')).color === 'yellow'); - - text: Dog should have property numLegs set to 4. - testString: assert((new Dog('Clifford')).numLegs === 4); - - text: terrier should be created using the Dog constructor. - testString: assert(terrier instanceof Dog); +# --hints-- +`Dog` should receive an argument for `name`. + +```js +assert(new Dog('Clifford').name === 'Clifford'); ``` -
    +`Dog` should receive an argument for `color`. -## Challenge Seed -
    +```js +assert(new Dog('Clifford', 'yellow').color === 'yellow'); +``` -
    +`Dog` should have property `numLegs` set to 4. + +```js +assert(new Dog('Clifford').numLegs === 4); +``` + +`terrier` should be created using the `Dog` constructor. + +```js +assert(terrier instanceof Dog); +``` + +# --seed-- + +## --seed-contents-- ```js function Dog() { } - - ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Dog (name, color) { @@ -95,5 +86,3 @@ function Dog (name, color) { const terrier = new Dog(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md index 9554a33f7d..72c6eb6d33 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301319 --- -## Description -
    -In the previous challenge, you created a supertype called Animal that defined behaviors shared by all animals: +# --description-- + +In the previous challenge, you created a `supertype` called `Animal` that defined behaviors shared by all animals: ```js function Animal() { } @@ -16,9 +16,7 @@ Animal.prototype.eat = function() { }; ``` -This and the next challenge will cover how to reuse Animal's methods inside Bird and Dog without defining them again. It uses a technique called inheritance. -This challenge covers the first step: make an instance of the supertype (or parent). -You already know one way to create an instance of Animal using the new operator: +This and the next challenge will cover how to reuse `Animal's` methods inside `Bird` and `Dog` without defining them again. It uses a technique called inheritance. This challenge covers the first step: make an instance of the `supertype` (or parent). You already know one way to create an instance of `Animal` using the `new` operator: ```js let animal = new Animal(); @@ -30,46 +28,66 @@ There are some disadvantages when using this syntax for inheritance, which are t let animal = Object.create(Animal.prototype); ``` -Object.create(obj) creates a new object, and sets obj as the new object's prototype. Recall that the prototype is like the "recipe" for creating an object. By setting the prototype of animal to be Animal's prototype, you are effectively giving the animal instance the same "recipe" as any other instance of Animal. +`Object.create(obj)` creates a new object, and sets `obj` as the new object's `prototype`. Recall that the `prototype` is like the "recipe" for creating an object. By setting the `prototype` of `animal` to be `Animal's` `prototype`, you are effectively giving the `animal` instance the same "recipe" as any other instance of `Animal`. ```js animal.eat(); // prints "nom nom nom" animal instanceof Animal; // => true ``` -
    +# --instructions-- -## Instructions -
    -Use Object.create to make two instances of Animal named duck and beagle. -
    +Use `Object.create` to make two instances of `Animal` named `duck` and `beagle`. -## Tests -
    +# --hints-- -```yml -tests: - - text: The duck variable should be defined. - testString: assert(typeof duck !== "undefined"); - - text: The beagle variable should be defined. - testString: assert(typeof beagle !== "undefined"); - - text: The duck variable should be initialised with Object.create. - testString: assert(/(let|const|var)\s{1,}duck\s*=\s*Object\.create\s*\(\s*Animal\.prototype\s*\)\s*/.test(code)); - - text: The beagle variable should be initialised with Object.create. - testString: assert(/(let|const|var)\s{1,}beagle\s*=\s*Object\.create\s*\(\s*Animal\.prototype\s*\)\s*/.test(code)); - - text: duck should have a prototype of Animal. - testString: assert(duck instanceof Animal); - - text: beagle should have a prototype of Animal. - testString: assert(beagle instanceof Animal); +The `duck` variable should be defined. +```js +assert(typeof duck !== 'undefined'); ``` -
    +The `beagle` variable should be defined. -## Challenge Seed -
    +```js +assert(typeof beagle !== 'undefined'); +``` -
    +The `duck` variable should be initialised with `Object.create`. + +```js +assert( + /(let|const|var)\s{1,}duck\s*=\s*Object\.create\s*\(\s*Animal\.prototype\s*\)\s*/.test( + code + ) +); +``` + +The `beagle` variable should be initialised with `Object.create`. + +```js +assert( + /(let|const|var)\s{1,}beagle\s*=\s*Object\.create\s*\(\s*Animal\.prototype\s*\)\s*/.test( + code + ) +); +``` + +`duck` should have a `prototype` of `Animal`. + +```js +assert(duck instanceof Animal); +``` + +`beagle` should have a `prototype` of `Animal`. + +```js +assert(beagle instanceof Animal); +``` + +# --seed-- + +## --seed-contents-- ```js function Animal() { } @@ -87,15 +105,7 @@ let duck; // Change this line let beagle; // Change this line ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Animal() { } @@ -112,5 +122,3 @@ let beagle = Object.create(Animal.prototype); duck.eat(); beagle.eat(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/iterate-over-all-properties.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/iterate-over-all-properties.md index 36755290c3..a09845107a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/iterate-over-all-properties.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/iterate-over-all-properties.md @@ -1,13 +1,13 @@ ---- +--- id: 587d7daf367417b2b2512b7d title: Iterate Over All Properties challengeType: 1 forumTopicId: 301320 --- -## Description -
    -You have now seen two kinds of properties: own properties and prototype properties. Own properties are defined directly on the object instance itself. And prototype properties are defined on the prototype. +# --description-- + +You have now seen two kinds of properties: `own` properties and `prototype` properties. `Own` properties are defined directly on the object instance itself. And `prototype` properties are defined on the `prototype`. ```js function Bird(name) { @@ -19,7 +19,7 @@ Bird.prototype.numLegs = 2; // prototype property let duck = new Bird("Donald"); ``` -Here is how you add duck's own properties to the array ownProps and prototype properties to the array prototypeProps: +Here is how you add `duck`'s `own` properties to the array `ownProps` and `prototype` properties to the array `prototypeProps`: ```js let ownProps = []; @@ -37,33 +37,33 @@ console.log(ownProps); // prints ["name"] console.log(prototypeProps); // prints ["numLegs"] ``` -
    +# --instructions-- -## Instructions -
    -Add all of the own properties of beagle to the array ownProps. Add all of the prototype properties of Dog to the array prototypeProps. -
    +Add all of the `own` properties of `beagle` to the array `ownProps`. Add all of the `prototype` properties of `Dog` to the array `prototypeProps`. -## Tests -
    +# --hints-- -```yml -tests: - - text: The ownProps array should include "name". - testString: assert(ownProps.indexOf('name') !== -1); - - text: The prototypeProps array should include "numLegs". - testString: assert(prototypeProps.indexOf('numLegs') !== -1); - - text: You should solve this challenge without using the built in method Object.keys(). - testString: assert(!/\Object.keys/.test(code)); +The `ownProps` array should include `"name"`. +```js +assert(ownProps.indexOf('name') !== -1); ``` -
    +The `prototypeProps` array should include `"numLegs"`. -## Challenge Seed -
    +```js +assert(prototypeProps.indexOf('numLegs') !== -1); +``` -
    +You should solve this challenge without using the built in method `Object.keys()`. + +```js +assert(!/\Object.keys/.test(code)); +``` + +# --seed-- + +## --seed-contents-- ```js function Dog(name) { @@ -78,20 +78,9 @@ let ownProps = []; let prototypeProps = []; // Only change code below this line - - - ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Dog(name) { @@ -112,5 +101,3 @@ for (let prop in beagle) { } } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/make-code-more-reusable-with-the-this-keyword.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/make-code-more-reusable-with-the-this-keyword.md index e1b67b2c40..a71b264581 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/make-code-more-reusable-with-the-this-keyword.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/make-code-more-reusable-with-the-this-keyword.md @@ -5,12 +5,15 @@ challengeType: 1 forumTopicId: 301321 --- -## Description -
    -The last challenge introduced a method to the duck object. It used duck.name dot notation to access the value for the name property within the return statement: -sayName: function() {return "The name of this duck is " + duck.name + ".";} +# --description-- + +The last challenge introduced a method to the `duck` object. It used `duck.name` dot notation to access the value for the `name` property within the return statement: + +`sayName: function() {return "The name of this duck is " + duck.name + ".";}` + While this is a valid way to access the object's property, there is a pitfall here. If the variable name changes, any code referencing the original name would need to be updated as well. In a short object definition, it isn't a problem, but if an object has many references to its properties there is a greater chance for error. -A way to avoid these issues is with the this keyword: + +A way to avoid these issues is with the `this` keyword: ```js let duck = { @@ -20,33 +23,29 @@ let duck = { }; ``` -this is a deep topic, and the above example is only one way to use it. In the current context, this refers to the object that the method is associated with: duck. -If the object's name is changed to mallard, it is not necessary to find all the references to duck in the code. It makes the code reusable and easier to read. -
    +`this` is a deep topic, and the above example is only one way to use it. In the current context, `this` refers to the object that the method is associated with: `duck`. If the object's name is changed to `mallard`, it is not necessary to find all the references to `duck` in the code. It makes the code reusable and easier to read. -## Instructions -
    -Modify the dog.sayLegs method to remove any references to dog. Use the duck example for guidance. -
    +# --instructions-- -## Tests -
    +Modify the `dog.sayLegs` method to remove any references to `dog`. Use the `duck` example for guidance. -```yml -tests: - - text: dog.sayLegs() should return the given string. - testString: assert(dog.sayLegs() === 'This dog has 4 legs.'); - - text: Your code should use the this keyword to access the numLegs property of dog. - testString: assert(code.match(/this\.numLegs/g)); +# --hints-- +`dog.sayLegs()` should return the given string. + +```js +assert(dog.sayLegs() === 'This dog has 4 legs.'); ``` -
    +Your code should use the `this` keyword to access the `numLegs` property of `dog`. -## Challenge Seed -
    +```js +assert(code.match(/this\.numLegs/g)); +``` -
    +# --seed-- + +## --seed-contents-- ```js let dog = { @@ -58,15 +57,7 @@ let dog = { dog.sayLegs(); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js let dog = { @@ -79,5 +70,3 @@ let dog = { dog.sayLegs(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md index cb14ddb6c2..67ee5d247c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md @@ -5,23 +5,21 @@ challengeType: 1 forumTopicId: 301322 --- -## Description -
    +# --description-- -In previous lessons, you learned that an object can inherit its behavior (methods) from another object by referencing its prototype object: +In previous lessons, you learned that an object can inherit its behavior (methods) from another object by referencing its `prototype` object: ```js ChildObject.prototype = Object.create(ParentObject.prototype); ``` -Then the ChildObject received its own methods by chaining them onto its prototype: +Then the `ChildObject` received its own methods by chaining them onto its `prototype`: ```js ChildObject.prototype.methodName = function() {...}; ``` -It's possible to override an inherited method. It's done the same way - by adding a method to ChildObject.prototype using the same method name as the one to override. -Here's an example of Bird overriding the eat() method inherited from Animal: +It's possible to override an inherited method. It's done the same way - by adding a method to `ChildObject.prototype` using the same method name as the one to override. Here's an example of `Bird` overriding the `eat()` method inherited from `Animal`: ```js function Animal() { } @@ -39,39 +37,34 @@ Bird.prototype.eat = function() { }; ``` -If you have an instance let duck = new Bird(); and you call duck.eat(), this is how JavaScript looks for the method on duck’s prototype chain: +If you have an instance `let duck = new Bird();` and you call `duck.eat()`, this is how JavaScript looks for the method on `duck’s` `prototype` chain: -1. duck => Is eat() defined here? No. -2. Bird => Is eat() defined here? => Yes. Execute it and stop searching. -3. Animal => eat() is also defined, but JavaScript stopped searching before reaching this level. -4. Object => JavaScript stopped searching before reaching this level. +1. duck => Is eat() defined here? No. +2. Bird => Is eat() defined here? => Yes. Execute it and stop searching. +3. Animal => eat() is also defined, but JavaScript stopped searching before reaching this level. +4. Object => JavaScript stopped searching before reaching this level. -
    +# --instructions-- -## Instructions -
    +Override the `fly()` method for `Penguin` so that it returns "Alas, this is a flightless bird." -Override the fly() method for Penguin so that it returns "Alas, this is a flightless bird." -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: penguin.fly() should return the string "Alas, this is a flightless bird." - testString: assert(penguin.fly() === "Alas, this is a flightless bird."); - - text: The bird.fly() method should return "I am flying!" - testString: assert((new Bird()).fly() === "I am flying!"); +`penguin.fly()` should return the string "Alas, this is a flightless bird." +```js +assert(penguin.fly() === 'Alas, this is a flightless bird.'); ``` -
    +The `bird.fly()` method should return "I am flying!" -## Challenge Seed -
    +```js +assert(new Bird().fly() === 'I am flying!'); +``` -
    +# --seed-- + +## --seed-contents-- ```js function Bird() { } @@ -92,15 +85,7 @@ let penguin = new Penguin(); console.log(penguin.fly()); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Bird() { } @@ -114,5 +99,3 @@ Penguin.prototype.fly = () => 'Alas, this is a flightless bird.'; let penguin = new Penguin(); console.log(penguin.fly()); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md index 633ebca2b9..8f6ddeb814 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301323 --- -## Description -
    -There is one crucial side effect of manually setting the prototype to a new object. It erases the constructor property! This property can be used to check which constructor function created the instance, but since the property has been overwritten, it now gives false results: +# --description-- + +There is one crucial side effect of manually setting the prototype to a new object. It erases the `constructor` property! This property can be used to check which constructor function created the instance, but since the property has been overwritten, it now gives false results: ```js duck.constructor === Bird; // false -- Oops @@ -15,7 +15,7 @@ duck.constructor === Object; // true, all objects inherit from Object.prototype duck instanceof Bird; // true, still works ``` -To fix this, whenever a prototype is manually set to a new object, remember to define the constructor property: +To fix this, whenever a prototype is manually set to a new object, remember to define the `constructor` property: ```js Bird.prototype = { @@ -30,29 +30,21 @@ Bird.prototype = { }; ``` -
    +# --instructions-- -## Instructions -
    -Define the constructor property on the Dog prototype. -
    +Define the `constructor` property on the `Dog` `prototype`. -## Tests -
    +# --hints-- -```yml -tests: - - text: Dog.prototype should set the constructor property. - testString: assert(Dog.prototype.constructor === Dog); +`Dog.prototype` should set the `constructor` property. +```js +assert(Dog.prototype.constructor === Dog); ``` -
    +# --seed-- -## Challenge Seed -
    - -
    +## --seed-contents-- ```js function Dog(name) { @@ -72,15 +64,7 @@ Dog.prototype = { }; ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Dog(name) { @@ -97,5 +81,3 @@ Dog.prototype = { } }; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md index 3c13320dcf..21a359175b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 301324 --- -## Description -
    -When an object inherits its prototype from another object, it also inherits the supertype's constructor property. +# --description-- + +When an object inherits its `prototype` from another object, it also inherits the supertype's constructor property. + Here's an example: ```js @@ -17,42 +18,46 @@ let duck = new Bird(); duck.constructor // function Animal(){...} ``` -But duck and all instances of Bird should show that they were constructed by Bird and not Animal. To do so, you can manually set Bird's constructor property to the Bird object: +But `duck` and all instances of `Bird` should show that they were constructed by `Bird` and not `Animal`. To do so, you can manually set `Bird's` constructor property to the `Bird` object: ```js Bird.prototype.constructor = Bird; duck.constructor // function Bird(){...} ``` -
    +# --instructions-- -## Instructions -
    -Fix the code so duck.constructor and beagle.constructor return their respective constructors. -
    +Fix the code so `duck.constructor` and `beagle.constructor` return their respective constructors. -## Tests -
    +# --hints-- -```yml -tests: - - text: Bird.prototype should be an instance of Animal. - testString: assert(Animal.prototype.isPrototypeOf(Bird.prototype)); - - text: duck.constructor should return Bird. - testString: assert(duck.constructor === Bird); - - text: Dog.prototype should be an instance of Animal. - testString: assert(Animal.prototype.isPrototypeOf(Dog.prototype)); - - text: beagle.constructor should return Dog. - testString: assert(beagle.constructor === Dog); +`Bird.prototype` should be an instance of `Animal`. +```js +assert(Animal.prototype.isPrototypeOf(Bird.prototype)); ``` -
    +`duck.constructor` should return `Bird`. -## Challenge Seed -
    +```js +assert(duck.constructor === Bird); +``` -
    +`Dog.prototype` should be an instance of `Animal`. + +```js +assert(Animal.prototype.isPrototypeOf(Dog.prototype)); +``` + +`beagle.constructor` should return `Dog`. + +```js +assert(beagle.constructor === Dog); +``` + +# --seed-- + +## --seed-contents-- ```js function Animal() { } @@ -70,15 +75,7 @@ let duck = new Bird(); let beagle = new Dog(); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Animal() { } @@ -91,5 +88,3 @@ Bird.prototype.constructor = Bird; let duck = new Bird(); let beagle = new Dog(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/set-the-childs-prototype-to-an-instance-of-the-parent.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/set-the-childs-prototype-to-an-instance-of-the-parent.md index 41da8f8ac4..b737cf5a65 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/set-the-childs-prototype-to-an-instance-of-the-parent.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/set-the-childs-prototype-to-an-instance-of-the-parent.md @@ -5,46 +5,40 @@ challengeType: 1 forumTopicId: 301325 --- -## Description -
    -In the previous challenge you saw the first step for inheriting behavior from the supertype (or parent) Animal: making a new instance of Animal. -This challenge covers the next step: set the prototype of the subtype (or child)—in this case, Bird—to be an instance of Animal. +# --description-- + +In the previous challenge you saw the first step for inheriting behavior from the supertype (or parent) `Animal`: making a new instance of `Animal`. + +This challenge covers the next step: set the `prototype` of the subtype (or child)—in this case, `Bird`—to be an instance of `Animal`. ```js Bird.prototype = Object.create(Animal.prototype); ``` -Remember that the prototype is like the "recipe" for creating an object. In a way, the recipe for Bird now includes all the key "ingredients" from Animal. +Remember that the `prototype` is like the "recipe" for creating an object. In a way, the recipe for `Bird` now includes all the key "ingredients" from `Animal`. ```js let duck = new Bird("Donald"); duck.eat(); // prints "nom nom nom" ``` -duck inherits all of Animal's properties, including the eat method. -
    +`duck` inherits all of `Animal`'s properties, including the `eat` method. -## Instructions -
    -Modify the code so that instances of Dog inherit from Animal. -
    +# --instructions-- -## Tests -
    +Modify the code so that instances of `Dog` inherit from `Animal`. -```yml -tests: - - text: Dog.prototype should be an instance of Animal. - testString: assert(Animal.prototype.isPrototypeOf(Dog.prototype)); +# --hints-- +`Dog.prototype` should be an instance of `Animal`. + +```js +assert(Animal.prototype.isPrototypeOf(Dog.prototype)); ``` -
    +# --seed-- -## Challenge Seed -
    - -
    +## --seed-contents-- ```js function Animal() { } @@ -62,18 +56,9 @@ function Dog() { } let beagle = new Dog(); - ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Animal() { } @@ -91,5 +76,3 @@ Dog.prototype = Object.create(Animal.prototype); let beagle = new Dog(); beagle.eat(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-own-properties.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-own-properties.md index ab1c8a2446..4dfee9d5f6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-own-properties.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-own-properties.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301326 --- -## Description -
    -In the following example, the Bird constructor defines two properties: name and numLegs: +# --description-- + +In the following example, the `Bird` constructor defines two properties: `name` and `numLegs`: ```js function Bird(name) { @@ -19,9 +19,7 @@ let duck = new Bird("Donald"); let canary = new Bird("Tweety"); ``` -name and numLegs are called own properties, because they are defined directly on the instance object. That means that duck and canary each has its own separate copy of these properties. -In fact every instance of Bird will have its own copy of these properties. -The following code adds all of the own properties of duck to the array ownProps: +`name` and `numLegs` are called `own` properties, because they are defined directly on the instance object. That means that `duck` and `canary` each has its own separate copy of these properties. In fact every instance of `Bird` will have its own copy of these properties. The following code adds all of the `own` properties of `duck` to the array `ownProps`: ```js let ownProps = []; @@ -35,33 +33,37 @@ for (let property in duck) { console.log(ownProps); // prints [ "name", "numLegs" ] ``` -
    +# --instructions-- -## Instructions -
    -Add the own properties of canary to the array ownProps. -
    +Add the `own` properties of `canary` to the array `ownProps`. -## Tests -
    +# --hints-- -```yml -tests: - - text: ownProps should include the values "numLegs" and "name". - testString: assert(ownProps.indexOf('name') !== -1 && ownProps.indexOf('numLegs') !== -1); - - text: You should solve this challenge without using the built in method Object.keys(). - testString: assert(!/Object(\.keys|\[(['"`])keys\2\])/.test(code)); - - text: You should solve this challenge without hardcoding the ownProps array. - testString: assert(!/\[\s*(?:'|")(?:name|numLegs)|(?:push|concat)\(\s*(?:'|")(?:name|numLegs)/.test(code)); +`ownProps` should include the values `"numLegs"` and `"name"`. +```js +assert(ownProps.indexOf('name') !== -1 && ownProps.indexOf('numLegs') !== -1); ``` -
    +You should solve this challenge without using the built in method `Object.keys()`. -## Challenge Seed -
    +```js +assert(!/Object(\.keys|\[(['"`])keys\2\])/.test(code)); +``` -
    +You should solve this challenge without hardcoding the `ownProps` array. + +```js +assert( + !/\[\s*(?:'|")(?:name|numLegs)|(?:push|concat)\(\s*(?:'|")(?:name|numLegs)/.test( + code + ) +); +``` + +# --seed-- + +## --seed-contents-- ```js function Bird(name) { @@ -72,20 +74,9 @@ function Bird(name) { let canary = new Bird("Tweety"); let ownProps = []; // Only change code below this line - - - ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Bird(name) { @@ -108,5 +99,3 @@ function getOwnProps (obj) { const ownProps = getOwnProps(canary); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-constructor-property.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-constructor-property.md index 28652884c8..55bc9cd306 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-constructor-property.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-constructor-property.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301327 --- -## Description -
    -There is a special constructor property located on the object instances duck and beagle that were created in the previous challenges: +# --description-- + +There is a special `constructor` property located on the object instances `duck` and `beagle` that were created in the previous challenges: ```js let duck = new Bird(); @@ -17,8 +17,7 @@ console.log(duck.constructor === Bird); //prints true console.log(beagle.constructor === Dog); //prints true ``` -Note that the constructor property is a reference to the constructor function that created the instance. -The advantage of the constructor property is that it's possible to check for this property to find out what kind of object it is. Here's an example of how this could be used: +Note that the `constructor` property is a reference to the constructor function that created the instance. The advantage of the `constructor` property is that it's possible to check for this property to find out what kind of object it is. Here's an example of how this could be used: ```js function joinBirdFraternity(candidate) { @@ -30,34 +29,36 @@ function joinBirdFraternity(candidate) { } ``` -Note
    Since the constructor property can be overwritten (which will be covered in the next two challenges) it’s generally better to use the instanceof method to check the type of an object. -
    +**Note** +Since the `constructor` property can be overwritten (which will be covered in the next two challenges) it’s generally better to use the `instanceof` method to check the type of an object. -## Instructions -
    -Write a joinDogFraternity function that takes a candidate parameter and, using the constructor property, return true if the candidate is a Dog, otherwise return false. -
    +# --instructions-- -## Tests -
    +Write a `joinDogFraternity` function that takes a `candidate` parameter and, using the `constructor` property, return `true` if the candidate is a `Dog`, otherwise return `false`. -```yml -tests: - - text: joinDogFraternity should be defined as a function. - testString: assert(typeof(joinDogFraternity) === 'function'); - - text: joinDogFraternity should return true ifcandidate is an instance of Dog. - testString: assert(joinDogFraternity(new Dog("")) === true); - - text: joinDogFraternity should use the constructor property. - testString: assert(/\.constructor/.test(code) && !/instanceof/.test(code)); +# --hints-- +`joinDogFraternity` should be defined as a function. + +```js +assert(typeof joinDogFraternity === 'function'); ``` -
    +`joinDogFraternity` should return true if`candidate` is an instance of `Dog`. -## Challenge Seed -
    +```js +assert(joinDogFraternity(new Dog('')) === true); +``` -
    +`joinDogFraternity` should use the `constructor` property. + +```js +assert(/\.constructor/.test(code) && !/instanceof/.test(code)); +``` + +# --seed-- + +## --seed-contents-- ```js function Dog(name) { @@ -68,18 +69,9 @@ function Dog(name) { function joinDogFraternity(candidate) { } - ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Dog(name) { @@ -89,5 +81,3 @@ function joinDogFraternity(candidate) { return candidate.constructor === Dog; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-immediately-invoked-function-expression-iife.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-immediately-invoked-function-expression-iife.md index c2999ed431..776f7539a0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-immediately-invoked-function-expression-iife.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-immediately-invoked-function-expression-iife.md @@ -5,8 +5,8 @@ challengeType: 1 forumTopicId: 301328 --- -## Description -
    +# --description-- + A common pattern in JavaScript is to execute a function as soon as it is declared: ```js @@ -17,31 +17,28 @@ A common pattern in JavaScript is to execute a function as soon as it is declare ``` Note that the function has no name and is not stored in a variable. The two parentheses () at the end of the function expression cause it to be immediately executed or invoked. This pattern is known as an immediately invoked function expression or IIFE. -
    -## Instructions -
    -Rewrite the function makeNest and remove its call so instead it's an anonymous immediately invoked function expression (IIFE). -
    +# --instructions-- -## Tests -
    +Rewrite the function `makeNest` and remove its call so instead it's an anonymous immediately invoked function expression (IIFE). -```yml -tests: - - text: The function should be anonymous. - testString: assert(/\((function|\(\))(=>|\(\)){?/.test(code.replace(/\s/g, ""))); - - text: Your function should have parentheses at the end of the expression to call it immediately. - testString: assert(/\(.*(\)\(|\}\(\))\)/.test(code.replace(/[\s;]/g, ""))); +# --hints-- +The function should be anonymous. + +```js +assert(/\((function|\(\))(=>|\(\)){?/.test(code.replace(/\s/g, ''))); ``` -
    +Your function should have parentheses at the end of the expression to call it immediately. -## Challenge Seed -
    +```js +assert(/\(.*(\)\(|\}\(\))\)/.test(code.replace(/[\s;]/g, ''))); +``` -
    +# --seed-- + +## --seed-contents-- ```js function makeNest() { @@ -51,15 +48,7 @@ function makeNest() { makeNest(); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js (function () { @@ -67,22 +56,26 @@ makeNest(); })(); ``` +--- + ```js (function () { console.log("A cozy nest is ready"); }()); ``` +--- + ```js (() => { console.log("A cozy nest is ready"); })(); ``` +--- + ```js (() => console.log("A cozy nest is ready") )(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-prototype-chain.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-prototype-chain.md index bfd7cfe08f..e35d86ec84 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-prototype-chain.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-prototype-chain.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301329 --- -## Description -
    -All objects in JavaScript (with a few exceptions) have a prototype. Also, an object’s prototype itself is an object. +# --description-- + +All objects in JavaScript (with a few exceptions) have a `prototype`. Also, an object’s `prototype` itself is an object. ```js function Bird(name) { @@ -17,45 +17,36 @@ function Bird(name) { typeof Bird.prototype; // yields 'object' ``` -Because a prototype is an object, a prototype can have its own prototype! In this case, the prototype of Bird.prototype is Object.prototype: +Because a `prototype` is an object, a `prototype` can have its own `prototype`! In this case, the `prototype` of `Bird.prototype` is `Object.prototype`: ```js Object.prototype.isPrototypeOf(Bird.prototype); // returns true ``` -How is this useful? You may recall the hasOwnProperty method from a previous challenge: +How is this useful? You may recall the `hasOwnProperty` method from a previous challenge: ```js let duck = new Bird("Donald"); duck.hasOwnProperty("name"); // yields true ``` -The hasOwnProperty method is defined in Object.prototype, which can be accessed by Bird.prototype, which can then be accessed by duck. This is an example of the prototype chain. -In this prototype chain, Bird is the supertype for duck, while duck is the subtype. Object is a supertype for both Bird and duck. -Object is a supertype for all objects in JavaScript. Therefore, any object can use the hasOwnProperty method. -
    +The `hasOwnProperty` method is defined in `Object.prototype`, which can be accessed by `Bird.prototype`, which can then be accessed by `duck`. This is an example of the `prototype` chain. In this `prototype` chain, `Bird` is the `supertype` for `duck`, while `duck` is the `subtype`. `Object` is a `supertype` for both `Bird` and `duck`. `Object` is a `supertype` for all objects in JavaScript. Therefore, any object can use the `hasOwnProperty` method. + +# --instructions-- -## Instructions -
    Modify the code to show the correct prototype chain. -
    -## Tests -
    +# --hints-- -```yml -tests: - - text: Your code should show that Object.prototype is the prototype of Dog.prototype - testString: assert(/Object\.prototype\.isPrototypeOf/.test(code)); +Your code should show that `Object.prototype` is the prototype of `Dog.prototype` +```js +assert(/Object\.prototype\.isPrototypeOf/.test(code)); ``` -
    +# --seed-- -## Challenge Seed -
    - -
    +## --seed-contents-- ```js function Dog(name) { @@ -68,18 +59,9 @@ Dog.prototype.isPrototypeOf(beagle); // yields true // Fix the code below so that it evaluates to true ???.isPrototypeOf(Dog.prototype); - ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Dog(name) { @@ -89,5 +71,3 @@ let beagle = new Dog("Snoopy"); Dog.prototype.isPrototypeOf(beagle); Object.prototype.isPrototypeOf(Dog.prototype); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from.md index da44752c9c..81bd8ff1c5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301330 --- -## Description -
    -Just like people inherit genes from their parents, an object inherits its prototype directly from the constructor function that created it. For example, here the Bird constructor creates the duck object: +# --description-- + +Just like people inherit genes from their parents, an object inherits its `prototype` directly from the constructor function that created it. For example, here the `Bird` constructor creates the `duck` object: ```js function Bird(name) { @@ -17,36 +17,28 @@ function Bird(name) { let duck = new Bird("Donald"); ``` -duck inherits its prototype from the Bird constructor function. You can show this relationship with the isPrototypeOf method: +`duck` inherits its `prototype` from the `Bird` constructor function. You can show this relationship with the `isPrototypeOf` method: ```js Bird.prototype.isPrototypeOf(duck); // returns true ``` -
    +# --instructions-- -## Instructions -
    -Use isPrototypeOf to check the prototype of beagle. -
    +Use `isPrototypeOf` to check the `prototype` of `beagle`. -## Tests -
    +# --hints-- -```yml -tests: - - text: You should show that Dog.prototype is the prototype of beagle - testString: assert(/Dog\.prototype\.isPrototypeOf\(beagle\)/.test(code)); +You should show that `Dog.prototype` is the `prototype` of `beagle` +```js +assert(/Dog\.prototype\.isPrototypeOf\(beagle\)/.test(code)); ``` -
    +# --seed-- -## Challenge Seed -
    - -
    +## --seed-contents-- ```js function Dog(name) { @@ -56,19 +48,9 @@ function Dog(name) { let beagle = new Dog("Snoopy"); // Only change code below this line - - ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Dog(name) { @@ -77,5 +59,3 @@ function Dog(name) { let beagle = new Dog("Snoopy"); Dog.prototype.isPrototypeOf(beagle); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-constructor-to-create-objects.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-constructor-to-create-objects.md index f3717bf661..ca0abf7d58 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-constructor-to-create-objects.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-constructor-to-create-objects.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 18233 --- -## Description -
    -Here's the Bird constructor from the previous challenge: +# --description-- + +Here's the `Bird` constructor from the previous challenge: ```js function Bird() { @@ -20,8 +20,7 @@ function Bird() { let blueBird = new Bird(); ``` -Notice that the new operator is used when calling a constructor. This tells JavaScript to create a new instance of Bird called blueBird. Without the new operator, this inside the constructor would not point to the newly created object, giving unexpected results. -Now blueBird has all the properties defined inside the Bird constructor: +Notice that the `new` operator is used when calling a constructor. This tells JavaScript to create a new instance of `Bird` called `blueBird`. Without the `new` operator, `this` inside the constructor would not point to the newly created object, giving unexpected results. Now `blueBird` has all the properties defined inside the `Bird` constructor: ```js blueBird.name; // => Albert @@ -36,31 +35,27 @@ blueBird.name = 'Elvira'; blueBird.name; // => Elvira ``` -
    +# --instructions-- -## Instructions -
    -Use the Dog constructor from the last lesson to create a new instance of Dog, assigning it to a variable hound. -
    +Use the `Dog` constructor from the last lesson to create a new instance of `Dog`, assigning it to a variable `hound`. -## Tests -
    +# --hints-- -```yml -tests: - - text: hound should be created using the Dog constructor. - testString: assert(hound instanceof Dog); - - text: Your code should use the new operator to create an instance of Dog. - testString: assert(code.match(/new/g)); +`hound` should be created using the `Dog` constructor. +```js +assert(hound instanceof Dog); ``` -
    +Your code should use the `new` operator to create an instance of `Dog`. -## Challenge Seed -
    +```js +assert(code.match(/new/g)); +``` -
    +# --seed-- + +## --seed-contents-- ```js function Dog() { @@ -69,19 +64,9 @@ function Dog() { this.numLegs = 4; } // Only change code below this line - - ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Dog() { @@ -91,5 +76,3 @@ function Dog() { } const hound = new Dog(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-mixin-to-add-common-behavior-between-unrelated-objects.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-mixin-to-add-common-behavior-between-unrelated-objects.md index 093d24cd03..225661e088 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-mixin-to-add-common-behavior-between-unrelated-objects.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-mixin-to-add-common-behavior-between-unrelated-objects.md @@ -5,9 +5,10 @@ challengeType: 1 forumTopicId: 301331 --- -## Description -
    -As you have seen, behavior is shared through inheritance. However, there are cases when inheritance is not the best solution. Inheritance does not work well for unrelated objects like Bird and Airplane. They can both fly, but a Bird is not a type of Airplane and vice versa. +# --description-- + +As you have seen, behavior is shared through inheritance. However, there are cases when inheritance is not the best solution. Inheritance does not work well for unrelated objects like `Bird` and `Airplane`. They can both fly, but a `Bird` is not a type of `Airplane` and vice versa. + For unrelated objects, it's better to use mixins. A mixin allows other objects to use a collection of functions. ```js @@ -18,7 +19,7 @@ let flyMixin = function(obj) { }; ``` -The flyMixin takes any object and gives it the fly method. +The `flyMixin` takes any object and gives it the `fly` method. ```js let bird = { @@ -35,41 +36,42 @@ flyMixin(bird); flyMixin(plane); ``` -Here bird and plane are passed into flyMixin, which then assigns the fly function to each object. Now bird and plane can both fly: +Here `bird` and `plane` are passed into `flyMixin`, which then assigns the `fly` function to each object. Now `bird` and `plane` can both fly: ```js bird.fly(); // prints "Flying, wooosh!" plane.fly(); // prints "Flying, wooosh!" ``` -Note how the mixin allows for the same fly method to be reused by unrelated objects bird and plane. -
    +Note how the mixin allows for the same `fly` method to be reused by unrelated objects `bird` and `plane`. -## Instructions -
    -Create a mixin named glideMixin that defines a method named glide. Then use the glideMixin to give both bird and boat the ability to glide. -
    +# --instructions-- -## Tests -
    +Create a mixin named `glideMixin` that defines a method named `glide`. Then use the `glideMixin` to give both `bird` and `boat` the ability to glide. -```yml -tests: - - text: Your code should declare a glideMixin variable that is a function. - testString: assert(typeof glideMixin === "function"); - - text: Your code should use the glideMixin on the bird object to give it the glide method. - testString: assert(typeof bird.glide === "function"); - - text: Your code should use the glideMixin on the boat object to give it the glide method. - testString: assert(typeof boat.glide === "function"); +# --hints-- +Your code should declare a `glideMixin` variable that is a function. + +```js +assert(typeof glideMixin === 'function'); ``` -
    +Your code should use the `glideMixin` on the `bird` object to give it the `glide` method. -## Challenge Seed -
    +```js +assert(typeof bird.glide === 'function'); +``` -
    +Your code should use the `glideMixin` on the `boat` object to give it the `glide` method. + +```js +assert(typeof boat.glide === 'function'); +``` + +# --seed-- + +## --seed-contents-- ```js let bird = { @@ -83,23 +85,9 @@ let boat = { }; // Only change code below this line - - - - - - ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js let bird = { @@ -118,5 +106,3 @@ function glideMixin (obj) { glideMixin(bird); glideMixin(boat); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-an-iife-to-create-a-module.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-an-iife-to-create-a-module.md index d31a3e21c9..fc8a211de5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-an-iife-to-create-a-module.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-an-iife-to-create-a-module.md @@ -5,8 +5,8 @@ challengeType: 1 forumTopicId: 301332 --- -## Description -
    +# --description-- + An immediately invoked function expression (IIFE) is often used to group related functionality into a single object or module. For example, an earlier challenge defined two mixins: ```js @@ -41,41 +41,40 @@ let motionModule = (function () { })(); // The two parentheses cause the function to be immediately invoked ``` -Note that you have an immediately invoked function expression (IIFE) that returns an object motionModule. This returned object contains all of the mixin behaviors as properties of the object. -The advantage of the module pattern is that all of the motion behaviors can be packaged into a single object that can then be used by other parts of your code. Here is an example using it: +Note that you have an immediately invoked function expression (IIFE) that returns an object `motionModule`. This returned object contains all of the mixin behaviors as properties of the object. The advantage of the module pattern is that all of the motion behaviors can be packaged into a single object that can then be used by other parts of your code. Here is an example using it: ```js motionModule.glideMixin(duck); duck.glide(); ``` -
    +# --instructions-- -## Instructions -
    -Create a module named funModule to wrap the two mixins isCuteMixin and singMixin. funModule should return an object. -
    +Create a module named `funModule` to wrap the two mixins `isCuteMixin` and `singMixin`. `funModule` should return an object. -## Tests -
    +# --hints-- -```yml -tests: - - text: funModule should be defined and return an object. - testString: assert(typeof funModule === "object"); - - text: funModule.isCuteMixin should access a function. - testString: assert(typeof funModule.isCuteMixin === "function"); - - text: funModule.singMixin should access a function. - testString: assert(typeof funModule.singMixin === "function"); +`funModule` should be defined and return an object. +```js +assert(typeof funModule === 'object'); ``` -
    +`funModule.isCuteMixin` should access a function. -## Challenge Seed -
    +```js +assert(typeof funModule.isCuteMixin === 'function'); +``` -
    +`funModule.singMixin` should access a function. + +```js +assert(typeof funModule.singMixin === 'function'); +``` + +# --seed-- + +## --seed-contents-- ```js let isCuteMixin = function(obj) { @@ -90,15 +89,7 @@ let singMixin = function(obj) { }; ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js const funModule = (function () { @@ -112,5 +103,3 @@ const funModule = (function () { }; })(); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-closure-to-protect-properties-within-an-object-from-being-modified-externally.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-closure-to-protect-properties-within-an-object-from-being-modified-externally.md index 42047216fc..8351b11e65 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-closure-to-protect-properties-within-an-object-from-being-modified-externally.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-closure-to-protect-properties-within-an-object-from-being-modified-externally.md @@ -1,22 +1,21 @@ --- id: 587d7db2367417b2b2512b8a -title: Use Closure to Protect Properties Within an Object from Being Modified Externally +title: >- + Use Closure to Protect Properties Within an Object from Being Modified + Externally challengeType: 1 forumTopicId: 18234 --- -## Description -
    - -In the previous challenge, bird had a public property name. It is considered public because it can be accessed and changed outside of bird's definition. +# --description-- +In the previous challenge, `bird` had a public property `name`. It is considered public because it can be accessed and changed outside of `bird`'s definition. ```js bird.name = "Duffy"; ``` - -Therefore, any part of your code can easily change the name of bird to any value. Think about things like passwords and bank accounts being easily changeable by any part of your codebase. That could cause a lot of issues. +Therefore, any part of your code can easily change the name of `bird` to any value. Think about things like passwords and bank accounts being easily changeable by any part of your codebase. That could cause a lot of issues. The simplest way to make this public property private is by creating a variable within the constructor function. This changes the scope of that variable to be within the constructor function versus available globally. This way, the variable can only be accessed and changed by methods also within the constructor function. @@ -33,35 +32,35 @@ let ducky = new Bird(); ducky.getHatchedEggCount(); // returns 10 ``` -Here getHatchedEggCount is a privileged method, because it has access to the private variable hatchedEgg. This is possible because hatchedEgg is declared in the same context as getHatchedEggCount. In JavaScript, a function always has access to the context in which it was created. This is called closure. +Here `getHatchedEggCount` is a privileged method, because it has access to the private variable `hatchedEgg`. This is possible because `hatchedEgg` is declared in the same context as `getHatchedEggCount`. In JavaScript, a function always has access to the context in which it was created. This is called `closure`. -
    +# --instructions-- -## Instructions -
    -Change how weight is declared in the Bird function so it is a private variable. Then, create a method getWeight that returns the value of weight 15. -
    +Change how `weight` is declared in the `Bird` function so it is a private variable. Then, create a method `getWeight` that returns the value of `weight` 15. -## Tests -
    +# --hints-- -```yml -tests: - - text: The weight property should be a private variable and should be assigned the value of 15. - testString: assert(code.match(/(var|let|const)\s+weight\s*\=\s*15\;?/g)); - - text: Your code should create a method in Bird called getWeight that returns the value of the private variable weight. - testString: assert((new Bird()).getWeight() === 15); - - text: Your getWeight function should return the private variable weight. - testString: assert(code.match(/((return\s+)|(\(\s*\)\s*\=\>\s*))weight\;?/g)); +The `weight` property should be a private variable and should be assigned the value of `15`. +```js +assert(code.match(/(var|let|const)\s+weight\s*\=\s*15\;?/g)); ``` -
    +Your code should create a method in `Bird` called `getWeight` that returns the value of the private variable `weight`. -## Challenge Seed -
    +```js +assert(new Bird().getWeight() === 15); +``` -
    +Your `getWeight` function should return the private variable `weight`. + +```js +assert(code.match(/((return\s+)|(\(\s*\)\s*\=\>\s*))weight\;?/g)); +``` + +# --seed-- + +## --seed-contents-- ```js function Bird() { @@ -69,18 +68,9 @@ function Bird() { } - ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Bird() { @@ -89,5 +79,3 @@ function Bird() { this.getWeight = () => weight; } ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-dot-notation-to-access-the-properties-of-an-object.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-dot-notation-to-access-the-properties-of-an-object.md index 61f9c93fef..2061fa4c47 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-dot-notation-to-access-the-properties-of-an-object.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-dot-notation-to-access-the-properties-of-an-object.md @@ -5,8 +5,8 @@ challengeType: 1 forumTopicId: 301333 --- -## Description -
    +# --description-- + The last challenge created an object with various properties. Now you'll see how to access the values of those properties. Here's an example: ```js @@ -18,32 +18,29 @@ console.log(duck.name); // This prints "Aflac" to the console ``` -Dot notation is used on the object name, duck, followed by the name of the property, name, to access the value of "Aflac". -
    +Dot notation is used on the object name, `duck`, followed by the name of the property, `name`, to access the value of "Aflac". -## Instructions -
    -Print both properties of the dog object to your console. -
    +# --instructions-- -## Tests -
    +Print both properties of the `dog` object to your console. -```yml -tests: - - text: Your code should use console.log to print the value for the name property of the dog object. - testString: assert(/console.log\(.*dog\.name.*\)/g.test(code)); - - text: Your code should use console.log to print the value for the numLegs property of the dog object. - testString: assert(/console.log\(.*dog\.numLegs.*\)/g.test(code)); +# --hints-- +Your code should use `console.log` to print the value for the `name` property of the `dog` object. + +```js +assert(/console.log\(.*dog\.name.*\)/g.test(code)); ``` -
    +Your code should use `console.log` to print the value for the `numLegs` property of the `dog` object. -## Challenge Seed -
    +```js +assert(/console.log\(.*dog\.numLegs.*\)/g.test(code)); +``` -
    +# --seed-- + +## --seed-contents-- ```js let dog = { @@ -51,19 +48,9 @@ let dog = { numLegs: 4 }; // Only change code below this line - - ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js let dog = { @@ -73,5 +60,3 @@ let dog = { console.log(dog.name); console.log(dog.numLegs); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-inheritance-so-you-dont-repeat-yourself.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-inheritance-so-you-dont-repeat-yourself.md index 9c9a6aef81..344b4cd613 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-inheritance-so-you-dont-repeat-yourself.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-inheritance-so-you-dont-repeat-yourself.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301334 --- -## Description -
    +# --description-- + There's a principle in programming called Don't Repeat Yourself (DRY). The reason repeated code is a problem is because any change requires fixing code in multiple places. This usually means more work for programmers and more room for errors. -Notice in the example below that the describe method is shared by Bird and Dog: + +Notice in the example below that the `describe` method is shared by `Bird` and `Dog`: ```js Bird.prototype = { @@ -26,7 +27,7 @@ Dog.prototype = { }; ``` -The describe method is repeated in two places. The code can be edited to follow the DRY principle by creating a supertype (or parent) called Animal: +The `describe` method is repeated in two places. The code can be edited to follow the DRY principle by creating a `supertype` (or parent) called `Animal`: ```js function Animal() { }; @@ -39,7 +40,7 @@ Animal.prototype = { }; ``` -Since Animal includes the describe method, you can remove it from Bird and Dog: +Since `Animal` includes the `describe` method, you can remove it from `Bird` and `Dog`: ```js Bird.prototype = { @@ -51,33 +52,33 @@ Dog.prototype = { }; ``` -
    +# --instructions-- -## Instructions -
    -The eat method is repeated in both Cat and Bear. Edit the code in the spirit of DRY by moving the eat method to the Animal supertype. -
    +The `eat` method is repeated in both `Cat` and `Bear`. Edit the code in the spirit of DRY by moving the `eat` method to the `Animal` `supertype`. -## Tests -
    +# --hints-- -```yml -tests: - - text: Animal.prototype should have the eat property. - testString: assert(Animal.prototype.hasOwnProperty('eat')); - - text: Bear.prototype should not have the eat property. - testString: assert(!(Bear.prototype.hasOwnProperty('eat'))); - - text: Cat.prototype should not have the eat property. - testString: assert(!(Cat.prototype.hasOwnProperty('eat'))); +`Animal.prototype` should have the `eat` property. +```js +assert(Animal.prototype.hasOwnProperty('eat')); ``` -
    +`Bear.prototype` should not have the `eat` property. -## Challenge Seed -
    +```js +assert(!Bear.prototype.hasOwnProperty('eat')); +``` -
    +`Cat.prototype` should not have the `eat` property. + +```js +assert(!Cat.prototype.hasOwnProperty('eat')); +``` + +# --seed-- + +## --seed-contents-- ```js function Cat(name) { @@ -110,15 +111,7 @@ Animal.prototype = { }; ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Cat(name) { @@ -146,5 +139,3 @@ Animal.prototype = { } }; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md index 3a158e252d..6e7b718338 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md @@ -5,53 +5,54 @@ challengeType: 1 forumTopicId: 301336 --- -## Description -
    -Since numLegs will probably have the same value for all instances of Bird, you essentially have a duplicated variable numLegs inside each Bird instance. +# --description-- + +Since `numLegs` will probably have the same value for all instances of `Bird`, you essentially have a duplicated variable `numLegs` inside each `Bird` instance. + This may not be an issue when there are only two instances, but imagine if there are millions of instances. That would be a lot of duplicated variables. -A better way is to use Bird’s prototype. Properties in the prototype are shared among ALL instances of Bird. Here's how to add numLegs to the Bird prototype: + +A better way is to use `Bird’s` `prototype`. Properties in the `prototype` are shared among ALL instances of `Bird`. Here's how to add `numLegs` to the `Bird prototype`: ```js Bird.prototype.numLegs = 2; ``` -Now all instances of Bird have the numLegs property. +Now all instances of `Bird` have the `numLegs` property. ```js console.log(duck.numLegs); // prints 2 console.log(canary.numLegs); // prints 2 ``` -Since all instances automatically have the properties on the prototype, think of a prototype as a "recipe" for creating objects. -Note that the prototype for duck and canary is part of the Bird constructor as Bird.prototype. Nearly every object in JavaScript has a prototype property which is part of the constructor function that created it. -
    +Since all instances automatically have the properties on the `prototype`, think of a `prototype` as a "recipe" for creating objects. Note that the `prototype` for `duck` and `canary` is part of the `Bird` constructor as `Bird.prototype`. Nearly every object in JavaScript has a `prototype` property which is part of the constructor function that created it. +# --instructions-- -## Instructions -
    -Add a numLegs property to the prototype of Dog -
    +Add a `numLegs` property to the `prototype` of `Dog` -## Tests -
    +# --hints-- -```yml -tests: - - text: beagle should have a numLegs property. - testString: assert(beagle.numLegs !== undefined); - - text: beagle.numLegs should be a number. - testString: assert(typeof(beagle.numLegs) === 'number' ); - - text: numLegs should be a prototype property not an own property. - testString: assert(beagle.hasOwnProperty('numLegs') === false); +`beagle` should have a `numLegs` property. +```js +assert(beagle.numLegs !== undefined); ``` -
    +`beagle.numLegs` should be a number. -## Challenge Seed -
    +```js +assert(typeof beagle.numLegs === 'number'); +``` -
    +`numLegs` should be a `prototype` property not an `own` property. + +```js +assert(beagle.hasOwnProperty('numLegs') === false); +``` + +# --seed-- + +## --seed-contents-- ```js function Dog(name) { @@ -64,15 +65,7 @@ function Dog(name) { let beagle = new Dog("Snoopy"); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function Dog (name) { @@ -81,5 +74,3 @@ function Dog (name) { Dog.prototype.numLegs = 4; let beagle = new Dog("Snoopy"); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/verify-an-objects-constructor-with-instanceof.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/verify-an-objects-constructor-with-instanceof.md index 4aea7e6904..6961da711c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/verify-an-objects-constructor-with-instanceof.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/object-oriented-programming/verify-an-objects-constructor-with-instanceof.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301337 --- -## Description -
    -Anytime a constructor function creates a new object, that object is said to be an instance of its constructor. JavaScript gives a convenient way to verify this with the instanceof operator. instanceof allows you to compare an object to a constructor, returning true or false based on whether or not that object was created with the constructor. Here's an example: +# --description-- + +Anytime a constructor function creates a new object, that object is said to be an instance of its constructor. JavaScript gives a convenient way to verify this with the `instanceof` operator. `instanceof` allows you to compare an object to a constructor, returning `true` or `false` based on whether or not that object was created with the constructor. Here's an example: ```js let Bird = function(name, color) { @@ -21,7 +21,7 @@ let crow = new Bird("Alexis", "black"); crow instanceof Bird; // => true ``` -If an object is created without using a constructor, instanceof will verify that it is not an instance of that constructor: +If an object is created without using a constructor, `instanceof` will verify that it is not an instance of that constructor: ```js let canary = { @@ -33,31 +33,27 @@ let canary = { canary instanceof Bird; // => false ``` -
    +# --instructions-- -## Instructions -
    -Create a new instance of the House constructor, calling it myHouse and passing a number of bedrooms. Then, use instanceof to verify that it is an instance of House. -
    +Create a new instance of the `House` constructor, calling it `myHouse` and passing a number of bedrooms. Then, use `instanceof` to verify that it is an instance of `House`. -## Tests -
    +# --hints-- -```yml -tests: - - text: myHouse should have a numBedrooms attribute set to a number. - testString: assert(typeof myHouse.numBedrooms === 'number'); - - text: You should verify that myHouse is an instance of House using the instanceof operator. - testString: assert(/myHouse\s*instanceof\s*House/.test(code)); +`myHouse` should have a `numBedrooms` attribute set to a number. +```js +assert(typeof myHouse.numBedrooms === 'number'); ``` -
    +You should verify that `myHouse` is an instance of `House` using the `instanceof` operator. -## Challenge Seed -
    +```js +assert(/myHouse\s*instanceof\s*House/.test(code)); +``` -
    +# --seed-- + +## --seed-contents-- ```js function House(numBedrooms) { @@ -65,20 +61,9 @@ function House(numBedrooms) { } // Only change code below this line - - - ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js function House(numBedrooms) { @@ -87,5 +72,3 @@ function House(numBedrooms) { const myHouse = new House(4); console.log(myHouse instanceof House); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-all-or-none.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-all-or-none.md index 100473323e..73c233c8dc 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-all-or-none.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-all-or-none.md @@ -5,10 +5,12 @@ challengeType: 1 forumTopicId: 301338 --- -## Description -
    +# --description-- + Sometimes the patterns you want to search for may have parts of it that may or may not exist. However, it may be important to check for them nonetheless. -You can specify the possible existence of an element with a question mark, ?. This checks for zero or one of the preceding element. You can think of this symbol as saying the previous element is optional. + +You can specify the possible existence of an element with a question mark, `?`. This checks for zero or one of the preceding element. You can think of this symbol as saying the previous element is optional. + For example, there are slight differences in American and British English and you can use the question mark to match both spellings. ```js @@ -19,35 +21,43 @@ rainbowRegex.test(american); // Returns true rainbowRegex.test(british); // Returns true ``` -
    +# --instructions-- -## Instructions -
    -Change the regex favRegex to match both the American English (favorite) and the British English (favourite) version of the word. -
    +Change the regex `favRegex` to match both the American English (favorite) and the British English (favourite) version of the word. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your regex should use the optional symbol, ?. - testString: favRegex.lastIndex = 0; assert(favRegex.source.match(/\?/).length > 0); - - text: Your regex should match "favorite" - testString: favRegex.lastIndex = 0; assert(favRegex.test("favorite")); - - text: Your regex should match "favourite" - testString: favRegex.lastIndex = 0; assert(favRegex.test("favourite")); - - text: Your regex should not match "fav" - testString: favRegex.lastIndex = 0; assert(!favRegex.test("fav")); +Your regex should use the optional symbol, `?`. +```js +favRegex.lastIndex = 0; +assert(favRegex.source.match(/\?/).length > 0); ``` -
    +Your regex should match `"favorite"` -## Challenge Seed -
    +```js +favRegex.lastIndex = 0; +assert(favRegex.test('favorite')); +``` -
    +Your regex should match `"favourite"` + +```js +favRegex.lastIndex = 0; +assert(favRegex.test('favourite')); +``` + +Your regex should not match `"fav"` + +```js +favRegex.lastIndex = 0; +assert(!favRegex.test('fav')); +``` + +# --seed-- + +## --seed-contents-- ```js let favWord = "favorite"; @@ -55,19 +65,10 @@ let favRegex = /change/; // Change this line let result = favRegex.test(favWord); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let favWord = "favorite"; let favRegex = /favou?r/; let result = favRegex.test(favWord); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-mixed-grouping-of-characters.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-mixed-grouping-of-characters.md index fa707aa514..1e8cdcb0c2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-mixed-grouping-of-characters.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-mixed-grouping-of-characters.md @@ -5,11 +5,13 @@ challengeType: 1 forumTopicId: 301339 --- -## Description -
    -Sometimes we want to check for groups of characters using a Regular Expression and to achieve that we use parentheses (). -If you want to find either Penguin or Pumpkin in a string, you can use the following Regular Expression: /P(engu|umpk)in/g -Then check whether the desired string groups are in the test string by using the test() method. +# --description-- + +Sometimes we want to check for groups of characters using a Regular Expression and to achieve that we use parentheses `()`. + +If you want to find either `Penguin` or `Pumpkin` in a string, you can use the following Regular Expression: `/P(engu|umpk)in/g` + +Then check whether the desired string groups are in the test string by using the `test()` method. ```js let testStr = "Pumpkin"; @@ -18,39 +20,57 @@ testRegex.test(testStr); // Returns true ``` -
    +# --instructions-- -## Instructions -
    -Fix the regex so that it checks for the names of Franklin Roosevelt or Eleanor Roosevelt in a case sensitive manner and it should make concessions for middle names. -Then fix the code so that the regex that you have created is checked against myString and either true or false is returned depending on whether the regex matches. -
    +Fix the regex so that it checks for the names of `Franklin Roosevelt` or `Eleanor Roosevelt` in a case sensitive manner and it should make concessions for middle names. -## Tests -
    +Then fix the code so that the regex that you have created is checked against `myString` and either `true` or `false` is returned depending on whether the regex matches. -```yml -tests: - - text: Your regex myRegex should return true for the string Franklin D. Roosevelt - testString: myRegex.lastIndex = 0; assert(myRegex.test('Franklin D. Roosevelt')); - - text: Your regex myRegex should return true for the string Eleanor Roosevelt - testString: myRegex.lastIndex = 0; assert(myRegex.test('Eleanor Roosevelt')); - - text: Your regex myRegex should return false for the string Franklin Rosevelt - testString: myRegex.lastIndex = 0; assert(!myRegex.test('Franklin Rosevelt')); - - text: Your regex myRegex should return false for the string Frank Roosevelt - testString: myRegex.lastIndex = 0; assert(!myRegex.test('Frank Roosevelt')); - - text: You should use .test() to test the regex. - testString: assert(code.match(/myRegex.test\(\s*myString\s*\)/)); - - text: Your result should return true. - testString: assert(result === true); +# --hints-- + +Your regex `myRegex` should return `true` for the string `Franklin D. Roosevelt` + +```js +myRegex.lastIndex = 0; +assert(myRegex.test('Franklin D. Roosevelt')); ``` -
    +Your regex `myRegex` should return `true` for the string `Eleanor Roosevelt` -## Challenge Seed -
    +```js +myRegex.lastIndex = 0; +assert(myRegex.test('Eleanor Roosevelt')); +``` -
    +Your regex `myRegex` should return `false` for the string `Franklin Rosevelt` + +```js +myRegex.lastIndex = 0; +assert(!myRegex.test('Franklin Rosevelt')); +``` + +Your regex `myRegex` should return `false` for the string `Frank Roosevelt` + +```js +myRegex.lastIndex = 0; +assert(!myRegex.test('Frank Roosevelt')); +``` + +You should use `.test()` to test the regex. + +```js +assert(code.match(/myRegex.test\(\s*myString\s*\)/)); +``` + +Your result should return `true`. + +```js +assert(result === true); +``` + +# --seed-- + +## --seed-contents-- ```js let myString = "Eleanor Roosevelt"; @@ -59,19 +79,10 @@ let result = false; // Change this line // After passing the challenge experiment with myString and see how the grouping works ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let myString = "Eleanor Roosevelt"; let myRegex = /(Franklin|Eleanor).*Roosevelt/; let result = myRegex.test(myString); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/extract-matches.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/extract-matches.md index 5b7a7dcba6..2fa4863d22 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/extract-matches.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/extract-matches.md @@ -5,10 +5,12 @@ challengeType: 1 forumTopicId: 301340 --- -## Description -
    -So far, you have only been checking if a pattern exists or not within a string. You can also extract the actual matches you found with the .match() method. -To use the .match() method, apply the method on a string and pass in the regex inside the parentheses. +# --description-- + +So far, you have only been checking if a pattern exists or not within a string. You can also extract the actual matches you found with the `.match()` method. + +To use the `.match()` method, apply the method on a string and pass in the regex inside the parentheses. + Here's an example: ```js @@ -27,33 +29,33 @@ Note that the `.match` syntax is the "opposite" of the `.test` method you have b /regex/.test('string'); ``` -
    +# --instructions-- -## Instructions -
    -Apply the .match() method to extract the word coding. -
    +Apply the `.match()` method to extract the word `coding`. -## Tests -
    +# --hints-- -```yml -tests: - - text: The result should have the word coding - testString: assert(result.join() === "coding"); - - text: Your regex codingRegex should search for coding - testString: assert(codingRegex.source === "coding"); - - text: You should use the .match() method. - testString: assert(code.match(/\.match\(.*\)/)); +The `result` should have the word `coding` +```js +assert(result.join() === 'coding'); ``` -
    +Your regex `codingRegex` should search for `coding` -## Challenge Seed -
    +```js +assert(codingRegex.source === 'coding'); +``` -
    +You should use the `.match()` method. + +```js +assert(code.match(/\.match\(.*\)/)); +``` + +# --seed-- + +## --seed-contents-- ```js let extractStr = "Extract the word 'coding' from this string."; @@ -61,19 +63,10 @@ let codingRegex = /change/; // Change this line let result = extractStr; // Change this line ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let extractStr = "Extract the word 'coding' from this string."; let codingRegex = /coding/; // Change this line let result = extractStr.match(codingRegex); // Change this line ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/find-characters-with-lazy-matching.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/find-characters-with-lazy-matching.md index c0ce1feeee..3b9358c2f2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/find-characters-with-lazy-matching.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/find-characters-with-lazy-matching.md @@ -5,40 +5,46 @@ challengeType: 1 forumTopicId: 301341 --- -## Description -
    +# --description-- + In regular expressions, a greedy match finds the longest possible part of a string that fits the regex pattern and returns it as a match. The alternative is called a lazy match, which finds the smallest possible part of the string that satisfies the regex pattern. -You can apply the regex /t[a-z]*i/ to the string "titanic". This regex is basically a pattern that starts with t, ends with i, and has some letters in between. -Regular expressions are by default greedy, so the match would return ["titani"]. It finds the largest sub-string possible to fit the pattern. -However, you can use the ? character to change it to lazy matching. "titanic" matched against the adjusted regex of /t[a-z]*?i/ returns ["ti"]. -Note
    Parsing HTML with regular expressions should be avoided, but pattern matching an HTML string with regular expressions is completely fine. -
    -## Instructions -
    -Fix the regex /<.*>/ to return the HTML tag <h1> and not the text "<h1>Winter is coming</h1>". Remember the wildcard . in a regular expression matches any character. -
    +You can apply the regex `/t[a-z]*i/` to the string `"titanic"`. This regex is basically a pattern that starts with `t`, ends with `i`, and has some letters in between. -## Tests -
    +Regular expressions are by default greedy, so the match would return `["titani"]`. It finds the largest sub-string possible to fit the pattern. -```yml -tests: - - text: The result variable should be an array with <h1> in it - testString: assert(result[0] == '

    '); - - text: myRegex should use lazy matching - testString: assert(/\?/g.test(myRegex)); - - text: myRegex should not include the string 'h1' - testString: assert(!myRegex.source.match('h1')); +However, you can use the `?` character to change it to lazy matching. `"titanic"` matched against the adjusted regex of `/t[a-z]*?i/` returns `["ti"]`. +**Note** +Parsing HTML with regular expressions should be avoided, but pattern matching an HTML string with regular expressions is completely fine. + +# --instructions-- + +Fix the regex `/<.*>/` to return the HTML tag `

    ` and not the text `"

    Winter is coming

    "`. Remember the wildcard `.` in a regular expression matches any character. + +# --hints-- + +The `result` variable should be an array with `

    ` in it + +```js +assert(result[0] == '

    '); ``` -

    +`myRegex` should use lazy matching -## Challenge Seed -
    +```js +assert(/\?/g.test(myRegex)); +``` -
    +`myRegex` should not include the string 'h1' + +```js +assert(!myRegex.source.match('h1')); +``` + +# --seed-- + +## --seed-contents-- ```js let text = "

    Winter is coming

    "; @@ -46,19 +52,10 @@ let myRegex = /<.*>/; // Change this line let result = text.match(myRegex); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let text = "

    Winter is coming

    "; let myRegex = /<.*?>/; // Change this line let result = text.match(myRegex); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/find-more-than-the-first-match.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/find-more-than-the-first-match.md index 65e6e1ec5b..9d20ec5f31 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/find-more-than-the-first-match.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/find-more-than-the-first-match.md @@ -5,8 +5,8 @@ challengeType: 1 forumTopicId: 301342 --- -## Description -
    +# --description-- + So far, you have only been able to extract or search a pattern once. ```js @@ -16,7 +16,7 @@ testStr.match(ourRegex); // Returns ["Repeat"] ``` -To search or extract a pattern more than once, you can use the g flag. +To search or extract a pattern more than once, you can use the `g` flag. ```js let repeatRegex = /Repeat/g; @@ -24,36 +24,48 @@ testStr.match(repeatRegex); // Returns ["Repeat", "Repeat", "Repeat"] ``` -
    +# --instructions-- -## Instructions -
    -Using the regex starRegex, find and extract both "Twinkle" words from the string twinkleStar. -Note
    You can have multiple flags on your regex like /search/gi -
    +Using the regex `starRegex`, find and extract both `"Twinkle"` words from the string `twinkleStar`. -## Tests -
    +**Note** +You can have multiple flags on your regex like `/search/gi` -```yml -tests: - - text: Your regex starRegex should use the global flag g - testString: assert(starRegex.flags.match(/g/).length == 1); - - text: Your regex starRegex should use the case insensitive flag i - testString: assert(starRegex.flags.match(/i/).length == 1); - - text: Your match should match both occurrences of the word "Twinkle" - testString: assert(result.sort().join() == twinkleStar.match(/twinkle/gi).sort().join()); - - text: Your match result should have two elements in it. - testString: assert(result.length == 2); +# --hints-- +Your regex `starRegex` should use the global flag `g` + +```js +assert(starRegex.flags.match(/g/).length == 1); ``` -
    +Your regex `starRegex` should use the case insensitive flag `i` -## Challenge Seed -
    +```js +assert(starRegex.flags.match(/i/).length == 1); +``` -
    +Your match should match both occurrences of the word `"Twinkle"` + +```js +assert( + result.sort().join() == + twinkleStar + .match(/twinkle/gi) + .sort() + .join() +); +``` + +Your match `result` should have two elements in it. + +```js +assert(result.length == 2); +``` + +# --seed-- + +## --seed-contents-- ```js let twinkleStar = "Twinkle, twinkle, little star"; @@ -61,19 +73,10 @@ let starRegex = /change/; // Change this line let result = twinkleStar; // Change this line ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let twinkleStar = "Twinkle, twinkle, little star"; let starRegex = /twinkle/gi; let result = twinkleStar.match(starRegex); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/find-one-or-more-criminals-in-a-hunt.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/find-one-or-more-criminals-in-a-hunt.md index 5d99506be8..f82fded4ce 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/find-one-or-more-criminals-in-a-hunt.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/find-one-or-more-criminals-in-a-hunt.md @@ -5,11 +5,13 @@ challengeType: 1 forumTopicId: 301343 --- -## Description -
    +# --description-- + Time to pause and test your new regex writing skills. A group of criminals escaped from jail and ran away, but you don't know how many. However, you do know that they stay close together when they are around other people. You are responsible for finding all of the criminals at once. + Here's an example to review how to do this: -The regex /z+/ matches the letter z when it appears one or more times in a row. It would find matches in all of the following strings: + +The regex `/z+/` matches the letter `z` when it appears one or more times in a row. It would find matches in all of the following strings: ```js "z" @@ -19,7 +21,7 @@ The regex /z+/ matches the letter z when it appears on "abczzzzzzzzzzzzzzzzzzzzzabc" ``` -But it does not find matches in the following strings since there are no letter z characters: +But it does not find matches in the following strings since there are no letter `z` characters: ```js "" @@ -27,58 +29,77 @@ But it does not find matches in the following strings since there are no letter "abcabc" ``` -
    +# --instructions-- -## Instructions -
    -Write a greedy regex that finds one or more criminals within a group of other people. A criminal is represented by the capital letter C. -
    +Write a greedy regex that finds one or more criminals within a group of other people. A criminal is represented by the capital letter `C`. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your regex should match one criminal (C) in "C" - testString: assert('C'.match(reCriminals) && 'C'.match(reCriminals)[0] == 'C'); - - text: Your regex should match two criminals (CC) in "CC" - testString: assert('CC'.match(reCriminals) && 'CC'.match(reCriminals)[0] == 'CC'); - - text: Your regex should match three criminals (CCC) in "P1P5P4CCCP2P6P3" - testString: assert('P1P5P4CCCP2P6P3'.match(reCriminals) && 'P1P5P4CCCP2P6P3'.match(reCriminals)[0] == 'CCC'); - - text: Your regex should match five criminals (CCCCC) in "P6P2P7P4P5CCCCCP3P1" - testString: assert('P6P2P7P4P5CCCCCP3P1'.match(reCriminals) && 'P6P2P7P4P5CCCCCP3P1'.match(reCriminals)[0] == 'CCCCC'); - - text: Your regex should not match any criminals in "" - testString: assert(!reCriminals.test('')); - - text: Your regex should not match any criminals in "P1P2P3" - testString: assert(!reCriminals.test('P1P2P3')); - - text: Your regex should match fifty criminals (CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC) in "P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3". - testString: assert('P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match(reCriminals) && 'P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match(reCriminals)[0] == "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC"); +Your regex should match one criminal (`C`) in `"C"` +```js +assert('C'.match(reCriminals) && 'C'.match(reCriminals)[0] == 'C'); ``` -
    +Your regex should match two criminals (`CC`) in `"CC"` -## Challenge Seed -
    +```js +assert('CC'.match(reCriminals) && 'CC'.match(reCriminals)[0] == 'CC'); +``` -
    +Your regex should match three criminals (`CCC`) in `"P1P5P4CCCP2P6P3"` + +```js +assert( + 'P1P5P4CCCP2P6P3'.match(reCriminals) && + 'P1P5P4CCCP2P6P3'.match(reCriminals)[0] == 'CCC' +); +``` + +Your regex should match five criminals (`CCCCC`) in `"P6P2P7P4P5CCCCCP3P1"` + +```js +assert( + 'P6P2P7P4P5CCCCCP3P1'.match(reCriminals) && + 'P6P2P7P4P5CCCCCP3P1'.match(reCriminals)[0] == 'CCCCC' +); +``` + +Your regex should not match any criminals in `""` + +```js +assert(!reCriminals.test('')); +``` + +Your regex should not match any criminals in `"P1P2P3"` + +```js +assert(!reCriminals.test('P1P2P3')); +``` + +Your regex should match fifty criminals (`CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC`) in `"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3"`. + +```js +assert( + 'P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match( + reCriminals + ) && + 'P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match( + reCriminals + )[0] == 'CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC' +); +``` + +# --seed-- + +## --seed-contents-- ```js let reCriminals = /./; // Change this line - ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let reCriminals = /C+/; // Change this line ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/ignore-case-while-matching.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/ignore-case-while-matching.md index b5556fdfa8..0df5b5b2eb 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/ignore-case-while-matching.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/ignore-case-while-matching.md @@ -5,52 +5,83 @@ challengeType: 1 forumTopicId: 301344 --- -## Description -
    +# --description-- + Up until now, you've looked at regexes to do literal matches of strings. But sometimes, you might want to also match case differences. -Case (or sometimes letter case) is the difference between uppercase letters and lowercase letters. Examples of uppercase are "A", "B", and "C". Examples of lowercase are "a", "b", and "c". -You can match both cases using what is called a flag. There are other flags but here you'll focus on the flag that ignores case - the i flag. You can use it by appending it to the regex. An example of using this flag is /ignorecase/i. This regex can match the strings "ignorecase", "igNoreCase", and "IgnoreCase". -
    -## Instructions -
    -Write a regex fccRegex to match "freeCodeCamp", no matter its case. Your regex should not match any abbreviations or variations with spaces. -
    +Case (or sometimes letter case) is the difference between uppercase letters and lowercase letters. Examples of uppercase are `"A"`, `"B"`, and `"C"`. Examples of lowercase are `"a"`, `"b"`, and `"c"`. -## Tests -
    +You can match both cases using what is called a flag. There are other flags but here you'll focus on the flag that ignores case - the `i` flag. You can use it by appending it to the regex. An example of using this flag is `/ignorecase/i`. This regex can match the strings `"ignorecase"`, `"igNoreCase"`, and `"IgnoreCase"`. -```yml -tests: - - text: Your regex should match freeCodeCamp - testString: assert(fccRegex.test('freeCodeCamp')); - - text: Your regex should match FreeCodeCamp - testString: assert(fccRegex.test('FreeCodeCamp')); - - text: Your regex should match FreecodeCamp - testString: assert(fccRegex.test('FreecodeCamp')); - - text: Your regex should match FreeCodecamp - testString: assert(fccRegex.test('FreeCodecamp')); - - text: Your regex should not match Free Code Camp - testString: assert(!fccRegex.test('Free Code Camp')); - - text: Your regex should match FreeCOdeCamp - testString: assert(fccRegex.test('FreeCOdeCamp')); - - text: Your regex should not match FCC - testString: assert(!fccRegex.test('FCC')); - - text: Your regex should match FrEeCoDeCamp - testString: assert(fccRegex.test('FrEeCoDeCamp')); - - text: Your regex should match FrEeCodECamp - testString: assert(fccRegex.test('FrEeCodECamp')); - - text: Your regex should match FReeCodeCAmp - testString: assert(fccRegex.test('FReeCodeCAmp')); +# --instructions-- +Write a regex `fccRegex` to match `"freeCodeCamp"`, no matter its case. Your regex should not match any abbreviations or variations with spaces. + +# --hints-- + +Your regex should match `freeCodeCamp` + +```js +assert(fccRegex.test('freeCodeCamp')); ``` -
    +Your regex should match `FreeCodeCamp` -## Challenge Seed -
    +```js +assert(fccRegex.test('FreeCodeCamp')); +``` -
    +Your regex should match `FreecodeCamp` + +```js +assert(fccRegex.test('FreecodeCamp')); +``` + +Your regex should match `FreeCodecamp` + +```js +assert(fccRegex.test('FreeCodecamp')); +``` + +Your regex should not match `Free Code Camp` + +```js +assert(!fccRegex.test('Free Code Camp')); +``` + +Your regex should match `FreeCOdeCamp` + +```js +assert(fccRegex.test('FreeCOdeCamp')); +``` + +Your regex should not match `FCC` + +```js +assert(!fccRegex.test('FCC')); +``` + +Your regex should match `FrEeCoDeCamp` + +```js +assert(fccRegex.test('FrEeCoDeCamp')); +``` + +Your regex should match `FrEeCodECamp` + +```js +assert(fccRegex.test('FrEeCodECamp')); +``` + +Your regex should match `FReeCodeCAmp` + +```js +assert(fccRegex.test('FReeCodeCAmp')); +``` + +# --seed-- + +## --seed-contents-- ```js let myString = "freeCodeCamp"; @@ -58,19 +89,10 @@ let fccRegex = /change/; // Change this line let result = fccRegex.test(myString); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let myString = "freeCodeCamp"; let fccRegex = /freecodecamp/i; // Change this line let result = fccRegex.test(myString); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-a-literal-string-with-different-possibilities.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-a-literal-string-with-different-possibilities.md index 6e3ce62c66..d1de07fbd0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-a-literal-string-with-different-possibilities.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-a-literal-string-with-different-possibilities.md @@ -5,47 +5,67 @@ challengeType: 1 forumTopicId: 301345 --- -## Description -
    -Using regexes like /coding/, you can look for the pattern "coding" in another string. -This is powerful to search single strings, but it's limited to only one pattern. You can search for multiple patterns using the alternation or OR operator: |. -This operator matches patterns either before or after it. For example, if you wanted to match "yes" or "no", the regex you want is /yes|no/. -You can also search for more than just two patterns. You can do this by adding more patterns with more OR operators separating them, like /yes|no|maybe/. -
    +# --description-- -## Instructions -
    -Complete the regex petRegex to match the pets "dog", "cat", "bird", or "fish". -
    +Using regexes like `/coding/`, you can look for the pattern `"coding"` in another string. -## Tests -
    +This is powerful to search single strings, but it's limited to only one pattern. You can search for multiple patterns using the `alternation` or `OR` operator: `|`. -```yml -tests: - - text: Your regex petRegex should return true for the string "John has a pet dog." - testString: assert(petRegex.test('John has a pet dog.')); - - text: Your regex petRegex should return false for the string "Emma has a pet rock." - testString: assert(!petRegex.test('Emma has a pet rock.')); - - text: Your regex petRegex should return true for the string "Emma has a pet bird." - testString: assert(petRegex.test('Emma has a pet bird.')); - - text: Your regex petRegex should return true for the string "Liz has a pet cat." - testString: assert(petRegex.test('Liz has a pet cat.')); - - text: Your regex petRegex should return false for the string "Kara has a pet dolphin." - testString: assert(!petRegex.test('Kara has a pet dolphin.')); - - text: Your regex petRegex should return true for the string "Alice has a pet fish." - testString: assert(petRegex.test('Alice has a pet fish.')); - - text: Your regex petRegex should return false for the string "Jimmy has a pet computer." - testString: assert(!petRegex.test('Jimmy has a pet computer.')); +This operator matches patterns either before or after it. For example, if you wanted to match `"yes"` or `"no"`, the regex you want is `/yes|no/`. +You can also search for more than just two patterns. You can do this by adding more patterns with more `OR` operators separating them, like `/yes|no|maybe/`. + +# --instructions-- + +Complete the regex `petRegex` to match the pets `"dog"`, `"cat"`, `"bird"`, or `"fish"`. + +# --hints-- + +Your regex `petRegex` should return `true` for the string `"John has a pet dog."` + +```js +assert(petRegex.test('John has a pet dog.')); ``` -
    +Your regex `petRegex` should return `false` for the string `"Emma has a pet rock."` -## Challenge Seed -
    +```js +assert(!petRegex.test('Emma has a pet rock.')); +``` -
    +Your regex `petRegex` should return `true` for the string `"Emma has a pet bird."` + +```js +assert(petRegex.test('Emma has a pet bird.')); +``` + +Your regex `petRegex` should return `true` for the string `"Liz has a pet cat."` + +```js +assert(petRegex.test('Liz has a pet cat.')); +``` + +Your regex `petRegex` should return `false` for the string `"Kara has a pet dolphin."` + +```js +assert(!petRegex.test('Kara has a pet dolphin.')); +``` + +Your regex `petRegex` should return `true` for the string `"Alice has a pet fish."` + +```js +assert(petRegex.test('Alice has a pet fish.')); +``` + +Your regex `petRegex` should return `false` for the string `"Jimmy has a pet computer."` + +```js +assert(!petRegex.test('Jimmy has a pet computer.')); +``` + +# --seed-- + +## --seed-contents-- ```js let petString = "James has a pet cat."; @@ -53,19 +73,10 @@ let petRegex = /change/; // Change this line let result = petRegex.test(petString); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let petString = "James has a pet cat."; let petRegex = /dog|cat|bird|fish/; // Change this line let result = petRegex.test(petString); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-letters-and-numbers.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-letters-and-numbers.md index b70aa5a375..71880bbee5 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-letters-and-numbers.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-letters-and-numbers.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301346 --- -## Description -
    -Using character classes, you were able to search for all letters of the alphabet with [a-z]. This kind of character class is common enough that there is a shortcut for it, although it includes a few extra characters as well. -The closest character class in JavaScript to match the alphabet is \w. This shortcut is equal to [A-Za-z0-9_]. This character class matches upper and lowercase letters plus numbers. Note, this character class also includes the underscore character (_). +# --description-- + +Using character classes, you were able to search for all letters of the alphabet with `[a-z]`. This kind of character class is common enough that there is a shortcut for it, although it includes a few extra characters as well. + +The closest character class in JavaScript to match the alphabet is `\w`. This shortcut is equal to `[A-Za-z0-9_]`. This character class matches upper and lowercase letters plus numbers. Note, this character class also includes the underscore character (`_`). ```js let longHand = /[A-Za-z0-9_]+/; @@ -22,39 +23,62 @@ shortHand.test(varNames); // Returns true ``` These shortcut character classes are also known as shorthand character classes. -
    -## Instructions -
    -Use the shorthand character class \w to count the number of alphanumeric characters in various quotes and strings. -
    +# --instructions-- -## Tests -
    +Use the shorthand character class `\w` to count the number of alphanumeric characters in various quotes and strings. -```yml -tests: - - text: Your regex should use the global flag. - testString: assert(alphabetRegexV2.global); - - text: Your regex should use the shorthand character \w to match all characters which are alphanumeric. - testString: assert(/\\w/.test(alphabetRegexV2.source)); - - text: Your regex should find 31 alphanumeric characters in "The five boxing wizards jump quickly." - testString: assert("The five boxing wizards jump quickly.".match(alphabetRegexV2).length === 31); - - text: Your regex should find 32 alphanumeric characters in "Pack my box with five dozen liquor jugs." - testString: assert("Pack my box with five dozen liquor jugs.".match(alphabetRegexV2).length === 32); - - text: Your regex should find 30 alphanumeric characters in "How vexingly quick daft zebras jump!" - testString: assert("How vexingly quick daft zebras jump!".match(alphabetRegexV2).length === 30); - - text: Your regex should find 36 alphanumeric characters in "123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ." - testString: assert("123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.".match(alphabetRegexV2).length === 36); +# --hints-- +Your regex should use the global flag. + +```js +assert(alphabetRegexV2.global); ``` -
    +Your regex should use the shorthand character `\w` to match all characters which are alphanumeric. -## Challenge Seed -
    +```js +assert(/\\w/.test(alphabetRegexV2.source)); +``` -
    +Your regex should find 31 alphanumeric characters in `"The five boxing wizards jump quickly."` + +```js +assert( + 'The five boxing wizards jump quickly.'.match(alphabetRegexV2).length === 31 +); +``` + +Your regex should find 32 alphanumeric characters in `"Pack my box with five dozen liquor jugs."` + +```js +assert( + 'Pack my box with five dozen liquor jugs.'.match(alphabetRegexV2).length === + 32 +); +``` + +Your regex should find 30 alphanumeric characters in `"How vexingly quick daft zebras jump!"` + +```js +assert( + 'How vexingly quick daft zebras jump!'.match(alphabetRegexV2).length === 30 +); +``` + +Your regex should find 36 alphanumeric characters in `"123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ."` + +```js +assert( + '123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.'.match(alphabetRegexV2) + .length === 36 +); +``` + +# --seed-- + +## --seed-contents-- ```js let quoteSample = "The five boxing wizards jump quickly."; @@ -62,19 +86,10 @@ let alphabetRegexV2 = /change/; // Change this line let result = quoteSample.match(alphabetRegexV2).length; ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let quoteSample = "The five boxing wizards jump quickly."; let alphabetRegexV2 = /\w/g; // Change this line let result = quoteSample.match(alphabetRegexV2).length; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-non-numbers.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-non-numbers.md index aba3730e70..24f62e7c9b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-non-numbers.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-non-numbers.md @@ -5,47 +5,69 @@ challengeType: 1 forumTopicId: 301347 --- -## Description -
    -The last challenge showed how to search for digits using the shortcut \d with a lowercase d. You can also search for non-digits using a similar shortcut that uses an uppercase D instead. -The shortcut to look for non-digit characters is \D. This is equal to the character class [^0-9], which looks for a single character that is not a number between zero and nine. -
    +# --description-- -## Instructions -
    -Use the shorthand character class for non-digits \D to count how many non-digits are in movie titles. -
    +The last challenge showed how to search for digits using the shortcut `\d` with a lowercase `d`. You can also search for non-digits using a similar shortcut that uses an uppercase `D` instead. -## Tests -
    +The shortcut to look for non-digit characters is `\D`. This is equal to the character class `[^0-9]`, which looks for a single character that is not a number between zero and nine. -```yml -tests: - - text: Your regex should use the shortcut character to match non-digit characters - testString: assert(/\\D/.test(noNumRegex.source)); - - text: Your regex should use the global flag. - testString: assert(noNumRegex.global); - - text: Your regex should find no non-digits in "9". - testString: assert("9".match(noNumRegex) == null); - - text: Your regex should find 6 non-digits in "Catch 22". - testString: assert("Catch 22".match(noNumRegex).length == 6); - - text: Your regex should find 11 non-digits in "101 Dalmatians". - testString: assert("101 Dalmatians".match(noNumRegex).length == 11); - - text: Your regex should find 15 non-digits in "One, Two, Three". - testString: assert("One, Two, Three".match(noNumRegex).length == 15); - - text: Your regex should find 12 non-digits in "21 Jump Street". - testString: assert("21 Jump Street".match(noNumRegex).length == 12); - - text: 'Your regex should find 17 non-digits in "2001: A Space Odyssey".' - testString: 'assert("2001: A Space Odyssey".match(noNumRegex).length == 17);' +# --instructions-- +Use the shorthand character class for non-digits `\D` to count how many non-digits are in movie titles. + +# --hints-- + +Your regex should use the shortcut character to match non-digit characters + +```js +assert(/\\D/.test(noNumRegex.source)); ``` -
    +Your regex should use the global flag. -## Challenge Seed -
    +```js +assert(noNumRegex.global); +``` -
    +Your regex should find no non-digits in `"9"`. + +```js +assert('9'.match(noNumRegex) == null); +``` + +Your regex should find 6 non-digits in `"Catch 22"`. + +```js +assert('Catch 22'.match(noNumRegex).length == 6); +``` + +Your regex should find 11 non-digits in `"101 Dalmatians"`. + +```js +assert('101 Dalmatians'.match(noNumRegex).length == 11); +``` + +Your regex should find 15 non-digits in `"One, Two, Three"`. + +```js +assert('One, Two, Three'.match(noNumRegex).length == 15); +``` + +Your regex should find 12 non-digits in `"21 Jump Street"`. + +```js +assert('21 Jump Street'.match(noNumRegex).length == 12); +``` + +Your regex should find 17 non-digits in `"2001: A Space Odyssey"`. + +```js +assert('2001: A Space Odyssey'.match(noNumRegex).length == 17); +``` + +# --seed-- + +## --seed-contents-- ```js let movieName = "2001: A Space Odyssey"; @@ -53,19 +75,10 @@ let noNumRegex = /change/; // Change this line let result = movieName.match(noNumRegex).length; ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let movieName = "2001: A Space Odyssey"; let noNumRegex = /\D/g; // Change this line let result = movieName.match(noNumRegex).length; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-numbers.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-numbers.md index 30c5665a01..a71568545f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-numbers.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-numbers.md @@ -5,47 +5,69 @@ challengeType: 1 forumTopicId: 18181 --- -## Description -
    +# --description-- + You've learned shortcuts for common string patterns like alphanumerics. Another common pattern is looking for just digits or numbers. -The shortcut to look for digit characters is \d, with a lowercase d. This is equal to the character class [0-9], which looks for a single character of any number between zero and nine. -
    -## Instructions -
    -Use the shorthand character class \d to count how many digits are in movie titles. Written out numbers ("six" instead of 6) do not count. -
    +The shortcut to look for digit characters is `\d`, with a lowercase `d`. This is equal to the character class `[0-9]`, which looks for a single character of any number between zero and nine. -## Tests -
    +# --instructions-- -```yml -tests: - - text: Your regex should use the shortcut character to match digit characters - testString: assert(/\\d/.test(numRegex.source)); - - text: Your regex should use the global flag. - testString: assert(numRegex.global); - - text: Your regex should find 1 digit in "9". - testString: assert("9".match(numRegex).length == 1); - - text: Your regex should find 2 digits in "Catch 22". - testString: assert("Catch 22".match(numRegex).length == 2); - - text: Your regex should find 3 digits in "101 Dalmatians". - testString: assert("101 Dalmatians".match(numRegex).length == 3); - - text: Your regex should find no digits in "One, Two, Three". - testString: assert("One, Two, Three".match(numRegex) == null); - - text: Your regex should find 2 digits in "21 Jump Street". - testString: assert("21 Jump Street".match(numRegex).length == 2); - - text: 'Your regex should find 4 digits in "2001: A Space Odyssey".' - testString: 'assert("2001: A Space Odyssey".match(numRegex).length == 4);' +Use the shorthand character class `\d` to count how many digits are in movie titles. Written out numbers ("six" instead of 6) do not count. +# --hints-- + +Your regex should use the shortcut character to match digit characters + +```js +assert(/\\d/.test(numRegex.source)); ``` -
    +Your regex should use the global flag. -## Challenge Seed -
    +```js +assert(numRegex.global); +``` -
    +Your regex should find 1 digit in `"9"`. + +```js +assert('9'.match(numRegex).length == 1); +``` + +Your regex should find 2 digits in `"Catch 22"`. + +```js +assert('Catch 22'.match(numRegex).length == 2); +``` + +Your regex should find 3 digits in `"101 Dalmatians"`. + +```js +assert('101 Dalmatians'.match(numRegex).length == 3); +``` + +Your regex should find no digits in `"One, Two, Three"`. + +```js +assert('One, Two, Three'.match(numRegex) == null); +``` + +Your regex should find 2 digits in `"21 Jump Street"`. + +```js +assert('21 Jump Street'.match(numRegex).length == 2); +``` + +Your regex should find 4 digits in `"2001: A Space Odyssey"`. + +```js +assert('2001: A Space Odyssey'.match(numRegex).length == 4); +``` + +# --seed-- + +## --seed-contents-- ```js let movieName = "2001: A Space Odyssey"; @@ -53,20 +75,10 @@ let numRegex = /change/; // Change this line let result = movieName.match(numRegex).length; ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let movieName = "2001: A Space Odyssey"; let numRegex = /\d/g; // Change this line let result = movieName.match(numRegex).length; - ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-anything-with-wildcard-period.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-anything-with-wildcard-period.md index 64453ad431..d6bbd7cf80 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-anything-with-wildcard-period.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-anything-with-wildcard-period.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301348 --- -## Description -
    -Sometimes you won't (or don't need to) know the exact characters in your patterns. Thinking of all words that match, say, a misspelling would take a long time. Luckily, you can save time using the wildcard character: . -The wildcard character . will match any one character. The wildcard is also called dot and period. You can use the wildcard character just like any other character in the regex. For example, if you wanted to match "hug", "huh", "hut", and "hum", you can use the regex /hu./ to match all four words. +# --description-- + +Sometimes you won't (or don't need to) know the exact characters in your patterns. Thinking of all words that match, say, a misspelling would take a long time. Luckily, you can save time using the wildcard character: `.` + +The wildcard character `.` will match any one character. The wildcard is also called `dot` and `period`. You can use the wildcard character just like any other character in the regex. For example, if you wanted to match `"hug"`, `"huh"`, `"hut"`, and `"hum"`, you can use the regex `/hu./` to match all four words. ```js let humStr = "I'll hum a song"; @@ -18,47 +19,87 @@ huRegex.test(humStr); // Returns true huRegex.test(hugStr); // Returns true ``` -
    +# --instructions-- -## Instructions -
    -Complete the regex unRegex so that it matches the strings "run", "sun", "fun", "pun", "nun", and "bun". Your regex should use the wildcard character. -
    +Complete the regex `unRegex` so that it matches the strings `"run"`, `"sun"`, `"fun"`, `"pun"`, `"nun"`, and `"bun"`. Your regex should use the wildcard character. -## Tests -
    +# --hints-- -```yml -tests: - - text: You should use the .test() method. - testString: assert(code.match(/\.test\(.*\)/)); - - text: You should use the wildcard character in your regex unRegex - testString: assert(/\./.test(unRegex.source)); - - text: Your regex unRegex should match "run" in "Let us go on a run." - testString: unRegex.lastIndex = 0; assert(unRegex.test("Let us go on a run.")); - - text: Your regex unRegex should match "sun" in "The sun is out today." - testString: unRegex.lastIndex = 0; assert(unRegex.test("The sun is out today.")); - - text: Your regex unRegex should match "fun" in "Coding is a lot of fun." - testString: unRegex.lastIndex = 0; assert(unRegex.test("Coding is a lot of fun.")); - - text: Your regex unRegex should match "pun" in "Seven days without a pun makes one weak." - testString: unRegex.lastIndex = 0; assert(unRegex.test("Seven days without a pun makes one weak.")); - - text: Your regex unRegex should match "nun" in "One takes a vow to be a nun." - testString: unRegex.lastIndex = 0; assert(unRegex.test("One takes a vow to be a nun.")); - - text: Your regex unRegex should match "bun" in "She got fired from the hot dog stand for putting her hair in a bun." - testString: unRegex.lastIndex = 0; assert(unRegex.test("She got fired from the hot dog stand for putting her hair in a bun.")); - - text: Your regex unRegex should not match "There is a bug in my code." - testString: unRegex.lastIndex = 0; assert(!unRegex.test("There is a bug in my code.")); - - text: Your regex unRegex should not match "Catch me if you can." - testString: unRegex.lastIndex = 0; assert(!unRegex.test("Catch me if you can.")); +You should use the `.test()` method. +```js +assert(code.match(/\.test\(.*\)/)); ``` -
    +You should use the wildcard character in your regex `unRegex` -## Challenge Seed -
    +```js +assert(/\./.test(unRegex.source)); +``` -
    +Your regex `unRegex` should match `"run"` in `"Let us go on a run."` + +```js +unRegex.lastIndex = 0; +assert(unRegex.test('Let us go on a run.')); +``` + +Your regex `unRegex` should match `"sun"` in `"The sun is out today."` + +```js +unRegex.lastIndex = 0; +assert(unRegex.test('The sun is out today.')); +``` + +Your regex `unRegex` should match `"fun"` in `"Coding is a lot of fun."` + +```js +unRegex.lastIndex = 0; +assert(unRegex.test('Coding is a lot of fun.')); +``` + +Your regex `unRegex` should match `"pun"` in `"Seven days without a pun makes one weak."` + +```js +unRegex.lastIndex = 0; +assert(unRegex.test('Seven days without a pun makes one weak.')); +``` + +Your regex `unRegex` should match `"nun"` in `"One takes a vow to be a nun."` + +```js +unRegex.lastIndex = 0; +assert(unRegex.test('One takes a vow to be a nun.')); +``` + +Your regex `unRegex` should match `"bun"` in `"She got fired from the hot dog stand for putting her hair in a bun."` + +```js +unRegex.lastIndex = 0; +assert( + unRegex.test( + 'She got fired from the hot dog stand for putting her hair in a bun.' + ) +); +``` + +Your regex `unRegex` should not match `"There is a bug in my code."` + +```js +unRegex.lastIndex = 0; +assert(!unRegex.test('There is a bug in my code.')); +``` + +Your regex `unRegex` should not match `"Catch me if you can."` + +```js +unRegex.lastIndex = 0; +assert(!unRegex.test('Catch me if you can.')); +``` + +# --seed-- + +## --seed-contents-- ```js let exampleStr = "Let's have fun with regular expressions!"; @@ -66,19 +107,10 @@ let unRegex = /change/; // Change this line let result = unRegex.test(exampleStr); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let exampleStr = "Let's have fun with regular expressions!"; let unRegex = /.un/; // Change this line let result = unRegex.test(exampleStr); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-beginning-string-patterns.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-beginning-string-patterns.md index 53cec980b7..b368e35148 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-beginning-string-patterns.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-beginning-string-patterns.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301349 --- -## Description -
    +# --description-- + Prior challenges showed that regular expressions can be used to look for a number of matches. They are also used to search for patterns in specific positions in strings. -In an earlier challenge, you used the caret character (^) inside a character set to create a negated character set in the form [^thingsThatWillNotBeMatched]. Outside of a character set, the caret is used to search for patterns at the beginning of strings. + +In an earlier challenge, you used the caret character (`^`) inside a character set to create a negated character set in the form `[^thingsThatWillNotBeMatched]`. Outside of a character set, the caret is used to search for patterns at the beginning of strings. ```js let firstString = "Ricky is first and can be found."; @@ -20,35 +21,39 @@ firstRegex.test(notFirst); // Returns false ``` -
    +# --instructions-- -## Instructions -
    -Use the caret character in a regex to find "Cal" only in the beginning of the string rickyAndCal. -
    +Use the caret character in a regex to find `"Cal"` only in the beginning of the string `rickyAndCal`. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your regex should search for "Cal" with a capital letter. - testString: assert(calRegex.source == "^Cal"); - - text: Your regex should not use any flags. - testString: assert(calRegex.flags == ""); - - text: Your regex should match "Cal" at the beginning of the string. - testString: assert(calRegex.test("Cal and Ricky both like racing.")); - - text: Your regex should not match "Cal" in the middle of a string. - testString: assert(!calRegex.test("Ricky and Cal both like racing.")); +Your regex should search for `"Cal"` with a capital letter. +```js +assert(calRegex.source == '^Cal'); ``` -
    +Your regex should not use any flags. -## Challenge Seed -
    +```js +assert(calRegex.flags == ''); +``` -
    +Your regex should match `"Cal"` at the beginning of the string. + +```js +assert(calRegex.test('Cal and Ricky both like racing.')); +``` + +Your regex should not match `"Cal"` in the middle of a string. + +```js +assert(!calRegex.test('Ricky and Cal both like racing.')); +``` + +# --seed-- + +## --seed-contents-- ```js let rickyAndCal = "Cal and Ricky both like racing."; @@ -56,19 +61,10 @@ let calRegex = /change/; // Change this line let result = calRegex.test(rickyAndCal); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let rickyAndCal = "Cal and Ricky both like racing."; let calRegex = /^Cal/; // Change this line let result = calRegex.test(rickyAndCal); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-one-or-more-times.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-one-or-more-times.md index 06b035f4bd..ec224b377d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-one-or-more-times.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-one-or-more-times.md @@ -5,39 +5,43 @@ challengeType: 1 forumTopicId: 301350 --- -## Description -
    +# --description-- + Sometimes, you need to match a character (or group of characters) that appears one or more times in a row. This means it occurs at least once, and may be repeated. -You can use the + character to check if that is the case. Remember, the character or pattern has to be present consecutively. That is, the character has to repeat one after the other. -For example, /a+/g would find one match in "abc" and return ["a"]. Because of the +, it would also find a single match in "aabc" and return ["aa"]. -If it were instead checking the string "abab", it would find two matches and return ["a", "a"] because the a characters are not in a row - there is a b between them. Finally, since there is no "a" in the string "bcd", it wouldn't find a match. -
    -## Instructions -
    -You want to find matches when the letter s occurs one or more times in "Mississippi". Write a regex that uses the + sign. -
    +You can use the `+` character to check if that is the case. Remember, the character or pattern has to be present consecutively. That is, the character has to repeat one after the other. -## Tests -
    +For example, `/a+/g` would find one match in `"abc"` and return `["a"]`. Because of the `+`, it would also find a single match in `"aabc"` and return `["aa"]`. -```yml -tests: - - text: Your regex myRegex should use the + sign to match one or more s characters. - testString: assert(/\+/.test(myRegex.source)); - - text: Your regex myRegex should match 2 items. - testString: assert(result.length == 2); - - text: The result variable should be an array with two matches of "ss" - testString: assert(result[0] == 'ss' && result[1] == 'ss'); +If it were instead checking the string `"abab"`, it would find two matches and return `["a", "a"]` because the `a` characters are not in a row - there is a `b` between them. Finally, since there is no `"a"` in the string `"bcd"`, it wouldn't find a match. +# --instructions-- + +You want to find matches when the letter `s` occurs one or more times in `"Mississippi"`. Write a regex that uses the `+` sign. + +# --hints-- + +Your regex `myRegex` should use the `+` sign to match one or more `s` characters. + +```js +assert(/\+/.test(myRegex.source)); ``` -
    +Your regex `myRegex` should match 2 items. -## Challenge Seed -
    +```js +assert(result.length == 2); +``` -
    +The `result` variable should be an array with two matches of `"ss"` + +```js +assert(result[0] == 'ss' && result[1] == 'ss'); +``` + +# --seed-- + +## --seed-contents-- ```js let difficultSpelling = "Mississippi"; @@ -45,19 +49,10 @@ let myRegex = /change/; // Change this line let result = difficultSpelling.match(myRegex); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let difficultSpelling = "Mississippi"; let myRegex = /s+/g; // Change this line let result = difficultSpelling.match(myRegex); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-zero-or-more-times.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-zero-or-more-times.md index 6a7002db80..63e4e642d3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-zero-or-more-times.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-zero-or-more-times.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301351 --- -## Description -
    -The last challenge used the plus + sign to look for characters that occur one or more times. There's also an option that matches characters that occur zero or more times. -The character to do this is the asterisk or star: *. +# --description-- + +The last challenge used the plus `+` sign to look for characters that occur one or more times. There's also an option that matches characters that occur zero or more times. + +The character to do this is the asterisk or star: `*`. ```js let soccerWord = "gooooooooal!"; @@ -20,39 +21,61 @@ gPhrase.match(goRegex); // Returns ["g"] oPhrase.match(goRegex); // Returns null ``` -
    +# --instructions-- -## Instructions -
    -For this challenge, chewieQuote has been initialized as "Aaaaaaaaaaaaaaaarrrgh!" behind the scenes. Create a regex chewieRegex that uses the * character to match an uppercase "A" character immediately followed by zero or more lowercase "a" characters in chewieQuote. Your regex does not need flags or character classes, and it should not match any of the other quotes. -
    +For this challenge, `chewieQuote` has been initialized as "Aaaaaaaaaaaaaaaarrrgh!" behind the scenes. Create a regex `chewieRegex` that uses the `*` character to match an uppercase `"A"` character immediately followed by zero or more lowercase `"a"` characters in `chewieQuote`. Your regex does not need flags or character classes, and it should not match any of the other quotes. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your regex chewieRegex should use the * character to match zero or more a characters. - testString: assert(/\*/.test(chewieRegex.source)); - - text: Your regex should match "A" in chewieQuote. - testString: assert(result[0][0] === 'A'); - - text: Your regex should match "Aaaaaaaaaaaaaaaa" in chewieQuote. - testString: assert(result[0] === 'Aaaaaaaaaaaaaaaa'); - - text: Your regex chewieRegex should match 16 characters in chewieQuote. - testString: assert(result[0].length === 16); - - text: Your regex should not match any characters in "He made a fair move. Screaming about it can't help you." - testString: assert(!"He made a fair move. Screaming about it can't help you.".match(chewieRegex)); - - text: Your regex should not match any characters in "Let him have it. It's not wise to upset a Wookiee." - testString: assert(!"Let him have it. It's not wise to upset a Wookiee.".match(chewieRegex)); +Your regex `chewieRegex` should use the `*` character to match zero or more `a` characters. +```js +assert(/\*/.test(chewieRegex.source)); ``` -
    +Your regex should match `"A"` in `chewieQuote`. -## Challenge Seed -
    +```js +assert(result[0][0] === 'A'); +``` -
    +Your regex should match `"Aaaaaaaaaaaaaaaa"` in `chewieQuote`. + +```js +assert(result[0] === 'Aaaaaaaaaaaaaaaa'); +``` + +Your regex `chewieRegex` should match 16 characters in `chewieQuote`. + +```js +assert(result[0].length === 16); +``` + +Your regex should not match any characters in "He made a fair move. Screaming about it can't help you." + +```js +assert( + !"He made a fair move. Screaming about it can't help you.".match(chewieRegex) +); +``` + +Your regex should not match any characters in "Let him have it. It's not wise to upset a Wookiee." + +```js +assert( + !"Let him have it. It's not wise to upset a Wookiee.".match(chewieRegex) +); +``` + +# --seed-- + +## --before-user-code-- + +```js +const chewieQuote = "Aaaaaaaaaaaaaaaarrrgh!"; +``` + +## --seed-contents-- ```js // Only change code below this line @@ -62,25 +85,9 @@ let chewieRegex = /change/; // Change this line let result = chewieQuote.match(chewieRegex); ``` -
    - -## Before Test -
    - -```js -const chewieQuote = "Aaaaaaaaaaaaaaaarrrgh!"; -``` - -
    - -
    - -## Solution -
    +# --solutions-- ```js let chewieRegex = /Aa*/; let result = chewieQuote.match(chewieRegex); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-ending-string-patterns.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-ending-string-patterns.md index 686bb9191b..1b0ab41a4d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-ending-string-patterns.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-ending-string-patterns.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301352 --- -## Description -
    +# --description-- + In the last challenge, you learned to use the caret character to search for patterns at the beginning of strings. There is also a way to search for patterns at the end of strings. -You can search the end of strings using the dollar sign character $ at the end of the regex. + +You can search the end of strings using the dollar sign character `$` at the end of the regex. ```js let theEnding = "This is a never ending story"; @@ -21,33 +22,33 @@ storyRegex.test(noEnding); ``` -
    +# --instructions-- -## Instructions -
    -Use the anchor character ($) to match the string "caboose" at the end of the string caboose. -
    +Use the anchor character (`$`) to match the string `"caboose"` at the end of the string `caboose`. -## Tests -
    +# --hints-- -```yml -tests: - - text: You should search for "caboose" with the dollar sign $ anchor in your regex. - testString: assert(lastRegex.source == "caboose$"); - - text: Your regex should not use any flags. - testString: assert(lastRegex.flags == ""); - - text: You should match "caboose" at the end of the string "The last car on a train is the caboose" - testString: assert(lastRegex.test("The last car on a train is the caboose")); +You should search for `"caboose"` with the dollar sign `$` anchor in your regex. +```js +assert(lastRegex.source == 'caboose$'); ``` -
    +Your regex should not use any flags. -## Challenge Seed -
    +```js +assert(lastRegex.flags == ''); +``` -
    +You should match `"caboose"` at the end of the string `"The last car on a train is the caboose"` + +```js +assert(lastRegex.test('The last car on a train is the caboose')); +``` + +# --seed-- + +## --seed-contents-- ```js let caboose = "The last car on a train is the caboose"; @@ -55,19 +56,10 @@ let lastRegex = /change/; // Change this line let result = lastRegex.test(caboose); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let caboose = "The last car on a train is the caboose"; let lastRegex = /caboose$/; // Change this line let result = lastRegex.test(caboose); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-everything-but-letters-and-numbers.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-everything-but-letters-and-numbers.md index a6cc0ee91a..bc37b5cbab 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-everything-but-letters-and-numbers.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-everything-but-letters-and-numbers.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301353 --- -## Description -
    -You've learned that you can use a shortcut to match alphanumerics [A-Za-z0-9_] using \w. A natural pattern you might want to search for is the opposite of alphanumerics. -You can search for the opposite of the \w with \W. Note, the opposite pattern uses a capital letter. This shortcut is the same as [^A-Za-z0-9_]. +# --description-- + +You've learned that you can use a shortcut to match alphanumerics `[A-Za-z0-9_]` using `\w`. A natural pattern you might want to search for is the opposite of alphanumerics. + +You can search for the opposite of the `\w` with `\W`. Note, the opposite pattern uses a capital letter. This shortcut is the same as `[^A-Za-z0-9_]`. ```js let shortHand = /\W/; @@ -18,39 +19,60 @@ numbers.match(shortHand); // Returns ["%"] sentence.match(shortHand); // Returns ["!"] ``` -
    +# --instructions-- -## Instructions -
    -Use the shorthand character class \W to count the number of non-alphanumeric characters in various quotes and strings. -
    +Use the shorthand character class `\W` to count the number of non-alphanumeric characters in various quotes and strings. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your regex should use the global flag. - testString: assert(nonAlphabetRegex.global); - - text: Your regex should find 6 non-alphanumeric characters in "The five boxing wizards jump quickly.". - testString: assert("The five boxing wizards jump quickly.".match(nonAlphabetRegex).length == 6); - - text: Your regex should use the shorthand character to match characters which are non-alphanumeric. - testString: assert(/\\W/.test(nonAlphabetRegex.source)); - - text: Your regex should find 8 non-alphanumeric characters in "Pack my box with five dozen liquor jugs." - testString: assert("Pack my box with five dozen liquor jugs.".match(nonAlphabetRegex).length == 8); - - text: Your regex should find 6 non-alphanumeric characters in "How vexingly quick daft zebras jump!" - testString: assert("How vexingly quick daft zebras jump!".match(nonAlphabetRegex).length == 6); - - text: Your regex should find 12 non-alphanumeric characters in "123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ." - testString: assert("123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.".match(nonAlphabetRegex).length == 12); +Your regex should use the global flag. +```js +assert(nonAlphabetRegex.global); ``` -
    +Your regex should find 6 non-alphanumeric characters in `"The five boxing wizards jump quickly."`. -## Challenge Seed -
    +```js +assert( + 'The five boxing wizards jump quickly.'.match(nonAlphabetRegex).length == 6 +); +``` -
    +Your regex should use the shorthand character to match characters which are non-alphanumeric. + +```js +assert(/\\W/.test(nonAlphabetRegex.source)); +``` + +Your regex should find 8 non-alphanumeric characters in `"Pack my box with five dozen liquor jugs."` + +```js +assert( + 'Pack my box with five dozen liquor jugs.'.match(nonAlphabetRegex).length == 8 +); +``` + +Your regex should find 6 non-alphanumeric characters in `"How vexingly quick daft zebras jump!"` + +```js +assert( + 'How vexingly quick daft zebras jump!'.match(nonAlphabetRegex).length == 6 +); +``` + +Your regex should find 12 non-alphanumeric characters in `"123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ."` + +```js +assert( + '123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.'.match(nonAlphabetRegex) + .length == 12 +); +``` + +# --seed-- + +## --seed-contents-- ```js let quoteSample = "The five boxing wizards jump quickly."; @@ -58,19 +80,10 @@ let nonAlphabetRegex = /change/; // Change this line let result = quoteSample.match(nonAlphabetRegex).length; ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let quoteSample = "The five boxing wizards_jump quickly."; let nonAlphabetRegex = /\W/g; // Change this line let result = quoteSample.match(nonAlphabetRegex).length; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-letters-of-the-alphabet.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-letters-of-the-alphabet.md index 021113a0b6..4e412ff249 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-letters-of-the-alphabet.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-letters-of-the-alphabet.md @@ -5,11 +5,13 @@ challengeType: 1 forumTopicId: 301354 --- -## Description -
    +# --description-- + You saw how you can use character sets to specify a group of characters to match, but that's a lot of typing when you need to match a large range of characters (for example, every letter in the alphabet). Fortunately, there is a built-in feature that makes this short and simple. -Inside a character set, you can define a range of characters to match using a hyphen character: -. -For example, to match lowercase letters a through e you would use [a-e]. + +Inside a character set, you can define a range of characters to match using a hyphen character: `-`. + +For example, to match lowercase letters `a` through `e` you would use `[a-e]`. ```js let catStr = "cat"; @@ -21,34 +23,36 @@ batStr.match(bgRegex); // Returns ["bat"] matStr.match(bgRegex); // Returns null ``` -
    +# --instructions-- -## Instructions -
    -Match all the letters in the string quoteSample. -Note
    Be sure to match both upper- and lowercase letters. -
    +Match all the letters in the string `quoteSample`. -## Tests -
    +**Note** +Be sure to match both upper- and lowercase **letters**.\*\*\*\* -```yml -tests: - - text: Your regex alphabetRegex should match 35 items. - testString: assert(result.length == 35); - - text: Your regex alphabetRegex should use the global flag. - testString: assert(alphabetRegex.flags.match(/g/).length == 1); - - text: Your regex alphabetRegex should use the case insensitive flag. - testString: assert(alphabetRegex.flags.match(/i/).length == 1); +# --hints-- +Your regex `alphabetRegex` should match 35 items. + +```js +assert(result.length == 35); ``` -
    +Your regex `alphabetRegex` should use the global flag. -## Challenge Seed -
    +```js +assert(alphabetRegex.flags.match(/g/).length == 1); +``` -
    +Your regex `alphabetRegex` should use the case insensitive flag. + +```js +assert(alphabetRegex.flags.match(/i/).length == 1); +``` + +# --seed-- + +## --seed-contents-- ```js let quoteSample = "The quick brown fox jumps over the lazy dog."; @@ -56,19 +60,10 @@ let alphabetRegex = /change/; // Change this line let result = alphabetRegex; // Change this line ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let quoteSample = "The quick brown fox jumps over the lazy dog."; let alphabetRegex = /[a-z]/gi; // Change this line let result = quoteSample.match(alphabetRegex); // Change this line ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-literal-strings.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-literal-strings.md index 7cbe69b4ce..cb2dd2f305 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-literal-strings.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-literal-strings.md @@ -5,9 +5,9 @@ challengeType: 1 forumTopicId: 301355 --- -## Description -
    -In the last challenge, you searched for the word "Hello" using the regular expression /Hello/. That regex searched for a literal match of the string "Hello". Here's another example searching for a literal match of the string "Kevin": +# --description-- + +In the last challenge, you searched for the word `"Hello"` using the regular expression `/Hello/`. That regex searched for a literal match of the string `"Hello"`. Here's another example searching for a literal match of the string `"Kevin"`: ```js let testStr = "Hello, my name is Kevin."; @@ -16,7 +16,7 @@ testRegex.test(testStr); // Returns true ``` -Any other forms of "Kevin" will not match. For example, the regex /Kevin/ will not match "kevin" or "KEVIN". +Any other forms of `"Kevin"` will not match. For example, the regex `/Kevin/` will not match `"kevin"` or `"KEVIN"`. ```js let wrongRegex = /kevin/; @@ -25,33 +25,34 @@ wrongRegex.test(testStr); ``` A future challenge will show how to match those other forms as well. -
    -## Instructions -
    -Complete the regex waldoRegex to find "Waldo" in the string waldoIsHiding with a literal match. -
    +# --instructions-- -## Tests -
    +Complete the regex `waldoRegex` to find `"Waldo"` in the string `waldoIsHiding` with a literal match. -```yml -tests: - - text: Your regex waldoRegex should find "Waldo" - testString: assert(waldoRegex.test(waldoIsHiding)); - - text: Your regex waldoRegex should not search for anything else. - testString: assert(!waldoRegex.test('Somewhere is hiding in this text.')); - - text: You should perform a literal string match with your regex. - testString: assert(!/\/.*\/i/.test(code)); +# --hints-- +Your regex `waldoRegex` should find `"Waldo"` + +```js +assert(waldoRegex.test(waldoIsHiding)); ``` -
    +Your regex `waldoRegex` should not search for anything else. -## Challenge Seed -
    +```js +assert(!waldoRegex.test('Somewhere is hiding in this text.')); +``` -
    +You should perform a literal string match with your regex. + +```js +assert(!/\/.*\/i/.test(code)); +``` + +# --seed-- + +## --seed-contents-- ```js let waldoIsHiding = "Somewhere Waldo is hiding in this text."; @@ -59,19 +60,10 @@ let waldoRegex = /search/; // Change this line let result = waldoRegex.test(waldoIsHiding); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let waldoIsHiding = "Somewhere Waldo is hiding in this text."; let waldoRegex = /Waldo/; // Change this line let result = waldoRegex.test(waldoIsHiding); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-non-whitespace-characters.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-non-whitespace-characters.md index 1155d2a366..2e46f3c21c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-non-whitespace-characters.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-non-whitespace-characters.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 18210 --- -## Description -
    -You learned about searching for whitespace using \s, with a lowercase s. You can also search for everything except whitespace. -Search for non-whitespace using \S, which is an uppercase s. This pattern will not match whitespace, carriage return, tab, form feed, and new line characters. You can think of it being similar to the character class [^ \r\t\f\n\v]. +# --description-- + +You learned about searching for whitespace using `\s`, with a lowercase `s`. You can also search for everything except whitespace. + +Search for non-whitespace using `\S`, which is an uppercase `s`. This pattern will not match whitespace, carriage return, tab, form feed, and new line characters. You can think of it being similar to the character class `[^ \r\t\f\n\v]`. ```js let whiteSpace = "Whitespace. Whitespace everywhere!" @@ -16,37 +17,48 @@ let nonSpaceRegex = /\S/g; whiteSpace.match(nonSpaceRegex).length; // Returns 32 ``` -
    +# --instructions-- -## Instructions -
    -Change the regex countNonWhiteSpace to look for multiple non-whitespace characters in a string. -
    +Change the regex `countNonWhiteSpace` to look for multiple non-whitespace characters in a string. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your regex should use the global flag. - testString: assert(countNonWhiteSpace.global); - - text: Your regex should use the shorthand character \S to match all non-whitespace characters. - testString: assert(/\\S/.test(countNonWhiteSpace.source)); - - text: Your regex should find 35 non-spaces in "Men are from Mars and women are from Venus." - testString: assert("Men are from Mars and women are from Venus.".match(countNonWhiteSpace).length == 35); - - text: 'Your regex should find 23 non-spaces in "Space: the final frontier."' - testString: 'assert("Space: the final frontier.".match(countNonWhiteSpace).length == 23);' - - text: Your regex should find 21 non-spaces in "MindYourPersonalSpace" - testString: assert("MindYourPersonalSpace".match(countNonWhiteSpace).length == 21); +Your regex should use the global flag. +```js +assert(countNonWhiteSpace.global); ``` -
    +Your regex should use the shorthand character `\S` to match all non-whitespace characters. -## Challenge Seed -
    +```js +assert(/\\S/.test(countNonWhiteSpace.source)); +``` -
    +Your regex should find 35 non-spaces in `"Men are from Mars and women are from Venus."` + +```js +assert( + 'Men are from Mars and women are from Venus.'.match(countNonWhiteSpace) + .length == 35 +); +``` + +Your regex should find 23 non-spaces in `"Space: the final frontier."` + +```js +assert('Space: the final frontier.'.match(countNonWhiteSpace).length == 23); +``` + +Your regex should find 21 non-spaces in `"MindYourPersonalSpace"` + +```js +assert('MindYourPersonalSpace'.match(countNonWhiteSpace).length == 21); +``` + +# --seed-- + +## --seed-contents-- ```js let sample = "Whitespace is important in separating words"; @@ -54,19 +66,10 @@ let countNonWhiteSpace = /change/; // Change this line let result = sample.match(countNonWhiteSpace); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let sample = "Whitespace is important in separating words"; let countNonWhiteSpace = /\S/g; // Change this line let result = sample.match(countNonWhiteSpace); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-numbers-and-letters-of-the-alphabet.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-numbers-and-letters-of-the-alphabet.md index 95fc9fd131..d70a7d4c68 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-numbers-and-letters-of-the-alphabet.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-numbers-and-letters-of-the-alphabet.md @@ -5,10 +5,12 @@ challengeType: 1 forumTopicId: 301356 --- -## Description -
    -Using the hyphen (-) to match a range of characters is not limited to letters. It also works to match a range of numbers. -For example, /[0-5]/ matches any number between 0 and 5, including the 0 and 5. +# --description-- + +Using the hyphen (`-`) to match a range of characters is not limited to letters. It also works to match a range of numbers. + +For example, `/[0-5]/` matches any number between `0` and `5`, including the `0` and `5`. + Also, it is possible to combine a range of letters and numbers in a single character set. ```js @@ -18,33 +20,33 @@ let myRegex = /[a-z0-9]/ig; jennyStr.match(myRegex); ``` -
    +# --instructions-- -## Instructions -
    -Create a single regex that matches a range of letters between h and s, and a range of numbers between 2 and 6. Remember to include the appropriate flags in the regex. -
    +Create a single regex that matches a range of letters between `h` and `s`, and a range of numbers between `2` and `6`. Remember to include the appropriate flags in the regex. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your regex myRegex should match 17 items. - testString: assert(result.length == 17); - - text: Your regex myRegex should use the global flag. - testString: assert(myRegex.flags.match(/g/).length == 1); - - text: Your regex myRegex should use the case insensitive flag. - testString: assert(myRegex.flags.match(/i/).length == 1); +Your regex `myRegex` should match 17 items. +```js +assert(result.length == 17); ``` -
    +Your regex `myRegex` should use the global flag. -## Challenge Seed -
    +```js +assert(myRegex.flags.match(/g/).length == 1); +``` -
    +Your regex `myRegex` should use the case insensitive flag. + +```js +assert(myRegex.flags.match(/i/).length == 1); +``` + +# --seed-- + +## --seed-contents-- ```js let quoteSample = "Blueberry 3.141592653s are delicious."; @@ -52,20 +54,10 @@ let myRegex = /change/; // Change this line let result = myRegex; // Change this line ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let quoteSample = "Blueberry 3.141592653s are delicious."; let myRegex = /[h-s2-6]/gi; // Change this line let result = quoteSample.match(myRegex); // Change this line - ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-character-with-multiple-possibilities.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-character-with-multiple-possibilities.md index 03392e2558..0e82fa878d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-character-with-multiple-possibilities.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-character-with-multiple-possibilities.md @@ -5,11 +5,13 @@ challengeType: 1 forumTopicId: 301357 --- -## Description -
    -You learned how to match literal patterns (/literal/) and wildcard character (/./). Those are the extremes of regular expressions, where one finds exact matches and the other matches everything. There are options that are a balance between the two extremes. -You can search for a literal pattern with some flexibility with character classes. Character classes allow you to define a group of characters you wish to match by placing them inside square ([ and ]) brackets. -For example, you want to match "bag", "big", and "bug" but not "bog". You can create the regex /b[aiu]g/ to do this. The [aiu] is the character class that will only match the characters "a", "i", or "u". +# --description-- + +You learned how to match literal patterns (`/literal/`) and wildcard character (`/./`). Those are the extremes of regular expressions, where one finds exact matches and the other matches everything. There are options that are a balance between the two extremes. + +You can search for a literal pattern with some flexibility with character classes. Character classes allow you to define a group of characters you wish to match by placing them inside square (`[` and `]`) brackets. + +For example, you want to match `"bag"`, `"big"`, and `"bug"` but not `"bog"`. You can create the regex `/b[aiu]g/` to do this. The `[aiu]` is the character class that will only match the characters `"a"`, `"i"`, or `"u"`. ```js let bigStr = "big"; @@ -23,38 +25,48 @@ bugStr.match(bgRegex); // Returns ["bug"] bogStr.match(bgRegex); // Returns null ``` -
    +# --instructions-- -## Instructions -
    -Use a character class with vowels (a, e, i, o, u) in your regex vowelRegex to find all the vowels in the string quoteSample. -Note
    Be sure to match both upper- and lowercase vowels. -
    +Use a character class with vowels (`a`, `e`, `i`, `o`, `u`) in your regex `vowelRegex` to find all the vowels in the string `quoteSample`. -## Tests -
    +**Note** +Be sure to match both upper- and lowercase vowels. -```yml -tests: - - text: You should find all 25 vowels. - testString: assert(result.length == 25); - - text: Your regex vowelRegex should use a character class. - testString: assert(/\[.*\]/.test(vowelRegex.source)); - - text: Your regex vowelRegex should use the global flag. - testString: assert(vowelRegex.flags.match(/g/).length == 1); - - text: Your regex vowelRegex should use the case insensitive flag. - testString: assert(vowelRegex.flags.match(/i/).length == 1); - - text: Your regex should not match any consonants. - testString: assert(!/[b-df-hj-np-tv-z]/gi.test(result.join())); +# --hints-- +You should find all 25 vowels. + +```js +assert(result.length == 25); ``` -
    +Your regex `vowelRegex` should use a character class. -## Challenge Seed -
    +```js +assert(/\[.*\]/.test(vowelRegex.source)); +``` -
    +Your regex `vowelRegex` should use the global flag. + +```js +assert(vowelRegex.flags.match(/g/).length == 1); +``` + +Your regex `vowelRegex` should use the case insensitive flag. + +```js +assert(vowelRegex.flags.match(/i/).length == 1); +``` + +Your regex should not match any consonants. + +```js +assert(!/[b-df-hj-np-tv-z]/gi.test(result.join())); +``` + +# --seed-- + +## --seed-contents-- ```js let quoteSample = "Beware of bugs in the above code; I have only proved it correct, not tried it."; @@ -62,19 +74,10 @@ let vowelRegex = /change/; // Change this line let result = vowelRegex; // Change this line ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let quoteSample = "Beware of bugs in the above code; I have only proved it correct, not tried it."; let vowelRegex = /[aeiou]/gi; // Change this line let result = quoteSample.match(vowelRegex); // Change this line ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-characters-not-specified.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-characters-not-specified.md index 0f110885b5..031bfcf129 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-characters-not-specified.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-characters-not-specified.md @@ -5,38 +5,41 @@ challengeType: 1 forumTopicId: 301358 --- -## Description -
    +# --description-- + So far, you have created a set of characters that you want to match, but you could also create a set of characters that you do not want to match. These types of character sets are called negated character sets. -To create a negated character set, you place a caret character (^) after the opening bracket and before the characters you do not want to match. -For example, /[^aeiou]/gi matches all characters that are not a vowel. Note that characters like ., !, [, @, / and white space are matched - the negated vowel character set only excludes the vowel characters. -
    -## Instructions -
    +To create a negated character set, you place a caret character (`^`) after the opening bracket and before the characters you do not want to match. + +For example, `/[^aeiou]/gi` matches all characters that are not a vowel. Note that characters like `.`, `!`, `[`, `@`, `/` and white space are matched - the negated vowel character set only excludes the vowel characters. + +# --instructions-- + Create a single regex that matches all characters that are not a number or a vowel. Remember to include the appropriate flags in the regex. -
    -## Tests -
    +# --hints-- -```yml -tests: - - text: Your regex myRegex should match 9 items. - testString: assert(result.length == 9); - - text: Your regex myRegex should use the global flag. - testString: assert(myRegex.flags.match(/g/).length == 1); - - text: Your regex myRegex should use the case insensitive flag. - testString: assert(myRegex.flags.match(/i/).length == 1); +Your regex `myRegex` should match 9 items. +```js +assert(result.length == 9); ``` -
    +Your regex `myRegex` should use the global flag. -## Challenge Seed -
    +```js +assert(myRegex.flags.match(/g/).length == 1); +``` -
    +Your regex `myRegex` should use the case insensitive flag. + +```js +assert(myRegex.flags.match(/i/).length == 1); +``` + +# --seed-- + +## --seed-contents-- ```js let quoteSample = "3 blind mice."; @@ -44,19 +47,10 @@ let myRegex = /change/; // Change this line let result = myRegex; // Change this line ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let quoteSample = "3 blind mice."; let myRegex = /[^0-9aeiou]/gi; // Change this line let result = quoteSample.match(myRegex); // Change this line ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-whitespace.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-whitespace.md index 782640c274..4bd067ed47 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-whitespace.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/match-whitespace.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301359 --- -## Description -
    +# --description-- + The challenges so far have covered matching letters of the alphabet and numbers. You can also match the whitespace or spaces between letters. -You can search for whitespace using \s, which is a lowercase s. This pattern not only matches whitespace, but also carriage return, tab, form feed, and new line characters. You can think of it as similar to the character class [ \r\t\f\n\v]. + +You can search for whitespace using `\s`, which is a lowercase `s`. This pattern not only matches whitespace, but also carriage return, tab, form feed, and new line characters. You can think of it as similar to the character class `[ \r\t\f\n\v]`. ```js let whiteSpace = "Whitespace. Whitespace everywhere!" @@ -17,37 +18,48 @@ whiteSpace.match(spaceRegex); // Returns [" ", " "] ``` -
    +# --instructions-- -## Instructions -
    -Change the regex countWhiteSpace to look for multiple whitespace characters in a string. -
    +Change the regex `countWhiteSpace` to look for multiple whitespace characters in a string. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your regex should use the global flag. - testString: assert(countWhiteSpace.global); - - text: Your regex should use the shorthand character \s to match all whitespace characters. - testString: assert(/\\s/.test(countWhiteSpace.source)); - - text: Your regex should find eight spaces in "Men are from Mars and women are from Venus." - testString: assert("Men are from Mars and women are from Venus.".match(countWhiteSpace).length == 8); - - text: 'Your regex should find three spaces in "Space: the final frontier."' - testString: 'assert("Space: the final frontier.".match(countWhiteSpace).length == 3);' - - text: Your regex should find no spaces in "MindYourPersonalSpace" - testString: assert("MindYourPersonalSpace".match(countWhiteSpace) == null); +Your regex should use the global flag. +```js +assert(countWhiteSpace.global); ``` -
    +Your regex should use the shorthand character `\s` to match all whitespace characters. -## Challenge Seed -
    +```js +assert(/\\s/.test(countWhiteSpace.source)); +``` -
    +Your regex should find eight spaces in `"Men are from Mars and women are from Venus."` + +```js +assert( + 'Men are from Mars and women are from Venus.'.match(countWhiteSpace).length == + 8 +); +``` + +Your regex should find three spaces in `"Space: the final frontier."` + +```js +assert('Space: the final frontier.'.match(countWhiteSpace).length == 3); +``` + +Your regex should find no spaces in `"MindYourPersonalSpace"` + +```js +assert('MindYourPersonalSpace'.match(countWhiteSpace) == null); +``` + +# --seed-- + +## --seed-contents-- ```js let sample = "Whitespace is important in separating words"; @@ -55,19 +67,10 @@ let countWhiteSpace = /change/; // Change this line let result = sample.match(countWhiteSpace); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let sample = "Whitespace is important in separating words"; let countWhiteSpace = /\s/g; let result = sample.match(countWhiteSpace); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/positive-and-negative-lookahead.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/positive-and-negative-lookahead.md index 3d357ac753..d83e0e70e6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/positive-and-negative-lookahead.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/positive-and-negative-lookahead.md @@ -5,12 +5,16 @@ challengeType: 1 forumTopicId: 301360 --- -## Description -
    +# --description-- + Lookaheads are patterns that tell JavaScript to look-ahead in your string to check for patterns further along. This can be useful when you want to search for multiple patterns over the same string. + There are two kinds of lookaheads: positive lookahead and negative lookahead. -A positive lookahead will look to make sure the element in the search pattern is there, but won't actually match it. A positive lookahead is used as (?=...) where the ... is the required part that is not matched. -On the other hand, a negative lookahead will look to make sure the element in the search pattern is not there. A negative lookahead is used as (?!...) where the ... is the pattern that you do not want to be there. The rest of the pattern is returned if the negative lookahead part is not present. + +A positive lookahead will look to make sure the element in the search pattern is there, but won't actually match it. A positive lookahead is used as `(?=...)` where the `...` is the required part that is not matched. + +On the other hand, a negative lookahead will look to make sure the element in the search pattern is not there. A negative lookahead is used as `(?!...)` where the `...` is the pattern that you do not want to be there. The rest of the pattern is returned if the negative lookahead part is not present. + Lookaheads are a bit confusing but some examples will help. ```js @@ -30,45 +34,69 @@ let checkPass = /(?=\w{3,6})(?=\D*\d)/; checkPass.test(password); // Returns true ``` -
    +# --instructions-- -## Instructions -
    -Use lookaheads in the pwRegex to match passwords that are greater than 5 characters long, do not begin with numbers, and have two consecutive digits. -
    +Use lookaheads in the `pwRegex` to match passwords that are greater than 5 characters long, do not begin with numbers, and have two consecutive digits. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your regex should use two positive lookaheads. - testString: assert(pwRegex.source.match(/\(\?=.*?\)\(\?=.*?\)/) !== null); - - text: Your regex should not match "astronaut" - testString: assert(!pwRegex.test("astronaut")); - - text: Your regex should not match "banan1" - testString: assert(!pwRegex.test("banan1")); - - text: Your regex should match "bana12" - testString: assert(pwRegex.test("bana12")); - - text: Your regex should match "abc123" - testString: assert(pwRegex.test("abc123")); - - text: Your regex should not match "1234" - testString: assert(!pwRegex.test("1234")); - - text: Your regex should not match "8pass99" - testString: assert(!pwRegex.test("8pass99")); - - text: Your regex should not match "12abcde" - testString: assert(!pwRegex.test("12abcde")); - - text: Your regex should match "astr1on11aut" - testString: assert(pwRegex.test("astr1on11aut")); +Your regex should use two positive `lookaheads`. +```js +assert(pwRegex.source.match(/\(\?=.*?\)\(\?=.*?\)/) !== null); ``` -
    +Your regex should not match `"astronaut"` -## Challenge Seed -
    +```js +assert(!pwRegex.test('astronaut')); +``` -
    +Your regex should not match `"banan1"` + +```js +assert(!pwRegex.test('banan1')); +``` + +Your regex should match `"bana12"` + +```js +assert(pwRegex.test('bana12')); +``` + +Your regex should match `"abc123"` + +```js +assert(pwRegex.test('abc123')); +``` + +Your regex should not match `"1234"` + +```js +assert(!pwRegex.test('1234')); +``` + +Your regex should not match `"8pass99"` + +```js +assert(!pwRegex.test('8pass99')); +``` + +Your regex should not match `"12abcde"` + +```js +assert(!pwRegex.test('12abcde')); +``` + +Your regex should match `"astr1on11aut"` + +```js +assert(pwRegex.test('astr1on11aut')); +``` + +# --seed-- + +## --seed-contents-- ```js let sampleWord = "astronaut"; @@ -76,18 +104,8 @@ let pwRegex = /change/; // Change this line let result = pwRegex.test(sampleWord); ``` -
    - - - -
    - -## Solution -
    - +# --solutions-- ```js var pwRegex = /^\D(?=\w{5})(?=\w*\d{2})/; ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end.md index 6c9e330751..154ac2b189 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end.md @@ -5,37 +5,39 @@ challengeType: 1 forumTopicId: 301362 --- -## Description -
    +# --description-- + Sometimes whitespace characters around strings are not wanted but are there. Typical processing of strings is to remove the whitespace at the start and end of it. -
    -## Instructions -
    +# --instructions-- + Write a regex and use the appropriate string methods to remove whitespace at the beginning and end of strings. -Note: The String.prototype.trim() method would work here, but you'll need to complete this challenge using regular expressions. -
    -## Tests -
    +**Note:** The `String.prototype.trim()` method would work here, but you'll need to complete this challenge using regular expressions. -```yml -tests: - - text: result should equal to "Hello, World!" - testString: assert(result == "Hello, World!"); - - text: Your solution should not use the String.prototype.trim() method. - testString: assert(!code.match(/\.?[\s\S]*?trim/)); - - text: The result variable should not be set equal to a string. - testString: assert(!code.match(/result\s*=\s*".*?"/)); +# --hints-- +`result` should equal to `"Hello, World!"` + +```js +assert(result == 'Hello, World!'); ``` -
    +Your solution should not use the `String.prototype.trim()` method. -## Challenge Seed -
    +```js +assert(!code.match(/\.?[\s\S]*?trim/)); +``` -
    +The `result` variable should not be set equal to a string. + +```js +assert(!code.match(/result\s*=\s*".*?"/)); +``` + +# --seed-- + +## --seed-contents-- ```js let hello = " Hello, World! "; @@ -43,19 +45,10 @@ let wsRegex = /change/; // Change this line let result = hello; // Change this line ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let hello = " Hello, World! "; let wsRegex = /^(\s+)(.+[^\s])(\s+)$/; let result = hello.replace(wsRegex, '$2'); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/restrict-possible-usernames.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/restrict-possible-usernames.md index c8fd33610f..bdb272df3b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/restrict-possible-usernames.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/restrict-possible-usernames.md @@ -5,59 +5,101 @@ challengeType: 1 forumTopicId: 301363 --- -## Description -
    +# --description-- + Usernames are used everywhere on the internet. They are what give users a unique identity on their favorite sites. + You need to check all the usernames in a database. Here are some simple rules that users have to follow when creating their username. + 1) Usernames can only use alpha-numeric characters. + 2) The only numbers in the username have to be at the end. There can be zero or more of them at the end. Username cannot start with the number. + 3) Username letters can be lowercase and uppercase. + 4) Usernames have to be at least two characters long. A two-character username can only use alphabet letters as characters. -
    -## Instructions -
    -Change the regex userCheck to fit the constraints listed above. -
    +# --instructions-- -## Tests -
    +Change the regex `userCheck` to fit the constraints listed above. -```yml -tests: - - text: Your regex should match JACK - testString: assert(userCheck.test("JACK")); - - text: Your regex should not match J - testString: assert(!userCheck.test("J")); - - text: Your regex should match Jo - testString: assert(userCheck.test("Jo")); - - text: Your regex should match Oceans11 - testString: assert(userCheck.test("Oceans11")); - - text: Your regex should match RegexGuru - testString: assert(userCheck.test("RegexGuru")); - - text: Your regex should not match 007 - testString: assert(!userCheck.test("007")); - - text: Your regex should not match 9 - testString: assert(!userCheck.test("9")); - - text: Your regex should not match A1 - testString: assert(!userCheck.test("A1")); - - text: Your regex should not match BadUs3rnam3 - testString: assert(!userCheck.test("BadUs3rnam3")); - - text: Your regex should match Z97 - testString: assert(userCheck.test("Z97")); - - text: Your regex should not match c57bT3 - testString: assert(!userCheck.test("c57bT3")); - - text: Your regex should match AB1 - testString: assert(userCheck.test("AB1")); +# --hints-- +Your regex should match `JACK` + +```js +assert(userCheck.test('JACK')); ``` -
    +Your regex should not match `J` -## Challenge Seed -
    +```js +assert(!userCheck.test('J')); +``` -
    +Your regex should match `Jo` + +```js +assert(userCheck.test('Jo')); +``` + +Your regex should match `Oceans11` + +```js +assert(userCheck.test('Oceans11')); +``` + +Your regex should match `RegexGuru` + +```js +assert(userCheck.test('RegexGuru')); +``` + +Your regex should not match `007` + +```js +assert(!userCheck.test('007')); +``` + +Your regex should not match `9` + +```js +assert(!userCheck.test('9')); +``` + +Your regex should not match `A1` + +```js +assert(!userCheck.test('A1')); +``` + +Your regex should not match `BadUs3rnam3` + +```js +assert(!userCheck.test('BadUs3rnam3')); +``` + +Your regex should match `Z97` + +```js +assert(userCheck.test('Z97')); +``` + +Your regex should not match `c57bT3` + +```js +assert(!userCheck.test('c57bT3')); +``` + +Your regex should match `AB1` + +```js +assert(userCheck.test('AB1')); +``` + +# --seed-- + +## --seed-contents-- ```js let username = "JackOfAllTrades"; @@ -65,19 +107,10 @@ let userCheck = /change/; // Change this line let result = userCheck.test(username); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let username = "JackOfAllTrades"; const userCheck = /^[a-z]([0-9]{2,}|[a-z]+\d*)$/i; let result = userCheck.test(username); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md index 35b3d1079a..63aeffccf3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md @@ -5,11 +5,14 @@ challengeType: 1 forumTopicId: 301364 --- -## Description -
    +# --description-- + Some patterns you search for will occur multiple times in a string. It is wasteful to manually repeat that regex. There is a better way to specify when you have multiple repeat substrings in your string. -You can search for repeat substrings using capture groups. Parentheses, ( and ), are used to find repeat substrings. You put the regex of the pattern that will repeat in between the parentheses. -To specify where that repeat string will appear, you use a backslash (\) and then a number. This number starts at 1 and increases with each additional capture group you use. An example would be \1 to match the first group. + +You can search for repeat substrings using capture groups. Parentheses, `(` and `)`, are used to find repeat substrings. You put the regex of the pattern that will repeat in between the parentheses. + +To specify where that repeat string will appear, you use a backslash (`\`) and then a number. This number starts at 1 and increases with each additional capture group you use. An example would be `\1` to match the first group. + The example below matches any word that occurs twice separated by a space: ```js @@ -19,48 +22,80 @@ repeatRegex.test(repeatStr); // Returns true repeatStr.match(repeatRegex); // Returns ["regex regex", "regex"] ``` -Using the .match() method on a string will return an array with the string it matches, along with its capture group. -
    +Using the `.match()` method on a string will return an array with the string it matches, along with its capture group. -## Instructions -
    -Use capture groups in reRegex to match numbers that are repeated only three times in a string, each separated by a space. -
    +# --instructions-- -## Tests -
    +Use capture groups in `reRegex` to match numbers that are repeated only three times in a string, each separated by a space. -```yml -tests: - - text: Your regex should use the shorthand character class for digits. - testString: assert(reRegex.source.match(/\\d/)); - - text: Your regex should reuse a capture group twice. - testString: assert(reRegex.source.match(/\\1|\\2/g).length >= 2); - - text: Your regex should have two spaces separating the three numbers. - testString: assert(reRegex.source.match(/ |\\s/g).length === 2 || reRegex.source.match(/\(\\s\)(?=.*\\(1|2))/g)); - - text: Your regex should match "42 42 42". - testString: assert(reRegex.test("42 42 42")); - - text: Your regex should match "100 100 100". - testString: assert(reRegex.test("100 100 100")); - - text: Your regex should not match "42 42 42 42". - testString: assert.equal(("42 42 42 42").match(reRegex.source), null); - - text: Your regex should not match "42 42". - testString: assert.equal(("42 42").match(reRegex.source), null); - - text: Your regex should not match "101 102 103". - testString: assert(!reRegex.test("101 102 103")); - - text: Your regex should not match "1 2 3". - testString: assert(!reRegex.test("1 2 3")); - - text: Your regex should match "10 10 10". - testString: assert(reRegex.test("10 10 10")); +# --hints-- +Your regex should use the shorthand character class for digits. + +```js +assert(reRegex.source.match(/\\d/)); ``` -
    +Your regex should reuse a capture group twice. -## Challenge Seed -
    +```js +assert(reRegex.source.match(/\\1|\\2/g).length >= 2); +``` -
    +Your regex should have two spaces separating the three numbers. + +```js +assert( + reRegex.source.match(/ |\\s/g).length === 2 || + reRegex.source.match(/\(\\s\)(?=.*\\(1|2))/g) +); +``` + +Your regex should match `"42 42 42"`. + +```js +assert(reRegex.test('42 42 42')); +``` + +Your regex should match `"100 100 100"`. + +```js +assert(reRegex.test('100 100 100')); +``` + +Your regex should not match `"42 42 42 42"`. + +```js +assert.equal('42 42 42 42'.match(reRegex.source), null); +``` + +Your regex should not match `"42 42"`. + +```js +assert.equal('42 42'.match(reRegex.source), null); +``` + +Your regex should not match `"101 102 103"`. + +```js +assert(!reRegex.test('101 102 103')); +``` + +Your regex should not match `"1 2 3"`. + +```js +assert(!reRegex.test('1 2 3')); +``` + +Your regex should match `"10 10 10"`. + +```js +assert(reRegex.test('10 10 10')); +``` + +# --seed-- + +## --seed-contents-- ```js let repeatNum = "42 42 42"; @@ -68,19 +103,10 @@ let reRegex = /change/; // Change this line let result = reRegex.test(repeatNum); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let repeatNum = "42 42 42"; let reRegex = /^(\d+)\s\1\s\1$/; let result = reRegex.test(repeatNum); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/specify-exact-number-of-matches.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/specify-exact-number-of-matches.md index 0aba6737b8..dbef29b595 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/specify-exact-number-of-matches.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/specify-exact-number-of-matches.md @@ -5,11 +5,13 @@ challengeType: 1 forumTopicId: 301365 --- -## Description -
    +# --description-- + You can specify the lower and upper number of patterns with quantity specifiers using curly brackets. Sometimes you only want a specific number of matches. + To specify a certain number of patterns, just have that one number between the curly brackets. -For example, to match only the word "hah" with the letter a 3 times, your regex would be /ha{3}h/. + +For example, to match only the word `"hah"` with the letter `a` `3` times, your regex would be `/ha{3}h/`. ```js let A4 = "haaaah"; @@ -21,39 +23,56 @@ multipleHA.test(A3); // Returns true multipleHA.test(A100); // Returns false ``` -
    +# --instructions-- -## Instructions -
    -Change the regex timRegex to match the word "Timber" only when it has four letter m's. -
    +Change the regex `timRegex` to match the word `"Timber"` only when it has four letter `m`'s. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your regex should use curly brackets. - testString: assert(timRegex.source.match(/{.*?}/).length > 0); - - text: Your regex should not match "Timber" - testString: timRegex.lastIndex = 0; assert(!timRegex.test("Timber")); - - text: Your regex should not match "Timmber" - testString: timRegex.lastIndex = 0; assert(!timRegex.test("Timmber")); - - text: Your regex should not match "Timmmber" - testString: timRegex.lastIndex = 0; assert(!timRegex.test("Timmmber")); - - text: Your regex should match "Timmmmber" - testString: timRegex.lastIndex = 0; assert(timRegex.test("Timmmmber")); - - text: Your regex should not match "Timber" with 30 m's in it. - testString: timRegex.lastIndex = 0; assert(!timRegex.test("Ti" + "m".repeat(30) + "ber")); +Your regex should use curly brackets. +```js +assert(timRegex.source.match(/{.*?}/).length > 0); ``` -
    +Your regex should not match `"Timber"` -## Challenge Seed -
    +```js +timRegex.lastIndex = 0; +assert(!timRegex.test('Timber')); +``` -
    +Your regex should not match `"Timmber"` + +```js +timRegex.lastIndex = 0; +assert(!timRegex.test('Timmber')); +``` + +Your regex should not match `"Timmmber"` + +```js +timRegex.lastIndex = 0; +assert(!timRegex.test('Timmmber')); +``` + +Your regex should match `"Timmmmber"` + +```js +timRegex.lastIndex = 0; +assert(timRegex.test('Timmmmber')); +``` + +Your regex should not match `"Timber"` with 30 `m`'s in it. + +```js +timRegex.lastIndex = 0; +assert(!timRegex.test('Ti' + 'm'.repeat(30) + 'ber')); +``` + +# --seed-- + +## --seed-contents-- ```js let timStr = "Timmmmber"; @@ -61,19 +80,10 @@ let timRegex = /change/; // Change this line let result = timRegex.test(timStr); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let timStr = "Timmmmber"; let timRegex = /Tim{4}ber/; // Change this line let result = timRegex.test(timStr); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/specify-only-the-lower-number-of-matches.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/specify-only-the-lower-number-of-matches.md index 15d26053c0..735b8d29f4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/specify-only-the-lower-number-of-matches.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/specify-only-the-lower-number-of-matches.md @@ -5,11 +5,13 @@ challengeType: 1 forumTopicId: 301366 --- -## Description -
    +# --description-- + You can specify the lower and upper number of patterns with quantity specifiers using curly brackets. Sometimes you only want to specify the lower number of patterns with no upper limit. + To only specify the lower number of patterns, keep the first number followed by a comma. -For example, to match only the string "hah" with the letter a appearing at least 3 times, your regex would be /ha{3,}h/. + +For example, to match only the string `"hah"` with the letter `a` appearing at least `3` times, your regex would be `/ha{3,}h/`. ```js let A4 = "haaaah"; @@ -21,41 +23,57 @@ multipleA.test(A2); // Returns false multipleA.test(A100); // Returns true ``` -
    +# --instructions-- -## Instructions -
    -Change the regex haRegex to match the word "Hazzah" only when it has four or more letter z's. -
    +Change the regex `haRegex` to match the word `"Hazzah"` only when it has four or more letter `z`'s. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your regex should use curly brackets. - testString: assert(haRegex.source.match(/{.*?}/).length > 0); - - text: Your regex should not match "Hazzah" - testString: assert(!haRegex.test("Hazzah")); - - text: Your regex should not match "Hazzzah" - testString: assert(!haRegex.test("Hazzzah")); - - text: Your regex should match "Hazzzzah" - testString: assert("Hazzzzah".match(haRegex)[0].length === 8); - - text: Your regex should match "Hazzzzzah" - testString: assert("Hazzzzzah".match(haRegex)[0].length === 9); - - text: Your regex should match "Hazzzzzzah" - testString: assert("Hazzzzzzah".match(haRegex)[0].length === 10); - - text: Your regex should match "Hazzah" with 30 z's in it. - testString: assert("Hazzzzzzzzzzzzzzzzzzzzzzzzzzzzzzah".match(haRegex)[0].length === 34); +Your regex should use curly brackets. +```js +assert(haRegex.source.match(/{.*?}/).length > 0); ``` -
    +Your regex should not match `"Hazzah"` -## Challenge Seed -
    +```js +assert(!haRegex.test('Hazzah')); +``` -
    +Your regex should not match `"Hazzzah"` + +```js +assert(!haRegex.test('Hazzzah')); +``` + +Your regex should match `"Hazzzzah"` + +```js +assert('Hazzzzah'.match(haRegex)[0].length === 8); +``` + +Your regex should match `"Hazzzzzah"` + +```js +assert('Hazzzzzah'.match(haRegex)[0].length === 9); +``` + +Your regex should match `"Hazzzzzzah"` + +```js +assert('Hazzzzzzah'.match(haRegex)[0].length === 10); +``` + +Your regex should match `"Hazzah"` with 30 `z`'s in it. + +```js +assert('Hazzzzzzzzzzzzzzzzzzzzzzzzzzzzzzah'.match(haRegex)[0].length === 34); +``` + +# --seed-- + +## --seed-contents-- ```js let haStr = "Hazzzzah"; @@ -63,19 +81,10 @@ let haRegex = /change/; // Change this line let result = haRegex.test(haStr); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let haStr = "Hazzzzah"; let haRegex = /Haz{4,}ah/; // Change this line let result = haRegex.test(haStr); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/specify-upper-and-lower-number-of-matches.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/specify-upper-and-lower-number-of-matches.md index c5e5deb627..57b6eea268 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/specify-upper-and-lower-number-of-matches.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/specify-upper-and-lower-number-of-matches.md @@ -5,11 +5,13 @@ challengeType: 1 forumTopicId: 301367 --- -## Description -
    -Recall that you use the plus sign + to look for one or more characters and the asterisk * to look for zero or more characters. These are convenient but sometimes you want to match a certain range of patterns. -You can specify the lower and upper number of patterns with quantity specifiers. Quantity specifiers are used with curly brackets ({ and }). You put two numbers between the curly brackets - for the lower and upper number of patterns. -For example, to match only the letter a appearing between 3 and 5 times in the string "ah", your regex would be /a{3,5}h/. +# --description-- + +Recall that you use the plus sign `+` to look for one or more characters and the asterisk `*` to look for zero or more characters. These are convenient but sometimes you want to match a certain range of patterns. + +You can specify the lower and upper number of patterns with quantity specifiers. Quantity specifiers are used with curly brackets (`{` and `}`). You put two numbers between the curly brackets - for the lower and upper number of patterns. + +For example, to match only the letter `a` appearing between `3` and `5` times in the string `"ah"`, your regex would be `/a{3,5}h/`. ```js let A4 = "aaaah"; @@ -19,40 +21,57 @@ multipleA.test(A4); // Returns true multipleA.test(A2); // Returns false ``` -
    +# --instructions-- -## Instructions -
    -Change the regex ohRegex to match the entire phrase "Oh no" only when it has 3 to 6 letter h's. -
    +Change the regex `ohRegex` to match the entire phrase `"Oh no"` only when it has `3` to `6` letter `h`'s. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your regex should use curly brackets. - testString: assert(ohRegex.source.match(/{.*?}/).length > 0); - - text: Your regex should not match "Ohh no" - testString: assert(!ohRegex.test("Ohh no")); - - text: Your regex should match "Ohhh no" - testString: assert("Ohhh no".match(ohRegex)[0].length === 7); - - text: Your regex should match "Ohhhh no" - testString: assert("Ohhhh no".match(ohRegex)[0].length === 8); - - text: Your regex should match "Ohhhhh no" - testString: assert("Ohhhhh no".match(ohRegex)[0].length === 9); - - text: Your regex should match "Ohhhhhh no" - testString: assert("Ohhhhhh no".match(ohRegex)[0].length === 10); - - text: Your regex should not match "Ohhhhhhh no" - testString: assert(!ohRegex.test("Ohhhhhhh no")); +Your regex should use curly brackets. +```js +assert(ohRegex.source.match(/{.*?}/).length > 0); ``` -
    +Your regex should not match `"Ohh no"` -## Challenge Seed -
    -
    +```js +assert(!ohRegex.test('Ohh no')); +``` + +Your regex should match `"Ohhh no"` + +```js +assert('Ohhh no'.match(ohRegex)[0].length === 7); +``` + +Your regex should match `"Ohhhh no"` + +```js +assert('Ohhhh no'.match(ohRegex)[0].length === 8); +``` + +Your regex should match `"Ohhhhh no"` + +```js +assert('Ohhhhh no'.match(ohRegex)[0].length === 9); +``` + +Your regex should match `"Ohhhhhh no"` + +```js +assert('Ohhhhhh no'.match(ohRegex)[0].length === 10); +``` + +Your regex should not match `"Ohhhhhhh no"` + +```js +assert(!ohRegex.test('Ohhhhhhh no')); +``` + +# --seed-- + +## --seed-contents-- ```js let ohStr = "Ohhh no"; @@ -60,16 +79,10 @@ let ohRegex = /change/; // Change this line let result = ohRegex.test(ohStr); ``` -
    -
    - -## Solution -
    +# --solutions-- ```js let ohStr = "Ohhh no"; let ohRegex = /Oh{3,6} no/; // Change this line let result = ohRegex.test(ohStr); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/use-capture-groups-to-search-and-replace.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/use-capture-groups-to-search-and-replace.md index 084ebde896..6f393e49d0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/use-capture-groups-to-search-and-replace.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/use-capture-groups-to-search-and-replace.md @@ -5,10 +5,11 @@ challengeType: 1 forumTopicId: 301368 --- -## Description -
    +# --description-- + Searching is useful. However, you can make searching even more powerful when it also changes (or replaces) the text you match. -You can search and replace text in a string using .replace() on a string. The inputs for .replace() is first the regex pattern you want to search for. The second parameter is the string to replace the match or a function to do something. + +You can search and replace text in a string using `.replace()` on a string. The inputs for `.replace()` is first the regex pattern you want to search for. The second parameter is the string to replace the match or a function to do something. ```js let wrongText = "The sky is silver."; @@ -17,47 +18,55 @@ wrongText.replace(silverRegex, "blue"); // Returns "The sky is blue." ``` -You can also access capture groups in the replacement string with dollar signs ($). +You can also access capture groups in the replacement string with dollar signs (`$`). ```js "Code Camp".replace(/(\w+)\s(\w+)/, '$2 $1'); // Returns "Camp Code" ``` -
    +# --instructions-- -## Instructions -
    -Write a regex fixRegex using three capture groups that will search for each word in the string "one two three". Then update the replaceText variable to replace "one two three" with the string "three two one" and assign the result to the result variable. Make sure you are utilizing capture groups in the replacement string using the dollar sign ($) syntax. -
    +Write a regex `fixRegex` using three capture groups that will search for each word in the string "one two three". Then update the `replaceText` variable to replace "one two three" with the string "three two one" and assign the result to the `result` variable. Make sure you are utilizing capture groups in the replacement string using the dollar sign (`$`) syntax. -## Tests -
    +# --hints-- -```yml -tests: - - text: You should use .replace() to search and replace. - testString: assert(code.match(/\.replace\(.*\)/)); - - text: Your regex should change "one two three" to "three two one" - testString: assert(result === "three two one"); - - text: You should not change the last line. - testString: assert(code.match(/result\s*=\s*str\.replace\(.*?\)/)); - - text: fixRegex should use at least three capture groups. - testString: assert((new RegExp(fixRegex.source + '|')).exec('').length - 1 >= 3); - - text: replaceText should use parenthesized submatch string(s) (i.e. the nth parenthesized submatch string, $n, corresponds to the nth capture group). - testString: '{ - const re = /(\$\d{1,2})+(?:[\D]|\b)/g; - assert(replaceText.match(re).length >= 3); - }' +You should use `.replace()` to search and replace. +```js +assert(code.match(/\.replace\(.*\)/)); ``` -
    +Your regex should change `"one two three"` to `"three two one"` -## Challenge Seed -
    +```js +assert(result === 'three two one'); +``` -
    +You should not change the last line. + +```js +assert(code.match(/result\s*=\s*str\.replace\(.*?\)/)); +``` + +`fixRegex` should use at least three capture groups. + +```js +assert(new RegExp(fixRegex.source + '|').exec('').length - 1 >= 3); +``` + +`replaceText` should use parenthesized submatch string(s) (i.e. the nth parenthesized submatch string, $n, corresponds to the nth capture group). + +```js +{ + const re = /(\$\d{1,2})+(?:[\D]|\b)/g; + assert(replaceText.match(re).length >= 3); +} +``` + +# --seed-- + +## --seed-contents-- ```js let str = "one two three"; @@ -66,14 +75,7 @@ let replaceText = ""; // Change this line let result = str.replace(fixRegex, replaceText); ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let str = "one two three"; @@ -81,5 +83,3 @@ let fixRegex = /(\w+) (\w+) (\w+)/g; // Change this line let replaceText = "$3 $2 $1"; // Change this line let result = str.replace(fixRegex, replaceText); ``` - -
    diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/using-the-test-method.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/using-the-test-method.md index 12c2a33dcc..f262195663 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/using-the-test-method.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/regular-expressions/using-the-test-method.md @@ -5,11 +5,13 @@ challengeType: 1 forumTopicId: 301369 --- -## Description -
    +# --description-- + Regular expressions are used in programming languages to match parts of strings. You create patterns to help you do that matching. -If you want to find the word "the" in the string "The dog chased the cat", you could use the following regular expression: /the/. Notice that quote marks are not required within the regular expression. -JavaScript has multiple ways to use regexes. One way to test a regex is using the .test() method. The .test() method takes the regex, applies it to a string (which is placed inside the parentheses), and returns true or false if your pattern finds something or not. + +If you want to find the word `"the"` in the string `"The dog chased the cat"`, you could use the following regular expression: `/the/`. Notice that quote marks are not required within the regular expression. + +JavaScript has multiple ways to use regexes. One way to test a regex is using the `.test()` method. The `.test()` method takes the regex, applies it to a string (which is placed inside the parentheses), and returns `true` or `false` if your pattern finds something or not. ```js let testStr = "freeCodeCamp"; @@ -18,31 +20,27 @@ testRegex.test(testStr); // Returns true ``` -
    +# --instructions-- -## Instructions -
    -Apply the regex myRegex on the string myString using the .test() method. -
    +Apply the regex `myRegex` on the string `myString` using the `.test()` method. -## Tests -
    +# --hints-- -```yml -tests: - - text: You should use .test() to test the regex. - testString: assert(code.match(/myRegex.test\(\s*myString\s*\)/)); - - text: Your result should return true. - testString: assert(result === true); +You should use `.test()` to test the regex. +```js +assert(code.match(/myRegex.test\(\s*myString\s*\)/)); ``` -
    +Your result should return `true`. -## Challenge Seed -
    +```js +assert(result === true); +``` -
    +# --seed-- + +## --seed-contents-- ```js let myString = "Hello, World!"; @@ -50,19 +48,10 @@ let myRegex = /Hello/; let result = myRegex; // Change this line ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```js let myString = "Hello, World!"; let myRegex = /Hello/; let result = myRegex.test(myString); // Change this line ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md index f07d7a5df5..f7e5da9496 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md @@ -5,37 +5,42 @@ challengeType: 0 forumTopicId: 16636 --- -## Description -
    -Now we're several div elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our button elements. -Nest three button elements within each of your well div elements. -
    +# --description-- -## Instructions -
    +Now we're several `div` elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our `button` elements. -
    +Nest three `button` elements within each of your `well` `div` elements. -## Tests -
    +# --hints-- -```yml -tests: - - text: Three button elements should be nested within each of your div elements with class well. - testString: assert($("div.well:eq(0)").children("button").length === 3 && $("div.well:eq(1)").children("button").length === 3); - - text: You should have a total of 6 button elements. - testString: assert($("button") && $("button").length > 5); - - text: All of your button elements should have closing tags. - testString: assert(code.match(/<\/button>/g) && code.match(/
    - -## Solution -
    +# --solutions-- ```html
    @@ -89,5 +87,3 @@ tests:
    ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md index 91b56ba3b5..6f280f44b8 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md @@ -1,45 +1,57 @@ --- id: bad87fee1348bd9aedc08845 title: Add Font Awesome Icons to all of our Buttons +challengeType: 0 +forumTopicId: 16637 required: - link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css' raw: true -challengeType: 0 -forumTopicId: 16637 --- -## Description -
    +# --description-- + Font Awesome is a convenient library of icons. These icons can be web fonts or vector graphics. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements. -
    -## Instructions -
    -Use Font Awesome to add an info-circle icon to your info button and a trash icon to your delete button. +# --instructions-- -Note: The span element is an acceptable alternative to the i element for the directions below. -
    +Use Font Awesome to add an `info-circle` icon to your info button and a `trash` icon to your delete button. -## Tests -
    +**Note:** The `span` element is an acceptable alternative to the `i` element for the directions below. -```yml -tests: - - text: You should add a <i class="fas fa-info-circle"></i> within your info button element. - testString: assert($(".btn-info > i").is(".fas.fa-info-circle") || $(".btn-info > span").is(".fas.fa-info-circle")); - - text: You should add a <i class="fas fa-trash"></i> within your delete button element. - testString: assert($(".btn-danger > i").is(".fas.fa-trash") || $(".btn-danger > span").is(".fas.fa-trash")); - - text: Each of your i elements should have a closing tag and <i class="fas fa-thumbs-up"></i> is in your like button element. - testString: assert(code.match(/<\/i>|<\/span/g) && code.match(/<\/i|<\/span>/g).length > 2 && ($(".btn-primary > i").is(".fas.fa-thumbs-up") || $(".btn-primary > span").is(".fas.fa-thumbs-up"))); +# --hints-- +You should add a `` within your info button element. + +```js +assert( + $('.btn-info > i').is('.fas.fa-info-circle') || + $('.btn-info > span').is('.fas.fa-info-circle') +); ``` -
    +You should add a `` within your delete button element. -## Challenge Seed -
    +```js +assert( + $('.btn-danger > i').is('.fas.fa-trash') || + $('.btn-danger > span').is('.fas.fa-trash') +); +``` -
    +Each of your `i` elements should have a closing tag and `` is in your like button element. + +```js +assert( + code.match(/<\/i>|<\/span/g) && + code.match(/<\/i|<\/span>/g).length > 2 && + ($('.btn-primary > i').is('.fas.fa-thumbs-up') || + $('.btn-primary > span').is('.fas.fa-thumbs-up')) +); +``` + +# --seed-- + +## --seed-contents-- ```html @@ -101,14 +113,7 @@ tests:
    ``` - - - - -
    - -## Solution -
    +# --solutions-- ```html @@ -169,5 +174,3 @@ tests: ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md index e93f059418..612686fa6e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md @@ -1,50 +1,70 @@ --- id: bad87fee1348bd9aedd08845 title: Add Font Awesome Icons to our Buttons +challengeType: 0 +forumTopicId: 16638 required: - link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css' raw: true -challengeType: 0 -forumTopicId: 16638 --- -## Description -
    +# --description-- + Font Awesome is a convenient library of icons. These icons can be webfonts or vector graphics. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements. + You can include Font Awesome in any app by adding the following code to the top of your HTML: -<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> + +`` + In this case, we've already added it for you to this page behind the scenes. -The i element was originally used to make other elements italic, but is now commonly used for icons. You can add the Font Awesome classes to the i element to turn it into an icon, for example: -<i class="fas fa-info-circle"></i> -Note that the span element is also acceptable for use with icons. -
    -## Instructions -
    -Use Font Awesome to add a thumbs-up icon to your like button by giving it an i element with the classes fas and fa-thumbs-up. Make sure to keep the text "Like" next to the icon. -
    +The `i` element was originally used to make other elements italic, but is now commonly used for icons. You can add the Font Awesome classes to the `i` element to turn it into an icon, for example: -## Tests -
    +`` -```yml -tests: - - text: You should add an i element with the classes fas and fa-thumbs-up. - testString: assert($("i").is(".fas.fa-thumbs-up") || $("span").is(".fas.fa-thumbs-up")); - - text: Your fa-thumbs-up icon should be located within the Like button. - testString: assert(($("i.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > i").is(".fas.fa-thumbs-up")) || ($("span.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > span").is(".fas.fa-thumbs-up"))); - - text: Your i element should be nested within your button element. - testString: assert($("button").children("i").length > 0 || $("button").children("span").length > 0); - - text: Your icon element should have a closing tag. - testString: assert(code.match(/<\/i>|<\/span>/g)); +Note that the `span` element is also acceptable for use with icons. + +# --instructions-- + +Use Font Awesome to add a `thumbs-up` icon to your like button by giving it an `i` element with the classes `fas` and `fa-thumbs-up`. Make sure to keep the text "Like" next to the icon. + +# --hints-- + +You should add an `i` element with the classes `fas` and `fa-thumbs-up`. + +```js +assert($('i').is('.fas.fa-thumbs-up') || $('span').is('.fas.fa-thumbs-up')); ``` -
    +Your `fa-thumbs-up` icon should be located within the Like button. -## Challenge Seed -
    +```js +assert( + ($('i.fa-thumbs-up').parent().text().match(/Like/gi) && + $('.btn-primary > i').is('.fas.fa-thumbs-up')) || + ($('span.fa-thumbs-up').parent().text().match(/Like/gi) && + $('.btn-primary > span').is('.fas.fa-thumbs-up')) +); +``` -
    +Your `i` element should be nested within your `button` element. + +```js +assert( + $('button').children('i').length > 0 || + $('button').children('span').length > 0 +); +``` + +Your icon element should have a closing tag. + +```js +assert(code.match(/<\/i>|<\/span>/g)); +``` + +# --seed-- + +## --seed-contents-- ```html @@ -106,14 +126,7 @@ tests:
    ``` - - - - -
    - -## Solution -
    +# --solutions-- ```html @@ -174,5 +187,3 @@ tests: ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md index 192deab591..aae524c8c2 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md @@ -5,39 +5,43 @@ challengeType: 0 forumTopicId: 16639 --- -## Description -
    -Recall that in addition to class attributes, you can give each of your elements an id attribute. +# --description-- + +Recall that in addition to class attributes, you can give each of your elements an `id` attribute. + Each id must be unique to a specific element and used only once per page. -Let's give a unique id to each of our div elements of class well. + +Let's give a unique id to each of our `div` elements of class `well`. + Remember that you can give an element an id like this: -<div class="well" id="center-well"> -Give the well on the left the id of left-well. Give the well on the right the id of right-well. -
    -## Instructions -
    +`
    ` -
    +Give the well on the left the id of `left-well`. Give the well on the right the id of `right-well`. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your left well should have the id of left-well. - testString: assert($(".col-xs-6").children("#left-well") && $(".col-xs-6").children("#left-well").length > 0); - - text: Your right well should have the id of right-well. - testString: assert($(".col-xs-6").children("#right-well") && $(".col-xs-6").children("#right-well").length > 0); +Your left `well` should have the id of `left-well`. +```js +assert( + $('.col-xs-6').children('#left-well') && + $('.col-xs-6').children('#left-well').length > 0 +); ``` -
    +Your right `well` should have the id of `right-well`. -## Challenge Seed -
    +```js +assert( + $('.col-xs-6').children('#right-well') && + $('.col-xs-6').children('#right-well').length > 0 +); +``` -
    +# --seed-- + +## --seed-contents-- ```html
    @@ -61,14 +65,7 @@ tests:
    ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```html
    @@ -91,5 +88,3 @@ tests:
    ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.md index 79ad0fd819..407a74d3fd 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.md @@ -5,35 +5,29 @@ challengeType: 0 forumTopicId: 16657 --- -## Description -
    -Bootstrap has another button class called btn-default. -Apply both the btn and btn-default classes to each of your button elements. -
    +# --description-- -## Instructions -
    +Bootstrap has another button class called `btn-default`. -
    +Apply both the `btn` and `btn-default` classes to each of your `button` elements. -## Tests -
    +# --hints-- -```yml -tests: - - text: You should apply the btn class to each of your button elements. - testString: assert($(".btn").length > 5); - - text: You should apply the btn-default class to each of your button elements. - testString: assert($(".btn-default").length > 5); +You should apply the `btn` class to each of your `button` elements. +```js +assert($('.btn').length > 5); ``` -
    +You should apply the `btn-default` class to each of your `button` elements. -## Challenge Seed -
    +```js +assert($('.btn-default').length > 5); +``` -
    +# --seed-- + +## --seed-contents-- ```html
    @@ -57,14 +51,7 @@ tests:
    ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```html
    @@ -87,5 +74,3 @@ tests:
    ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md index b592042db5..81824e36d2 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md @@ -5,40 +5,47 @@ challengeType: 0 forumTopicId: 16770 --- -## Description -
    -Bootstrap comes with several pre-defined colors for buttons. The btn-info class is used to call attention to optional actions that the user can take. -Create a new block-level Bootstrap button below your "Like" button with the text "Info", and add Bootstrap's btn-info and btn-block classes to it. -Note that these buttons still need the btn and btn-block classes. -
    +# --description-- -## Instructions -
    +Bootstrap comes with several pre-defined colors for buttons. The `btn-info` class is used to call attention to optional actions that the user can take. -
    +Create a new block-level Bootstrap button below your "Like" button with the text "Info", and add Bootstrap's `btn-info` and `btn-block` classes to it. -## Tests -
    +Note that these buttons still need the `btn` and `btn-block` classes. -```yml -tests: - - text: You should create a new button element with the text "Info". - testString: assert(new RegExp("info","gi").test($("button").text())); - - text: Both of your Bootstrap buttons should have the btn and btn-block classes. - testString: assert($("button.btn-block.btn").length > 1); - - text: Your new button should have the class btn-info. - testString: assert($("button").hasClass("btn-info")); - - text: All of your button elements should have closing tags. - testString: assert(code.match(/<\/button>/g) && code.match(/
    - -## Solution -
    +# --solutions-- ```html @@ -172,5 +172,3 @@ tests: ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/center-text-with-bootstrap.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/center-text-with-bootstrap.md index 4667cd4aed..ac73a378ad 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/center-text-with-bootstrap.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/center-text-with-bootstrap.md @@ -5,36 +5,31 @@ challengeType: 0 forumTopicId: 16771 --- -## Description -
    -Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class text-center to our h2 element. +# --description-- + +Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class `text-center` to our `h2` element. + Remember that you can add several classes to the same element by separating each of them with a space, like this: -<h2 class="red-text text-center">your text</h2> -
    -## Instructions -
    +`

    your text

    ` -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: Your h2 element should be centered by applying the class text-center - testString: assert($("h2").hasClass("text-center")); - - text: Your h2 element should still have the class red-text - testString: assert($("h2").hasClass("red-text")); +Your `h2` element should be centered by applying the class `text-center` +```js +assert($('h2').hasClass('text-center')); ``` -
    +Your `h2` element should still have the class `red-text` -## Challenge Seed -
    +```js +assert($('h2').hasClass('red-text')); +``` -
    +# --seed-- + +## --seed-contents-- ```html @@ -96,14 +91,7 @@ tests:
    ``` - - - - -
    - -## Solution -
    +# --solutions-- ```html @@ -164,5 +152,3 @@ tests: ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.md index 80c5ff6780..b11621c9a6 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.md @@ -5,45 +5,55 @@ challengeType: 0 forumTopicId: 16810 --- -## Description -
    -Normally, your button elements with the btn and btn-default classes are only as wide as the text that they contain. For example: -<button class="btn btn-default">Submit</button> +# --description-- + +Normally, your `button` elements with the `btn` and `btn-default` classes are only as wide as the text that they contain. For example: + +`` + This button would only be as wide as the word "Submit". + -By making them block elements with the additional class of btn-block, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a "new line" below the block. -<button class="btn btn-default btn-block">Submit</button> + +By making them block elements with the additional class of `btn-block`, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a "new line" below the block. + +`` + This button would take up 100% of the available width. + -Note that these buttons still need the btn class. -Add Bootstrap's btn-block class to your Bootstrap button. -
    -## Instructions -
    +Note that these buttons still need the `btn` class. -
    +Add Bootstrap's `btn-block` class to your Bootstrap button. -## Tests -
    +# --hints-- -```yml -tests: - - text: Your button should still have the btn and btn-default classes. - testString: assert($("button").hasClass("btn") && $("button").hasClass("btn-default")); - - text: Your button should have the class btn-block. - testString: assert($("button").hasClass("btn-block")); - - text: All of your button elements should have closing tags. - testString: assert(code.match(/<\/button>/g) && code.match(/
    - -## Solution -
    +# --solutions-- ```html @@ -175,5 +178,3 @@ tests: ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md index 00d6f57fc4..94523cd9b5 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md @@ -5,37 +5,42 @@ challengeType: 0 forumTopicId: 16811 --- -## Description -
    -Bootstrap has its own styles for button elements, which look much better than the plain HTML ones. -Create a new button element below your large kitten photo. Give it the btn and btn-default classes, as well as the text of "Like". -
    +# --description-- -## Instructions -
    +Bootstrap has its own styles for `button` elements, which look much better than the plain HTML ones. -
    +Create a new `button` element below your large kitten photo. Give it the `btn` and `btn-default` classes, as well as the text of "Like". -## Tests -
    +# --hints-- -```yml -tests: - - text: You should create a new button element with the text "Like". - testString: assert(new RegExp("like","gi").test($("button").text()) && ($("img.img-responsive + button.btn").length > 0)); - - text: 'Your new button should have two classes: btn and btn-default.' - testString: assert($("button").hasClass("btn") && $("button").hasClass("btn-default")); - - text: All of your button elements should have closing tags. - testString: assert(code.match(/<\/button>/g) && code.match(/
    +Your new button should have two classes: `btn` and `btn-default`. -## Challenge Seed -
    +```js +assert($('button').hasClass('btn') && $('button').hasClass('btn-default')); +``` -
    +All of your `button` elements should have closing tags. + +```js +assert( + code.match(/<\/button>/g) && + code.match(/
    ``` - - - - -
    - -## Solution -
    +# --solutions-- ```html @@ -175,5 +173,3 @@ tests: ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md index 9c787b3df5..8b8ae91bac 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md @@ -5,57 +5,61 @@ challengeType: 0 forumTopicId: 16812 --- -## Description -
    +# --description-- + Now let's build something from scratch to practice our HTML, CSS and Bootstrap skills. + We'll build a jQuery playground, which we'll soon put to use in our jQuery challenges. -To start with, create an h3 element, with the text jQuery Playground. -Color your h3 element with the text-primary Bootstrap class, and center it with the text-center Bootstrap class. -
    -## Instructions -
    +To start with, create an `h3` element, with the text `jQuery Playground`. -
    +Color your `h3` element with the `text-primary` Bootstrap class, and center it with the `text-center` Bootstrap class. -## Tests -
    +# --hints-- -```yml -tests: - - text: You should add an h3 element to your page. - testString: assert($("h3") && $("h3").length > 0); - - text: Your h3 element should have a closing tag. - testString: assert(code.match(/<\/h3>/g) && code.match(/

    /g).length === code.match(/

    h3 element should be colored by applying the class text-primary - testString: assert($("h3").hasClass("text-primary")); - - text: Your h3 element should be centered by applying the class text-center - testString: assert($("h3").hasClass("text-center")); - - text: Your h3 element should have the text jQuery Playground. - testString: assert.isTrue((/jquery(\s)+playground/gi).test($("h3").text())); +You should add an `h3` element to your page. +```js +assert($('h3') && $('h3').length > 0); ``` -

    +Your `h3` element should have a closing tag. -## Challenge Seed -
    +```js +assert( + code.match(/<\/h3>/g) && + code.match(/

    /g).length === code.match(/

    +Your `h3` element should be colored by applying the class `text-primary` + +```js +assert($('h3').hasClass('text-primary')); +``` + +Your `h3` element should be centered by applying the class `text-center` + +```js +assert($('h3').hasClass('text-center')); +``` + +Your `h3` element should have the text `jQuery Playground`. + +```js +assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text())); +``` + +# --seed-- + +## --seed-contents-- ```html - ``` - - -

    - -## Solution -
    +# --solutions-- ```html

    jQuery Playground

    ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md index 5d5e87e84d..674c997d33 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md @@ -5,56 +5,59 @@ challengeType: 0 forumTopicId: 16813 --- -## Description -
    +# --description-- + Now we'll create a Bootstrap row for our inline elements. -Create a div element below the h3 tag, with a class of row. -
    -## Instructions -
    +Create a `div` element below the `h3` tag, with a class of `row`. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: You should add a div element below your h3 element. - testString: assert(($("div").length > 1) && ($("div.row h3.text-primary").length == 0) && ($("div.row + h3.text-primary").length == 0) && ($("h3.text-primary + div.row").length > 0)); - - text: Your div element should have the class row - testString: assert($("div").hasClass("row")); - - text: Your row div should be nested inside the container-fluid div - testString: assert($("div.container-fluid div.row").length > 0); - - text: Your div element should have a closing tag. - testString: assert(code.match(/<\/div>/g) && code.match(/
    /g).length === code.match(/
    1 && + $('div.row h3.text-primary').length == 0 && + $('div.row + h3.text-primary').length == 0 && + $('h3.text-primary + div.row').length > 0 +); ``` -
    +Your `div` element should have the class `row` -## Challenge Seed -
    +```js +assert($('div').hasClass('row')); +``` -
    +Your `row div` should be nested inside the `container-fluid div` + +```js +assert($('div.container-fluid div.row').length > 0); +``` + +Your `div` element should have a closing tag. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/

    jQuery Playground

    - ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```html
    @@ -62,5 +65,3 @@ tests:
    ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md index 2faa826f27..2dd6fe8896 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md @@ -5,33 +5,23 @@ challengeType: 0 forumTopicId: 16815 --- -## Description -
    +# --description-- + Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery. -Give each of your button elements the class target. -
    -## Instructions -
    +Give each of your `button` elements the class `target`. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: You should apply the target class to each of your button elements. - testString: assert($(".target").length > 5); +You should apply the `target` class to each of your `button` elements. +```js +assert($('.target').length > 5); ``` -
    +# --seed-- -## Challenge Seed -
    - -
    +## --seed-contents-- ```html
    @@ -55,14 +45,7 @@ tests:
    ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```html
    @@ -85,5 +68,3 @@ tests:
    ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-custom-heading.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-custom-heading.md index 35a42f7817..d818746002 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-custom-heading.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-custom-heading.md @@ -5,41 +5,55 @@ challengeType: 0 forumTopicId: 16816 --- -## Description -
    +# --description-- + We will make a simple heading for our Cat Photo App by putting the title and relaxing cat image in the same row. -Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element. -Nest your first image and your h2 element within a single <div class="row"> element. Nest your h2 element within a <div class="col-xs-8"> and your image in a <div class="col-xs-4"> so that they are on the same line. + +Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a `div` element. + +Nest your first image and your `h2` element within a single `
    ` element. Nest your `h2` element within a `
    ` and your image in a `
    ` so that they are on the same line. + Notice how the image is now just the right size to fit along the text? -
    -## Instructions -
    +# --hints-- -
    - -## Tests -
    - -```yml -tests: - - text: Your h2 element and topmost img element should both be nested together within a div element with the class row. - testString: assert($("div.row:has(h2)").length > 0 && $("div.row:has(img)").length > 0); - - text: Your topmost img element should be nested within a div with the class col-xs-4. - testString: assert($("div.col-xs-4:has(img)").length > 0 && $("div.col-xs-4:has(div)").length === 0); - - text: Your h2 element should be nested within a div with the class col-xs-8. - testString: assert($("div.col-xs-8:has(h2)").length > 0 && $("div.col-xs-8:has(div)").length === 0); - - text: All of your div elements should have closing tags. - testString: assert(code.match(/<\/div>/g) && code.match(/
    /g).length === code.match(/
    0 && $('div.row:has(img)').length > 0); ``` -
    +Your topmost `img` element should be nested within a `div` with the class `col-xs-4`. -## Challenge Seed -
    +```js +assert( + $('div.col-xs-4:has(img)').length > 0 && + $('div.col-xs-4:has(div)').length === 0 +); +``` -
    +Your `h2` element should be nested within a `div` with the class `col-xs-8`. + +```js +assert( + $('div.col-xs-8:has(h2)').length > 0 && + $('div.col-xs-8:has(div)').length === 0 +); +``` + +All of your `div` elements should have closing tags. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    @@ -98,14 +112,7 @@ tests:
    ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```html @@ -167,5 +174,3 @@ tests: ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.md index dec52f3c7d..161120ddf0 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.md @@ -5,37 +5,39 @@ challengeType: 0 forumTopicId: 16825 --- -## Description -
    -Bootstrap has a class called well that can create a visual sense of depth for your columns. -Nest one div element with the class well within each of your col-xs-6 div elements. -
    +# --description-- -## Instructions -
    +Bootstrap has a class called `well` that can create a visual sense of depth for your columns. -
    +Nest one `div` element with the class `well` within each of your `col-xs-6` `div` elements. -## Tests -
    +# --hints-- -```yml -tests: - - text: You should add a div element with the class well inside each of your div elements with the class "col-xs-6" - testString: assert($("div.col-xs-6").not(":has(>div.well)").length < 1); - - text: Both of your div elements with the class "col-xs-6" should be nested within your div element with the class "row". - testString: assert($("div.row > div.col-xs-6").length > 1); - - text: All your div elements should have closing tags. - testString: assert(code.match(/<\/div>/g) && code.match(/
    /g).length === code.match(/
    div.well)').length < 1); ``` -
    +Both of your `div` elements with the class `"col-xs-6"` should be nested within your `div` element with the class `"row"`. -## Challenge Seed -
    +```js +assert($('div.row > div.col-xs-6').length > 1); +``` -
    +All your `div` elements should have closing tags. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    @@ -51,14 +53,7 @@ tests:
    ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```html
    @@ -73,5 +68,3 @@ tests:
    ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md index 51cba80143..902989a4f9 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md @@ -5,44 +5,57 @@ challengeType: 0 forumTopicId: 17565 --- -## Description -
    +# --description-- + We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier. + Don't worry - there will be plenty of time to customize our CSS later. -Delete the .red-text, p, and .smaller-image CSS declarations from your style element so that the only declarations left in your style element are h2 and thick-green-border. -Then delete the p element that contains a dead link. Then remove the red-text class from your h2 element and replace it with the text-primary Bootstrap class. -Finally, remove the "smaller-image" class from your first img element and replace it with the img-responsive class. -
    -## Instructions -
    +Delete the `.red-text`, `p`, and `.smaller-image` CSS declarations from your `style` element so that the only declarations left in your `style` element are `h2` and `thick-green-border`. -
    +Then delete the `p` element that contains a dead link. Then remove the `red-text` class from your `h2` element and replace it with the `text-primary` Bootstrap class. -## Tests -
    +Finally, remove the "smaller-image" class from your first `img` element and replace it with the `img-responsive` class. -```yml -tests: - - text: Your h2 element should no longer have the class red-text. - testString: assert(!$("h2").hasClass("red-text")); - - text: Your h2 element should now have the class text-primary. - testString: assert($("h2").hasClass("text-primary")); - - text: Your paragraph elements should no longer use the font Monospace. - testString: assert(!$("p").css("font-family").match(/monospace/i)); - - text: The smaller-image class should be removed from your top image. - testString: assert(!$("img").hasClass("smaller-image")); - - text: You should add the img-responsive class to your top image. - testString: assert($(".img-responsive").length > 1); +# --hints-- +Your h2 element should no longer have the class `red-text`. + +```js +assert(!$('h2').hasClass('red-text')); ``` -
    +Your h2 element should now have the class `text-primary`. -## Challenge Seed -
    +```js +assert($('h2').hasClass('text-primary')); +``` -
    +Your paragraph elements should no longer use the font `Monospace`. + +```js +assert( + !$('p') + .css('font-family') + .match(/monospace/i) +); +``` + +The `smaller-image` class should be removed from your top image. + +```js +assert(!$('img').hasClass('smaller-image')); +``` + +You should add the `img-responsive` class to your top image. + +```js +assert($('.img-responsive').length > 1); +``` + +# --seed-- + +## --seed-contents-- ```html @@ -115,14 +128,7 @@ tests:
    ``` - - - - -
    - -## Solution -
    +# --solutions-- ```html @@ -179,5 +185,3 @@ tests: ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md index 9830eed1fb..44fbab94a2 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md @@ -5,44 +5,73 @@ challengeType: 0 forumTopicId: 18191 --- -## Description -
    +# --description-- + We will also want to be able to use jQuery to target each button by its unique id. -Give each of your buttons a unique id, starting with target1 and ending with target6. -Make sure that target1 to target3 are in #left-well, and target4 to target6 are in #right-well. -
    -## Instructions -
    +Give each of your buttons a unique id, starting with `target1` and ending with `target6`. -
    +Make sure that `target1` to `target3` are in `#left-well`, and `target4` to `target6` are in `#right-well`. -## Tests -
    +# --hints-- -```yml -tests: - - text: One button element should have the id target1. - testString: assert($("#left-well").children("#target1") && $("#left-well").children("#target1").length > 0); - - text: One button element should have the id target2. - testString: assert($("#left-well").children("#target2") && $("#left-well").children("#target2").length > 0); - - text: One button element should have the id target3. - testString: assert($("#left-well").children("#target3") && $("#left-well").children("#target3").length > 0); - - text: One button element should have the id target4. - testString: assert($("#right-well").children("#target4") && $("#right-well").children("#target4").length > 0); - - text: One button element should have the id target5. - testString: assert($("#right-well").children("#target5") && $("#right-well").children("#target5").length > 0); - - text: One button element should have the id target6. - testString: assert($("#right-well").children("#target6") && $("#right-well").children("#target6").length > 0); +One `button` element should have the id `target1`. +```js +assert( + $('#left-well').children('#target1') && + $('#left-well').children('#target1').length > 0 +); ``` -
    +One `button` element should have the id `target2`. -## Challenge Seed -
    +```js +assert( + $('#left-well').children('#target2') && + $('#left-well').children('#target2').length > 0 +); +``` -
    +One `button` element should have the id `target3`. + +```js +assert( + $('#left-well').children('#target3') && + $('#left-well').children('#target3').length > 0 +); +``` + +One `button` element should have the id `target4`. + +```js +assert( + $('#right-well').children('#target4') && + $('#right-well').children('#target4').length > 0 +); +``` + +One `button` element should have the id `target5`. + +```js +assert( + $('#right-well').children('#target5') && + $('#right-well').children('#target5').length > 0 +); +``` + +One `button` element should have the id `target6`. + +```js +assert( + $('#right-well').children('#target6') && + $('#right-well').children('#target6').length > 0 +); +``` + +# --seed-- + +## --seed-contents-- ```html
    @@ -68,14 +97,7 @@ tests:
    ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```html
    @@ -100,5 +122,3 @@ tests:
    ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md index 04e975b0b3..3f2eae11ff 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md @@ -5,57 +5,48 @@ challengeType: 0 forumTopicId: 18198 --- -## Description -
    +# --description-- + Now let's make sure all the content on your page is mobile-responsive. -Let's nest your h3 element within a div element with the class container-fluid. -
    -## Instructions -
    +Let's nest your `h3` element within a `div` element with the class `container-fluid`. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: Your div element should have the class container-fluid. - testString: assert($("div").hasClass("container-fluid")); - - text: Each of your div elements should have closing tags. - testString: assert(code.match(/<\/div>/g) && code.match(/
    /g).length === code.match(/
    h3 element should be nested inside a div element. - testString: assert($("div").children("h3").length >0); +Your `div` element should have the class `container-fluid`. +```js +assert($('div').hasClass('container-fluid')); ``` -
    +Each of your `div` elements should have closing tags. -## Challenge Seed -
    +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    +Your `h3` element should be nested inside a `div` element. + +```js +assert($('div').children('h3').length > 0); +``` + +# --seed-- + +## --seed-contents-- ```html

    jQuery Playground

    - - ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```html

    jQuery Playground

    ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md index 5f70705406..11040f1b5b 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md @@ -5,43 +5,53 @@ challengeType: 0 forumTopicId: 18222 --- -## Description -
    +# --description-- + Just like we labeled our wells, we want to label our buttons. -Give each of your button elements text that corresponds to its id's selector. -
    -## Instructions -
    +Give each of your `button` elements text that corresponds to its `id`'s selector. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: Your button element with the id target1 should have the text #target1. - testString: assert(new RegExp("#target1","gi").test($("#target1").text())); - - text: Your button element with the id target2 should have the text #target2. - testString: assert(new RegExp("#target2","gi").test($("#target2").text())); - - text: Your button element with the id target3 should have the text #target3. - testString: assert(new RegExp("#target3","gi").test($("#target3").text())); - - text: Your button element with the id target4 should have the text #target4. - testString: assert(new RegExp("#target4","gi").test($("#target4").text())); - - text: Your button element with the id target5 should have the text #target5. - testString: assert(new RegExp("#target5","gi").test($("#target5").text())); - - text: Your button element with the id target6 should have the text #target6. - testString: assert(new RegExp("#target6","gi").test($("#target6").text())); +Your `button` element with the id `target1` should have the text `#target1`. +```js +assert(new RegExp('#target1', 'gi').test($('#target1').text())); ``` -
    +Your `button` element with the id `target2` should have the text `#target2`. -## Challenge Seed -
    +```js +assert(new RegExp('#target2', 'gi').test($('#target2').text())); +``` -
    +Your `button` element with the id `target3` should have the text `#target3`. + +```js +assert(new RegExp('#target3', 'gi').test($('#target3').text())); +``` + +Your `button` element with the id `target4` should have the text `#target4`. + +```js +assert(new RegExp('#target4', 'gi').test($('#target4').text())); +``` + +Your `button` element with the id `target5` should have the text `#target5`. + +```js +assert(new RegExp('#target5', 'gi').test($('#target5').text())); +``` + +Your `button` element with the id `target6` should have the text `#target6`. + +```js +assert(new RegExp('#target6', 'gi').test($('#target6').text())); +``` + +# --seed-- + +## --seed-contents-- ```html
    @@ -67,14 +77,7 @@ tests:
    ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```html
    @@ -99,5 +102,3 @@ tests:
    ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-wells.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-wells.md index 5efa016085..46c339bb1a 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-wells.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-wells.md @@ -5,40 +5,49 @@ challengeType: 0 forumTopicId: 18223 --- -## Description -
    +# --description-- + For the sake of clarity, let's label both of our wells with their ids. -Above your left-well, inside its col-xs-6 div element, add a h4 element with the text #left-well. -Above your right-well, inside its col-xs-6 div element, add a h4 element with the text #right-well. -
    -## Instructions -
    +Above your left-well, inside its `col-xs-6` `div` element, add a `h4` element with the text `#left-well`. -
    +Above your right-well, inside its `col-xs-6` `div` element, add a `h4` element with the text `#right-well`. -## Tests -
    +# --hints-- -```yml -tests: - - text: You should add an h4 element to each of your <div class="col-xs-6"> elements. - testString: assert($(".col-xs-6").children("h4") && $(".col-xs-6").children("h4").length > 1); - - text: One h4 element should have the text #left-well. - testString: assert(new RegExp("#left-well","gi").test($("h4").text())); - - text: One h4 element should have the text #right-well. - testString: assert(new RegExp("#right-well","gi").test($("h4").text())); - - text: All of your h4 elements should have closing tags. - testString: assert(code.match(/<\/h4>/g) && code.match(/

    /g).length === code.match(/

    ` elements. +```js +assert( + $('.col-xs-6').children('h4') && $('.col-xs-6').children('h4').length > 1 +); ``` -

    +One `h4` element should have the text `#left-well`. -## Challenge Seed -
    +```js +assert(new RegExp('#left-well', 'gi').test($('h4').text())); +``` -
    +One `h4` element should have the text `#right-well`. + +```js +assert(new RegExp('#right-well', 'gi').test($('h4').text())); +``` + +All of your `h4` elements should have closing tags. + +```js +assert( + code.match(/<\/h4>/g) && + code.match(/

    /g).length === code.match(/

    @@ -64,14 +73,7 @@ tests:

    ``` - - - - -
    - -## Solution -
    +# --solutions-- ```html
    @@ -96,5 +98,3 @@ tests:
    ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md index 68f741d91f..4bedf71cc6 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md @@ -1,47 +1,58 @@ --- id: bad87fee1348bd9aec908845 title: Line up Form Elements Responsively with Bootstrap -required: - - link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css' - raw: true challengeType: 0 forumTopicId: 18225 +required: + - link: >- + https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css + raw: true --- -## Description -
    -Now let's get your form input and your submission button on the same line. We'll do this the same way we have previously: by using a div element with the class row, and other div elements within it using the col-xs-* class. -Nest both your form's text input and submit button within a div with the class row. Nest your form's text input within a div with the class of col-xs-7. Nest your form's submit button in a div with the class col-xs-5. +# --description-- + +Now let's get your form `input` and your submission `button` on the same line. We'll do this the same way we have previously: by using a `div` element with the class `row`, and other `div` elements within it using the `col-xs-*` class. + +Nest both your form's text `input` and submit `button` within a `div` with the class `row`. Nest your form's text `input` within a div with the class of `col-xs-7`. Nest your form's submit `button` in a `div` with the class `col-xs-5`. + This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design! -
    -## Instructions -
    +# --hints-- -
    - -## Tests -
    - -```yml -tests: - - text: Your form submission button and text input should be nested in a div with class row. - testString: assert($("div.row:has(input[type=\"text\"])").length > 0 && $("div.row:has(button[type=\"submit\"])").length > 0); - - text: Your form text input should be nested in a div with the class col-xs-7. - testString: assert($("div.col-xs-7:has(input[type=\"text\"])").length > 0); - - text: Your form submission button should be nested in a div with the class col-xs-5. - testString: assert($("div.col-xs-5:has(button[type=\"submit\"])").length > 0); - - text: All of your div elements should have closing tags. - testString: assert(code.match(/<\/div>/g) && code.match(/
    /g).length === code.match(/
    0 && + $('div.row:has(button[type="submit"])').length > 0 +); ``` -
    +Your form text input should be nested in a div with the class `col-xs-7`. -## Challenge Seed -
    +```js +assert($('div.col-xs-7:has(input[type="text"])').length > 0); +``` -
    +Your form submission button should be nested in a div with the class `col-xs-5`. + +```js +assert($('div.col-xs-5:has(button[type="submit"])').length > 0); +``` + +All of your `div` elements should have closing tags. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    @@ -118,14 +129,7 @@ tests:
    ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```html @@ -207,5 +211,3 @@ tests: ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md index fdc2f71362..d2675ef70d 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md @@ -5,42 +5,53 @@ challengeType: 0 forumTopicId: 18232 --- -## Description -
    -First, add a new image below the existing one. Set its src attribute to https://bit.ly/fcc-running-cats. +# --description-- + +First, add a new image below the existing one. Set its `src` attribute to `https://bit.ly/fcc-running-cats`. + It would be great if this image could be exactly the width of our phone's screen. -Fortunately, with Bootstrap, all we need to do is add the img-responsive class to your image. Do this, and the image should perfectly fit the width of your page. -
    -## Instructions -
    +Fortunately, with Bootstrap, all we need to do is add the `img-responsive` class to your image. Do this, and the image should perfectly fit the width of your page. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: You should have a total of two images. - testString: assert($("img").length === 2); - - text: Your new image should be below your old one and have the class img-responsive. - testString: assert($("img:eq(1)").hasClass("img-responsive")); - - text: Your new image should not have the class smaller-image. - testString: assert(!$("img:eq(1)").hasClass("smaller-image")); - - text: Your new image should have a src of https://bit.ly/fcc-running-cats. - testString: assert($("img:eq(1)").attr("src") === "https://bit.ly/fcc-running-cats"); - - text: Your new img element should have a closing angle bracket. - testString: assert(code.match(//g).length === 2 && code.match(/ +Your new image should be below your old one and have the class `img-responsive`. -## Challenge Seed -
    +```js +assert($('img:eq(1)').hasClass('img-responsive')); +``` -
    +Your new image should not have the class `smaller-image`. + +```js +assert(!$('img:eq(1)').hasClass('smaller-image')); +``` + +Your new image should have a `src` of `https://bit.ly/fcc-running-cats`. + +```js +assert($('img:eq(1)').attr('src') === 'https://bit.ly/fcc-running-cats'); +``` + +Your new `img` element should have a closing angle bracket. + +```js +assert( + code.match(//g).length === 2 && + code.match(/ @@ -101,14 +112,7 @@ tests:
    ``` - - - - -
    - -## Solution -
    +# --solutions-- ```html @@ -169,5 +173,3 @@ tests: ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md index 1078856943..6eff1d8e10 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md @@ -1,43 +1,49 @@ --- id: bad87fee1348bd9aeda08845 title: Responsively Style Checkboxes -required: - - link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css' - raw: true challengeType: 0 forumTopicId: 18269 +required: + - link: >- + https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css + raw: true --- -## Description -
    - Since Bootstrap's col-xs-* classes are applicable to all form elements, you can use them on your checkboxes too! This way, the checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is. -
    +# --description-- -## Instructions -
    -Nest all three of your checkboxes in a <div class="row"> element. Then nest each of them in a <div class="col-xs-4"> element. -
    +Since Bootstrap's `col-xs-*` classes are applicable to all `form` elements, you can use them on your checkboxes too! This way, the checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is. -## Tests -
    +# --instructions-- -```yml -tests: - - text: All of your checkboxes should be nested inside one div with the class row. - testString: assert($("div.row:has(input[type=\"checkbox\"])").length > 0); - - text: Each of your checkboxes should be nested inside its own div with the class col-xs-4. - testString: assert($("div.col-xs-4:has(input[type=\"checkbox\"])").length > 2); - - text: All of your div elements should have closing tags. - testString: assert(code.match(/<\/div>/g) && code.match(/
    /g).length === code.match(/
    ` element. Then nest each of them in a `
    ` element. +# --hints-- + +All of your checkboxes should be nested inside one `div` with the class `row`. + +```js +assert($('div.row:has(input[type="checkbox"])').length > 0); ``` -
    +Each of your checkboxes should be nested inside its own `div` with the class `col-xs-4`. -## Challenge Seed -
    +```js +assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2); +``` -
    +All of your `div` elements should have closing tags. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    @@ -106,14 +112,7 @@ tests:
    ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```html @@ -189,5 +188,3 @@ tests: ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md index be86621601..60405961a7 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md @@ -1,45 +1,49 @@ --- id: bad87fee1348bd9aedb08845 title: Responsively Style Radio Buttons -required: - - link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css' - raw: true challengeType: 0 forumTopicId: 18270 +required: + - link: >- + https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css + raw: true --- -## Description -
    -You can use Bootstrap's col-xs-* classes on form elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is. -Nest both your radio buttons within a <div class="row"> element. Then nest each of them within a <div class="col-xs-6"> element. -Note: As a reminder, radio buttons are input elements of type radio. -
    +# --description-- -## Instructions -
    +You can use Bootstrap's `col-xs-*` classes on `form` elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is. -
    +Nest both your radio buttons within a `
    ` element. Then nest each of them within a `
    ` element. -## Tests -
    +**Note:** As a reminder, radio buttons are `input` elements of type `radio`. -```yml -tests: - - text: All of your radio buttons should be nested inside one div with the class row. - testString: assert($("div.row:has(input[type=\"radio\"])").length > 0); - - text: Each of your radio buttons should be nested inside its own div with the class col-xs-6. - testString: assert($("div.col-xs-6:has(input[type=\"radio\"])").length > 1); - - text: All of your div elements should have closing tags. - testString: assert(code.match(/<\/div>/g) && code.match(/
    /g).length === code.match(/
    0); ``` -
    +Each of your radio buttons should be nested inside its own `div` with the class `col-xs-6`. -## Challenge Seed -
    +```js +assert($('div.col-xs-6:has(input[type="radio"])').length > 1); +``` -
    +All of your `div` elements should have closing tags. + +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    @@ -101,14 +105,7 @@ tests:
    ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```html @@ -175,5 +172,3 @@ tests:
    ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md index a6c45188c2..bb7302fa03 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md @@ -5,35 +5,33 @@ challengeType: 0 forumTopicId: 18306 --- -## Description -
    +# --description-- + Now that we have a Bootstrap Row, let's split it into two columns to house our elements. -Create two div elements within your row, both with the class col-xs-6. -
    -## Instructions -
    +Create two `div` elements within your row, both with the class `col-xs-6`. -
    +# --hints-- -## Tests -
    - -```yml -tests: - - text: Two div class="col-xs-6" elements should be nested within your div class="row" element. - testString: assert($("div.row > div.col-xs-6").length > 1); - - text: All your div elements should have closing tags. - testString: assert(code.match(/<\/div>/g) && code.match(/
    /g).length === code.match(/
    div.col-xs-6').length > 1); ``` -
    +All your `div` elements should have closing tags. -## Challenge Seed -
    +```js +assert( + code.match(/<\/div>/g) && + code.match(/
    /g).length === code.match(/
    +# --seed-- + +## --seed-contents-- ```html
    @@ -45,14 +43,7 @@ tests:
    ``` -
    - - - -
    - -## Solution -
    +# --solutions-- ```html
    @@ -63,5 +54,3 @@ tests:
    ``` - -
    diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md index 3fcbcd93af..c20fe3a031 100644 --- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md +++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md @@ -1,47 +1,51 @@ --- id: bad87fee1348bd9aed908845 title: Style Text Inputs as Form Controls -required: - - link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css' - raw: true challengeType: 0 forumTopicId: 18312 +required: + - link: >- + https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css + raw: true --- -## Description -
    -You can add the fa-paper-plane Font Awesome icon by adding <i class="fa fa-paper-plane"></i> within your submit button element. -Give your form's text input field a class of form-control. Give your form's submit button the classes btn btn-primary. Also give this button the Font Awesome icon of fa-paper-plane. -All textual <input>, <textarea>, and <select> elements with the class .form-control have a width of 100%. -
    +# --description-- -## Instructions -
    +You can add the `fa-paper-plane` Font Awesome icon by adding `` within your submit `button` element. -
    +Give your form's text input field a class of `form-control`. Give your form's submit button the classes `btn btn-primary`. Also give this button the Font Awesome icon of `fa-paper-plane`. -## Tests -
    +All textual ``, `