def draw(self, number): drawn = [] if number >= len(self.contents): <del> return self.contents </del> <ins> drawn.extend(self.contents) self.contents = [] </ins> else: for i in range(number): drawn.append(


```` - Additional information in the form of a note should be formatted `<strong>Note:</strong> Rest of note text...` <ins> - If multiple notes are needed, then list all of the notes in separate sentences using the format `<strong>Notes:</strong> First note text.  Second note text.`. </ins> - Use double quotes where applicable ## Formatting seed code


assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.style?.fontSize === '6rem'); ``` <del> Your `.hero-subtitle, .author, .quote, .list-header` selector should have a `font-size` set to `1.8rem`. </del> <ins> Your `.hero-subtitle, .author, .quote, .list-title` selector should have a `font-size` set to `1.8rem`. </ins> ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.style?.fontSize === '1.8rem');


--- <del> The kitchen </del> <ins> Kitchen </ins> ### --feedback--


"invalid-protocol": "URL must start with http or https", "url-not-image": "URL must link directly to an image file", "use-valid-url": "Please use a valid URL" <ins> }, "certification": { "certifies": "This certifies that", "completed": "has successfully completed the freeCodeCamp.org", "developer": "Developer Certification, representing approximately", "executive": "Executive Director, freeCodeCamp.org", "verify": "Verify this certification at {{certURL}}", "issued": "Issued" </ins> } }


## Instructions
  Modify the myApp.js file to log "Hello World" to the console.
 ## Tests


"assert(Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('input').length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('button').length === 1, 'message: The CheckUserAge component should render with a single input element and a single button element.');", "assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === '' && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === '', 'message: The CheckUserAge component's state should be initialized with a property of userAge and a property of input, both set to a value of an empty string.');", "assert(Enzyme.mount(React.createElement(CheckUserAge)).find('button').text() === 'Submit', 'message: When the CheckUserAge component is first rendered to the DOM, the button's inner text should be Submit.');",  "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find('button').text(); const enter3AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: 3 }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const enter17AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: 17 }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === 'Submit' && userAge3 === 'You Shall Not Pass' && userAge17 === 'You Shall Not Pass', 'message: When a number of less than 18 is entered into the input element and the button is clicked, the button's inner text should read You Shall Not Pass.'); }; ", "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find('button').text(); const enter18AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: 18 }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const enter35AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: 35 }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === 'Submit' && userAge18 === 'You May Enter' && userAge35 === 'You May Enter', 'message: When a number greater than or equal to 18 is entered into the input element and the button is clicked, the button's inner text should read You May Enter.'); }; ", "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: 18 }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: 5 }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const enter10AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: 10 }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === 'You May Enter' && changeInput1 === 'Submit' && userAge10 === 'You Shall Not Pass' && changeInput2 === 'Submit', 'message: Once a number has been submitted, and the value of the input is once again changed, the button should return to reading Submit.'); }; ",   "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find('button').text(); const enter3AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '3' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const enter17AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '17' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === 'Submit' && userAge3 === 'You Shall Not Pass' && userAge17 === 'You Shall Not Pass', 'message: When a number of less than 18 is entered into the input element and the button is clicked, the button's inner text should read You Shall Not Pass.'); }; ", "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find('button').text(); const enter18AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '18' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const enter35AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '35' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === 'Submit' && userAge18 === 'You May Enter' && userAge35 === 'You May Enter', 'message: When a number greater than or equal to 18 is entered into the input element and the button is clicked, the button's inner text should read You May Enter.'); }; ", "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '18' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '5' }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const enter10AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '10' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === 'You May Enter' && changeInput1 === 'Submit' && userAge10 === 'You Shall Not Pass' && changeInput2 === 'Submit', 'message: Once a number has been submitted, and the value of the input is once again changed, the button should return to reading Submit.'); }; ",  "assert(new RegExp(/(s|;)if(s|()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, 'message: Your code should not contain any if/else statements.');" ], "solutions": [


# --description-- <del> The text `* Daily Value %` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it. </del> <ins> The text `% Daily Value *` should be aligned to the right. Create a `.right` selector and use the `justify-content` property to do it. </ins> # --hints--


# --description-- <del> Create a third `@media` query for `only screen` with a `max-width` of `550px`. Within, create a `.hero-title` selector with a `font-size` set to `6rem`, a `.hero-subtitle, .author, .quote, .list-header` selector with a `font-size` set to `1.8rem`, a `.social-icons` selector with a `font-size` set to `2rem`, and a `.text` selector with a `font-size` set to `1.6rem`. </del> <ins> Create a third `@media` query for `only screen` with a `max-width` of `550px`. Within, create a `.hero-title` selector with a `font-size` set to `6rem`, a `.hero-subtitle, .author, .quote, .list-title` selector with a `font-size` set to `1.8rem`, a `.social-icons` selector with a `font-size` set to `2rem`, and a `.text` selector with a `font-size` set to `1.6rem`. </ins> # --hints--


You should declare a variable named `xp`. ```js <del> assert.match(code, /xp/); </del> <ins> assert.match(code, /lets+xp/); </ins> ``` You should not assign a value to your variable.


man -f shutdown ``` <ins> #### Display the man page of ASCII table: ```bash man ascii ``` </ins> ### More information: * [Wikipedia](https://en.wikipedia.org/wiki/Man_page)


Getting Started --------------- <ins> Note: If this is your first time working with a node-gyp dependent module, please follow the [node-gyp installation guide](https://github.com/nodejs/node-gyp#installation) to ensure a working npm build. </ins> The easiest way to get started is to clone the repository:


Your `idToText` function should return the result of calling `.find()` on the `cells` array with a callback function that takes an `cell` parameter and returns `cell.id === id`. <ins> Both of your functions should use implicit returns. </ins> # --hints-- You should declare an `idToText` variable in your `evalFormula` function.


"title": "Periodic Table Database", "intro": [ "This is one of the required projects to earn your certification.", <del> "For this project, you will create Bash a script to get information about chemical elements from a periodic table database." </del> <ins> "For this project, you will create a Bash script to get information about chemical elements from a periodic table database." </ins> ] }, "build-a-salon-appointment-scheduler-project": {


This certifies that

{t('certification.certifies')}

 {displayName}

has successfully completed the freeCodeCamp.org

{t('certification.completed')}

 {certTitle}

  Developer Certification, representing approximately{' '} {completionTime} hours of coursework   {t('certification.developer')} {completionTime} hours of coursework


# --description-- <del> This is one of the required projects to earn your certification. For this project, you will create Bash a script to get information about chemical elements from a periodic table database. </del> <ins> This is one of the required projects to earn your certification. For this project, you will create a Bash script to get information about chemical elements from a periodic table database. </ins> # --instructions--


--- <del> ```js console.log(`${string1} ${string2}`); ``` </del> <ins> ```console.log(`${string1} ${string2}`);``` </ins> ---


Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. <del> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </del> <ins> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </ins> **User Story #1:** I can see a title element that has a corresponding `id="title"`.


# --instructions-- <del> In the package.json file, your current rule for how npm may upgrade `@freecodecamp/example` is to use a specific version (1.2.13). But now, you want to allow the latest 1.2.x version. </del> <ins> In the package.json file, your current rule for how npm may upgrade `@freecodecamp/example` is to use a specific version (`1.2.13`). But now, you want to allow the latest `1.2.x` version. </ins> Use the tilde (`~`) character to prefix the version of `@freecodecamp/example` in your dependencies, and allow npm to update it to any new _patch_ release.


return ( <FullWidthRow key={superBlock}> <Spacer />
Full Stack Certification

Legacy Full Stack Certification

 Once you've earned the following freeCodeCamp certifications, you'll  be able to claim The Full Stack Developer Certification:   be able to claim the Legacy Full Stack Developer Certification:

Responsive Web Design


Functional programming is all about creating and using non-mutating functions. <del> 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: </del> <ins> The last challenge introduced the `concat` method as a way to merge arrays into a new array without mutating the original arrays. Compare `concat` to the `push` method. `push` adds items to the end of the same array it is called on, which mutates that array. Here's an example: </ins> ```js const arr = [1, 2, 3]; <del> arr.push([4, 5, 6]); </del> <ins> arr.push(4, 5, 6); </ins> ``` <del> `arr` would have a modified value of `[1, 2, 3, [4, 5, 6]]`, which is not the functional programming way. </del> <ins> `arr` would have a modified value of `[1, 2, 3, 4, 5, 6]`, which is not the functional programming way. </ins> <del> `concat` offers a way to add new items to the end of an array without any mutating side effects. </del> <ins> `concat` offers a way to merge new items to the end of an array without any mutating side effects. </ins> # --instructions-- <del> 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. </del> <ins> Change the `nonMutatingPush` function so it uses `concat` to merge `newItem` to the end of `original` without mutating `original` or `newItem` arrays. The function should return an array. </ins> # --hints--


<del> # Contributors Guide </del> <ins> # Contributor's Guide </ins> ## I want to help! We welcome pull requests from Free Code Camp campers (our students) and seasoned JavaScript developers alike! Follow these steps to contribute: <del> 1.  Check our [public Waffle Board](https://waffle.io/freecodecamp/freecodecamp). 2.  Pick an issue, let us know you're working on it, and start working on it. If you've found a bug that is not on the board, [follow these steps](#found-a-bug). 3.  You can find issues we are seeking assistance on by searching for the [Help Wanted](https://github.com/FreeCodeCamp/FreeCodeCamp/labels/help%20wanted) tag. 4.  Feel free to ask for help in our [Help Contributors](https://gitter.im/FreeCodeCamp/HelpContributors) Gitter room. </del> <ins> 1.  Find an issue that needs assistance by searching for the [Help Wanted](https://github.com/FreeCodeCamp/FreeCodeCamp/labels/help%20wanted) tag. 2.  Let us know you are working on it, by posting a comment on the issue. 3.  Feel free to ask for help in our [Help Contributors](https://gitter.im/FreeCodeCamp/HelpContributors) Gitter room. If you've found a bug that is not on the board, [follow these steps](#found-a-bug). </ins> ## Contribution Guidelines 1.  Fork the project: [How To Fork And Maintain a Local Instance of Free Code Camp](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/How-To-Fork-And-Maintain-a-Local-Instance-of-Free-Code-Camp) 2.  Create a branch specific to the issue or feature you are working on. Push your work to that branch. ([Need help with branching?](https://github.com/Kunena/Kunena-Forum/wiki/Create-a-new-branch-with-git-and-manage-branches)) 3.  Name the branch something like `fix/xxx` or `feature/xxx` where `xxx` is a short description of the changes or feature you are attempting to add. For example `fix/email-login` would be a branch where I fix something specific to email login. <del> 4.  You should have [ESLint running in your editor](http://eslint.org/docs/user-guide/integrations.html), and it will highlight anything doesn't conform to [Free Code Camp's JavaScript Style Guide](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Free-Code-Camp-JavaScript-Style-Guide) (you can find a summary of those rules [here](https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/.eslintrc). Please do not ignore any linting errors, as they are meant to **help** you and to ensure a clean and simple code base. Make sure none of your JavaScript is longer than 80 characters per line. </del> <ins> 4. [Set up Linting](#linting-setup) to run as you make changes. 5. When you are ready to share your code, run the test suite `npm test` and ensure all tests pass.  For Windows contributors, skip the jsonlint pretest run by using `npm run test-challenges`, as jsonlint will always fail on Windows, given the wildcard parameters. </ins> 5.  Squash your Commits. Ref: [rebasing](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/git-rebase) <del> 6.  Once your code is ready, submit a [pull request](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Pull-Request-Contribute) from your branch to Free Code Camp's `staging` branch. We'll do a quick code review and give you feedback, then iterate from there. </del> <ins> 6.  Submit a [pull request](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Pull-Request-Contribute) from your branch to Free Code Camp's `staging` branch.  [Travis CI](https://travis-ci.org/FreeCodeCamp/FreeCodeCamp) will then take your code and run `npm test`.  Make sure this passes, then we'll do a quick code review and give you feedback, then iterate from there. </ins> Prerequisites


# --description-- <del> Find the number of non-empty subsets of ${11, 22, 33, ldots, {250250}^{250250}}$, the sum of whose elements is divisible by 250. Enter the rightmost 16 digits as your answer. </del> <ins> Find the number of non-empty subsets of ${{1}^{1}, {2}^{2}, {3}^{3}, ldots, {250250}^{250250}}$, the sum of whose elements is divisible by 250. Enter the rightmost 16 digits as your answer. </ins> # --hints--


# --description-- <del> The phrase `let me show you` can be used to direct attention and introduce something. For example: `Here's the main office area. And over there, let me show you, that's the conference room.` </del> <ins> The phrase `let me show you` can be used to direct attention and introduce something. For example: `This is the main office area. Let me show you to the conference room.` </ins> # --question-- ## --text-- <del> What is the speaker directing attention to after saying `let me show you`? </del> <ins> What is Maria directing attention to? </ins> ## --answers-- <del> The main office area </del> <ins> Main office area </ins> ### --feedback--


import debug from 'debug'; import { isEmail } from 'validator'; import format from 'date-fns/format'; <ins> import { reportError } from '../middlewares/sentry-error-handler.js'; </ins> import { ifNoUser401 } from '../utils/middleware'; import { observeQuery } from '../utils/rx';


.hero-subtitle, .author, .quote, <del> .list-header { </del> <ins> .list-title { </ins> font-size: 1.8rem; }


-   Your function must always return the entire `records` object. -   If `value` is an empty string, delete the given `prop` property from the album. -   If `prop` isn't `tracks` and `value` isn't an empty string, assign the `value` to that album's `prop`. <del> -   If `prop` is `tracks` and value isn't an empty string, add the `value` to the end of the album's `tracks` array. You need to create this array first if the album does not have a `tracks` property. </del> <ins> -   If `prop` is `tracks` and `value` isn't an empty string, you need to update the album's `tracks` array. First, if the album does not have a `tracks` property, assign it an empty array. Then add the `value` as the last item in the album's `tracks` array. </ins> **Note:** A copy of the `recordCollection` object is used for the tests. You should not directly modify the `recordCollection` object.


programmer = "CamperChan"; ``` <del> Note that when reassigning a variable that has already been declared, you do **not** use the `let` keyword. </del> <ins> Note that when reassigning a variable, you do **not** use the `let` keyword again. </ins> After your `console.log`, assign the value `"World"` to your `character` variable.


Your `#video` should have a `src` attribute. ```js <del> const el = document.getElementById('video') assert(!!el && !!el.src) </del> <ins> let el = document.getElementById('video') const sourceNode = el.children; let sourceElement = null; if (sourceNode.length) { sourceElement = [...video.children].filter(el => el.localName === 'source')[0]; } if (sourceElement) { el = sourceElement; } assert(el.hasAttribute('src')); </ins> ``` You should have a `form` element with an `id` of `form`.


editor.addAction({ id: 'toggle-accessibility', label: 'Toggle Accessibility Mode', <del> keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_E], </del> <ins> keybindings: [ monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_E, monaco.KeyMod.WinCtrl | monaco.KeyCode.KEY_E ], </ins> run: () => { const currentAccessibility = storedAccessibilityMode();


isDonating } = user; <del> console.log(showDonation); </del> return ( <Fragment> <Camper


"invalid-protocol": "URL 必须以 http 或 https 开头", "url-not-image": "URL 必须直接链接到图片文件", "use-valid-url": "请使用有效的 URL" <ins> }, "certification": { "certifies": "Chinese: This certifies that", "completed": "Chinese: has successfully completed the freeCodeCamp.org", "developer": "Chinese: Developer Certification, representing approximately", "executive": "Chinese: Executive Director, freeCodeCamp.org", "verify": "Chinese: Verify this certification at {{certURL}}", "issued": "Chinese: Issued" </ins> } }


# --description-- <del> The `border-radius` property accepts up to four values to round the round the top-left, top-right, bottom-right, and bottom-left corners. </del> <ins> The `border-radius` property accepts up to four values to round the top-left, top-right, bottom-right, and bottom-left corners. </ins> Round the top-left corner of `.three` by 30 pixels, the top-right by 25 pixels, the bottom-right by 60 pixels, and bottom-left by 12 pixels.


Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. <del> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </del> <ins> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </ins> **User Story #1:** My heat map should have a title with a corresponding `id="title"`.


#learn-app-wrapper h2.medium-heading { margin-bottom: 50px; <del> margin-top: 0px; </del> text-align: center; }


"description": [ "In computer science, data structures are things that hold data. JavaScript has seven of these. For example, the Number data structure holds numbers.", "Let's learn about the most basic data structure of all: the Boolean. Booleans can only hold the value of either true or false. They are basically little on-off switches.",  "Let's modify our welcomeToBooleansfunction so that it will return trueinstead of falsewhen the run button is clicked."   "Let's modify our welcomeToBooleans function so that it will return true instead of false when the run button is clicked."  ], "tests": [ "assert(typeof(welcomeToBooleans()) === 'boolean', 'message: The welcomeToBooleans() function should return a boolean (true/false) value.');",


Spreadsheet software typically uses `=` at the beginning of a cell to indicate a calculation should be used, and spreadsheet functions should be evaluated. <del> Update your `if` condition to also check if the first character of `value` is `=`. </del> <ins> Use the `&&` operator to add a second condition to your `if` statement that also checks if the first character of `value` is `=`. </ins> # --hints-- <del> Your `if` condition should also check if the first character of `value` is `=`. You may use `[0]`, `.startsWith()`, or `.charAt(0)`. </del> <ins> You should use the `&&` operator to add a second condition to your `if` statement that also checks if the first character of `value` is `=`. You may use `[0]`, `.startsWith()`, or `.charAt(0)`. </ins> ```js assert.match(code, /consts+updates*=s*(?s*events*)?s*=>s*{s*consts+elements*=s*event.target;?s*consts+values*=s*element.value.replace(s*/s/gs*,s*('|"|`)1s*);?s*ifs*(s*(!value.includes(s*element.ids*)s*&&s*(?:value[0]s*===s*('|"|`)=3|value.charAt(0)s*===s*('|"|`)=4|value.startsWith(('|"|`)=5))|(?:value[0]s*===s*('|"|`)=6|value.charAt(0)s*===s*('|"|`)=7|value.startsWith(('|"|`)=8))s*||s*!value.includes(s*element.ids*))s*)s*{s*}/);


"description": [ "Wir haben also gesehen dass Id Deklarationen die von Klassen überschreiben, egal wo sie in deinem style Element CSS stehen.", "Es gibt noch andere Wege CSS zu überschreiben. Erinnerst du dich an Inline Styles?",  "Benutze in-line style um dein h1 Element weiß zu machen. Vergiss nicht, Inline Styles sehen so aus:",   "Benutze inline style um dein h1 Element weiß zu machen. Vergiss nicht, Inline Styles sehen so aus:",  "<h1 style="color: green">", "Lasse die blue-text und pink-text Klassen auf deinem h1 Element." ]


## Instructions
  In the penguin class, create a variable name --penguin-skin and give it a value of gray   In the penguin class, create a variable name --penguin-skin and give it a value of gray.
 ## Tests


assert.include(document.querySelector('#author-container > div')?.className, 'user-card'); ``` <del> Your `div` element should have the `id` of `index`. Remember to use template interpolation to set the `id`. </del> <ins> Your `div` element should have the `id` of `index`. Remember to use string interpolation to set the `id`. </ins> ```js displayAuthors([{author: "Naomi"}]);


Variable naming follows specific rules: names can include letters, numbers, dollar signs, and underscores, but cannot contain spaces and must not begin with a number. <del> Declare a `character` variable in your code. </del> <ins> Use the `let` keyword to declare a variable called `character`. </ins> _Note_: It is common practice to end statements in JavaScript with a semicolon. `;`


Front End Libraries

Data Visualization

APIs and Microservices

Quality Assurance

Legacy Information Security and Quality Assurance


# --description-- <del> We don't want a player's only weapon to break. The logical or operator checks if two statements are true. </del> <ins> We don't want a player's only weapon to break. The logical AND operator checks if two statements are true. </ins> <del> Use the <dfn>logical and</dfn> operator `&&` to add a second condition to your `if` statement. The player's weapon should only break if `inventory.length` does not equal (`!==`) one. </del> <ins> Use the <dfn>logical AND</dfn> operator `&&` to add a second condition to your `if` statement. The player's weapon should only break if `inventory.length` does not equal (`!==`) one. </ins> Here is an example of an `if` statement with two conditions:


`myRegex` should use lazy matching ```js <del> assert(/?/g.test(myRegex)); </del> <ins> assert(/[^][*+?]?/.test(myRegex)); </ins> ``` `myRegex` should not include the string `h1`


loadScript(subscription, deleteScript) { if (deleteScript) scriptRemover('paypal-sdk'); <del> let queries = `?client-id=${this.props.clinetId}&disable-funding=credit,card`; </del> <ins> let queries = `?client-id=${this.props.clientId}&disable-funding=credit,card`; </ins> if (subscription) queries += '&vault=true'; scriptLoader(


"Aquí está el código que puedes poner en tu evento de pulsación para lograrlo:", "
$.getJSON("/json/cats.json", function(json) {
  $(".message").html(JSON.stringify(json));
});
", "Una vez lo añadas, pulsa el botón "Get Message". Su función Ajax sustituirá el texto "The message will go here" con la salida JSON en bruto de la API de fotos de gato de Free Code Camp."  ], "namePt": "Obter um JSON com o método getJSON do jQuery", "descriptionPt": [ "Também é possivel solicitar os dados de uma fonte externa. É aqui onde as API's entram em jogo. ", "Lembre que as API's - Interface de Programação de Aplicativos - são ferramentas que os computadores usam para se comunicar entre si.", "A maioria das API's transferem de dados para web em um formato chamado JSON. JSON significa notação de objeto JavaScript (JavaScript Object Notation).", "Você já usou JSON para criar objetos em JavaScript. O JSON não é mais que as propriedades de um objeto e seus valores atuais, separados entre { e um }. ", "Estas propriedades e seus valores são muitas vezes denominados de " pares chave-valor".", "Vamos obter o JSON da API de fotos de gatos do Free Code Camp.", "Aqui esta o código que você pode por no nosso evento de clique para fazer isso:", "
$.getJSON("/json/cats.json", function(json) {
  $(".message").html(JSON.stringify(json));
});
", "Uma vez adicionadas, aperte o botão "Get Message". Sua função Ajax substituirá o texto "The message will go here" com a saída bruta do JSON da API de gatos do Free Code Camp."  ] }, {


Your `for` loop should use `i < count` as the condition. ```js <del> assert.match(__helpers.removeJSComments(code), /fors*(s*lets+is*=s*0;s*is*<s*count;/); </del> <ins> assert.match(__helpers.removeJSComments(code), /fors*(s*lets+is*=s*0s*;s*is*<s*counts*;/); </ins> ``` # --seed--


"Bracket notation is a way to get a character at a specific index within a string.", "Computers don't start counting at 1 like humans do. They start at 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].",  "Use bracket notation to find the first character in a the firstLetterOfLastName variable.",   "Use bracket notation to find the first character in the firstLetterOfLastName variable.",  "Try looking at the firstLetterOfFirstName variable declaration if you get stuck." ], "tests": [


عربي 	  中文 	  Português 	   русский 	    Русский 	   Español 	  Ελληνικά


"id": "56533eb9ac21ba0edf2244d4", "title": "Comparison with the Greater Than Operator", "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.",   "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", "
 5 > 3   // true
 7 > '3' // true
 2 > 3   // false
'1' > 9  // false
", "
Instructions
",


const mapStateToProps = createSelector( userSelector, user => ({ <del> ...user.profileUI, </del> user }) );


], "helpRoom": "Help", "fileName": "01-responsive-web-design/basic-css.json" <del> } </del>  No newline at end of file <ins> } </ins>


// when non-empty search input submitted return query ? window.location.assign( <del> `https://freecodecamp.org/news/search/?query=${encodeURIComponent( </del> <ins> `https://www.freecodecamp.org/news/search/?query=${encodeURIComponent( </ins> query )}` )


You can help expand them and make their wording better. You can also update the user stories to explain the concept better or remove redundant ones and improve the challenge tests to make them more accurately test people's code. <del> **If you're interested in improving these coding challenges, here's [how to work on coding challenges](/how-to-work-on-coding-challenges.md).** </del> <ins> **If you're interested in improving these coding challenges, here's [how to work on coding challenges](how-to-work-on-coding-challenges.md).** </ins> ### Learning Platform


assert.match(attack.toString(), /ifs*(Math.random()s*<=s*.1/); ``` <del> You should use the logical and operator `&&`. </del> <ins> You should use the logical AND operator `&&`. </ins> ```js assert.match(attack.toString(), /ifs*(Math.random()s*<=s*.1s*&&/); ``` <del> You should use the logical and operator to check if `inventory.length` does not equal `1`. </del> <ins> You should use the logical AND operator to check if `inventory.length` does not equal `1`. </ins> ```js assert.match(attack.toString(), /ifs*(Math.random()s*<=s*.1s*&&s*inventory.lengths*!==s*1s*)/);


<ins> import { FastifyPluginCallbackTypebox, Type } from '@fastify/type-provider-typebox'; type Endpoints = [string, 'GET' | 'POST'][]; export const endpoints: Endpoints = [ ['/refetch-user-completed-challenges', 'POST'], ['/certificate/verify-can-claim-cert', 'GET'], ['/api/github', 'GET'] ]; export const deprecatedEndpoints: FastifyPluginCallbackTypebox = ( fastify, _options, done ) => { endpoints.forEach(([endpoint, method]) => { fastify.route({ method, url: endpoint, schema: { response: { 410: Type.Object({ message: Type.Object({ type: Type.Literal('info'), message: Type.Literal( 'Please reload the app, this feature is no longer available.' ) }) }) } }, handler: async (_req, reply) => { void reply.status(410); return { message: { type: 'info', message: 'Please reload the app, this feature is no longer available.' } } as const; } }); }); done(); }; </ins>


} const propTypes = { <del> clinetId: PropTypes.string, </del> <ins> clientId: PropTypes.string, </ins> createOrder: PropTypes.func, createSubscription: PropTypes.func, donationAmount: PropTypes.number,


.col-xs-12.col-sm-9.col-md-10 li.large-p.faded.negative-10 a(href='#' + challengeBlock.dashedName)= challengeBlock.name <del> h3= challengeBlock </del> else .hidden-xs.col-sm-3.col-md-2 .progress.progress-bar-padding.text-center.thin-progress-bar


"id": "bad87fee1348bd9aedf07756", "title": "Override All Other Styles by using Important", "description": [  "Yay! We just proved that in-line styles will override all the CSS declarations in your style element.",   "Yay! We just proved that inline styles will override all the CSS declarations in your style element.",  "But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.", "In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use !important",  "Let's go all the way back to our pink-text class declaration. Remember that our pink-text class was overridden by subsequent class declarations, id declarations, and in-line styles.",   "Let's go all the way back to our pink-text class declaration. Remember that our pink-text class was overridden by subsequent class declarations, id declarations, and inline styles.",  "Let's add the keyword !important to your pink-text element's color declaration to make 100% sure that your h1 element will be pink.", "An example of how to do this is:", "color: red !important;"


dragAndDrop: true, lightbulb: { enabled: false <del> } </del> <ins> }, quickSuggestions: false </ins> }; this._editor = null;


# --description-- <del> Inside the `case` for `mm-dd-yyyy-h-mm`, set the `textContent` property of `currentDateParagraph` to `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`. </del> <ins> When the user selects the `Month, Day, Year, Hours, Minutes` option from the dropdown, you need to display the date in the format `mm-dd-yyyy h Hours m Minutes`. Inside the `case` for `mm-dd-yyyy-h-mm`, use string interpolation to assign the formatted date from above to the `textContent` property of `currentDateParagraph`. Make sure to use the `month`, `day`, `year`, `hours`, and `minutes` variables in your answer. </ins> # --hints-- <del> You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` to the `textContent` property of `currentDateParagraph`. </del> <ins> Your answer should follow this format: `mm-dd-yyyy h Hours m Minutes`. Replace `mm`, `dd`, `yyyy`, `h`, and `m` with the `month`, `day`, `year`, `hours`, and `minutes` variables you created earlier. </ins> ```js const pattern = /cases*('|")mm-dd-yyyy-h-mm1s*:s*currentDateParagraph.textContents*=s*`(${month}-${day}-${year} ${hours} Hours ${minutes} Minutes)`/;


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*myStrings*)/)); - text: Your result should return true.


 Quincy Larson

Executive Director, freeCodeCamp.org

{t('certification.executive')}

 <Row>
Verify this certification at {certURL}

 {t('certification.verify', { certURL: certURL })}
  </Row>  </Row>


render() { const { duration, planId, amount } = this.state; const isSubscription = duration !== 'onetime'; <ins> if (!paypalClientId) { return null; } </ins> return ( <PayPalButtonScriptLoader amount={amount} <del> clinetId={paypalClientId} </del> <ins> clientId={paypalClientId} </ins> createOrder={(data, actions) => { return actions.order.create({ purchase_units: [


except: continue if len(exp_ball_list_copy) == 0: <del> success += 1 probability = success/num_experiments </del> <ins> success += 1 probability = success/num_experiments </ins> return probability ```


{ objectID: `default-hit-${searchQuery}`, query: searchQuery, <del> url: `https://freecodecamp.org/news/search/?query=${encodeURIComponent( </del> <ins> url: `https://www.freecodecamp.org/news/search/?query=${encodeURIComponent( </ins> searchQuery )}`, title: `See all results for ${searchQuery}`,


Your code should have two `meta` elements. ```js <del> assert(code.match(/<meta.*/?>/g).length === 2); </del> <ins> assert(code.match(/<meta.*?/?>/g).length === 2); </ins> ``` Your `meta` element should have a `name` attribute with a value of `viewport`.


) return drawn <del> def experiment(hat, expected_balls, num_balls_drawn, num_experiments): </del> <ins> def experiment(hat, expected_balls, num_balls_drawn, num_experiments): </ins> expected_balls_list = [] drawn_list = [] success = 0


Typeface plays an important role in the accessibility of a page. Some fonts are easier to read than others, and this is especially true on low-resolution screens. <del> Change the font for both the `h1` and `h2` elements to `Verdana`, and use another sans-serif _web safe_ font as a fallback. </del> <ins> Change the font for both the `h1` and `h2` elements to `Verdana`, and use another web-safe font in the sans-serif family as a fallback. </ins> Also, add a `border-bottom` of `4px solid #dfdfe2` to `h2` elements to make the sections distinct.


id: 'execute-challenge', label: 'Run tests', /* eslint-disable no-bitwise */ <del> keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter], </del> <ins> keybindings: [ monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, monaco.KeyMod.WinCtrl | monaco.KeyCode.Enter ], </ins> run: () => { if (props.usesMultifileEditor && !isFinalProject(props.challengeType)) { if (challengeIsComplete()) {


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");'  ```


```js // multiplies the first input value by the second and returns it const multiplier = (item, multi) => item * multi; <ins> multiplier(4, 2); // returns 8 </ins> ``` </section>


void fastify.register(devLoginCallback, { prefix: '/auth' }); } void fastify.register(settingRoutes); <ins> void fastify.register(deprecatedEndpoints); </ins> return fastify; };


selectionHighlight: false, overviewRulerBorder: false, hideCursorInOverviewRuler: true, <del> renderIndentGuides: false, </del> <ins> renderIndentGuides: props.challengeType === challengeTypes.python, </ins> minimap: { enabled: false },


editor.addAction({ id: 'save-editor-content', label: 'Save editor content', <del> keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S], </del> <ins> keybindings: [ monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, monaco.KeyMod.WinCtrl | monaco.KeyCode.KEY_S ], </ins> run: props.challengeType === challengeTypes.multifileCertProject && props.isSignedIn


## Instructions
  Combine the two if statements into one statement 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


(data) => { assert.match( data, <del> /passport.use.*new GitHubStrategy/gi, </del> <ins> /passport.use.*new GitHubStrategy/gis, </ins> 'Passport should use a new GitHubStrategy' ); assert.match(


In the last challenge, you told npm to only include a specific version of a package. That’s a useful way to freeze your dependencies if you need to make sure that different parts of your project stay compatible with each other. But in most use cases, you don’t want to miss bug fixes since they often include important security patches and (hopefully) don’t break things in doing so. <del> To allow an npm dependency to update to the latest PATCH version, you can prefix the dependency’s version with the tilde (`~`) character. Here's an example of how to allow updates to any 1.3.x version. </del> <ins> To allow an npm dependency to update to the latest PATCH version, you can prefix the dependency’s version with the tilde (`~`) character. Here's an example of how to allow updates to any `1.3.x` version. </ins> ```json "package": "~1.3.8"


When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. <del> The `package.json` file is the center of any Node.js project or npm package. It stores information about your project, similar to how the <head> section of an HTML document describes the content of a webpage. It consists of a single JSON object where information is stored in key-value pairs. There are only two required fields; "name" and "version", but it’s good practice to provide additional information about your project that could be useful to future users or maintainers. </del> <ins> The `package.json` file is the center of any Node.js project or npm package. It stores information about your project, similar to how the `head` section of an HTML document describes the content of a webpage. It consists of a single JSON object where information is stored in key-value pairs. There are only two required fields; `name` and `version`, but it’s good practice to provide additional information about your project that could be useful to future users or maintainers. </ins> <del> If you look at the file tree of your project, you will find the package.json file on the top level of the tree. This is the file that you will be improving in the next couple of challenges. </del> <ins> If you look at the file tree of your project, you will find the `package.json` file on the top level of the tree. This is the file that you will be improving in the next couple of challenges. </ins> One of the most common pieces of information in this file is the `author` field. It specifies who created the project, and can consist of a string or an object with contact or other details. An object is recommended for bigger projects, but a simple string like the following example will do for this project.


onChange={this.handleChange} onFocus={this.handleFocus} onSubmit={this.handleSearch} <del> showLoadingIndicator={true} </del> <ins> showLoadingIndicator={false} </ins> translations={{ placeholder }} /> </ObserveKeys>


componentDidMount() { this.props.updateProjectForm({}); } <del> componentDidUpdate() { this.props.updateProjectForm({}); } componentWillUnmount() { this.props.updateProjectForm({}); } </del> handleSubmit(values) { this.props.updateProjectForm(values); this.props.onSubmit();


height: 100%; width: 100%; } <ins> .CodeMirror-lint-tooltip { z-index: 9999; } </ins>  No newline at end of file


"Hagamos que cuando un usuario pulse el botón "Get Message", el texto del elemento con la clase message cambie para decir "Here is the message".", "Podemos hacerlo añadiendo el siguiente código dentro de nuestro evento de pulsación:", "$(".message").html("Here is the message");"  ], "namePt": "Mundando texto com eventos de clique", "descriptionPt": [ "Quando nosso evento de clique ocorre, podemos utilizar o Ajax para atualixar um elemento HTML", "Vamos fazer que quando um usuário clicar no botão "Get Message", o texto do elemento com a classe message passe a dizer "Here is the message".", "Podemos fazer isso adicionando o seguinte código dentro do nosso evento de clique:", "$(".message").html("Here is the message");"  ] }, {


transform: translateY(-50%); } <ins> .landing-skill-icon { color: #215f1e; font-size: 150px; } .black-text { color: #333; font-weight: 400; font-size: 40px; } .font-awesome-padding { margin-top: 45px; margin-bottom: 20px; } </ins> .background-svg { width: 220px; height: 220px;


"invalid-protocol": "La URL debe comenzar con http o https", "url-not-image": "URL debes enlazar directamente a un archivo de imagen", "use-valid-url": "Utiliza un URL válido" <ins> }, "certification": { "certifies": "Spanish: This certifies that", "completed": "Spanish: has successfully completed the freeCodeCamp.org", "developer": "Spanish: Developer Certification, representing approximately", "executive": "Spanish: Executive Director, freeCodeCamp.org", "verify": "Spanish: Verify this certification at {{certURL}}", "issued": "Spanish: Issued" </ins> } }


Similar to how the tilde we learned about in the last challenge allows npm to install the latest PATCH for a dependency, the caret (`^`) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes. <del> Your current version of `@freecodecamp/example` should be "~1.2.13" which allows npm to install to the latest 1.2.x version. If you were to use the caret (^) as a version prefix instead, npm would be allowed to update to any 1.x.x version. </del> <ins> Your current version of `@freecodecamp/example` should be `~1.2.13` which allows npm to install to the latest `1.2.x` version. If you were to use the caret (^) as a version prefix instead, npm would be allowed to update to any `1.x.x` version. </ins> ```json "package": "^1.3.8" ``` <del> This would allow updates to any 1.x.x version of the package. </del> <ins> This would allow updates to any `1.x.x` version of the package. </ins> # --instructions--


"Here are the user stories you must enable, and optional bonus user stories:", "User Story: As a user, I can access all of the portfolio webpage's content just by scrolling.", "User Story: As a user, I can click different buttons that will take me to the portfolio creator's different social media pages.",  "User Story: As a user, I can see thumbnail images of different projects the portfolio creator has built (if you don't haven't built any websites before, use placeholders.)",   "User Story: As a user, I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)",  "Bonus User Story: As a user, I navigate to different sections of the webpage by clicking buttons in the navigation.", "Don't worry if you don't have anything to showcase on your portfolio yet - you will build several several apps on the next few CodePen challenges, and can come back and update your portfolio later.", "There are many great portfolio templates out there, but for this challenge, you'll need to build a portfolio page yourself. Using Bootstrap will make this much easier for you.",


max-height: 100%; font-size: 27px; white-space: normal; <ins> width: 100%; </ins> } .default-layout {


reload(probability_calculator) probability_calculator.random.seed(95) <del> def test_hat_draw(self): </del> <ins> class UnitTests(unittest.TestCase): maxDiff = None def test_hat_draw(self): </ins> hat = probability_calculator.Hat(red=5,blue=2) actual = hat.draw(2) expected = ['blue', 'red']


{currentCertTitles.map(title => ( <Certification key={title} certName={title} t={t} /> ))} <ins> <Spacer size='medium' /> </ins> <SectionHeader>{t('settings.headings.legacy-certs')}</SectionHeader> <LegacyFullStack {...props} /> {legacyCertTitles.map(title => (


h4.negative-10.text-nowrap Live Content Manager img.profile-image(src='https://s3.amazonaws.com/freecodecamp/jason-rueckert.jpg' alt="Jason Rueckert's picture") h4.text-nowrap Seattle, Washington <del> p.negative-10 "My high school job was testing basketball shoes for Nike. I learned code to work smarter, not harder. I have no thyroid." </del>  No newline at end of file <ins> p.negative-10 "My high school job was testing basketball shoes for Nike. I learned code to work smarter, not harder. I have no thyroid." </ins>


</html> `, { runScripts: 'dangerously', <del> virtualConsole </del> <ins> virtualConsole, url: 'http://localhost' </ins> }); const { window } = dom;


The attack of the monster will be based on the monster's `level` and the player's `xp`. In the `getMonsterAttackValue` function, use `const` to create a variable called `hit`. Assign it the equation `(level * 5) - (Math.floor(Math.random() * xp));`. <del> This will set the monster's attack to five times their `level` minus a random number between 0 and the player's `xp`. </del> <ins> This will set the monster's attack to five times their `level` minus a random number between `0` and the player's `xp`. </ins> # --hints--


import { omit } from 'lodash-es'; import { call, <del> delay, </del> put, select, takeLatest, <del> takeEvery </del> <ins> takeEvery, debounce </ins> } from 'redux-saga/effects'; import { createFlashMessage } from '../../components/Flash/redux';


], "tests": [ "assert($("i").hasClass("fa fa-thumbs-up"), 'Add an i element with the classes fa and fa-thumbs-up.')",  "assert($("i.fa-thumbs-up").parent().text().match(/Like/gi), 'Your fa-thumbs-up icon should be located within the Like button.')",  "assert($("button").children("i").length > 0, 'Nest your i element within your button element.')", "assert(editor.match(//g), 'Make sure your i element has a closing tag.')" ],


Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. <del> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </del> <ins> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </ins> **User Story #1:** My choropleth should have a title with a corresponding `id="title"`.


"i means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.", "Regular expressions are written by surrounding the pattern with / symbols.", "Let's try selecting all the occurrences of the word and in the string Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.",  "We can do this by replacing the . part of our regular expression with the current regular expression with the word and."   "We can do this by replacing the . part of our regular expression with the word and."  ], "tests": [ "assert(test==2, 'message: Your regular expression should find two occurrences of the word and.');",


- 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(JSON.stringify(ratings) === JSON.stringify([{"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"}]);  ```


describe('
', () => { it('should apply striped bg color to every odd
 element', () => {  render(
);   render(
);   const table = screen.getByTestId('test');   const table = screen.getByRole('table');  const oddTableRowClass = '[&>tbody>tr:nth-of-type(odd)]:bg-background-tertiary'; expect(table).toHaveClass(oddTableRowClass); }); it('should apply the condensed to  and  elements', () => {  render(
);   render(
);   const table = screen.getByTestId('test');   const table = screen.getByRole('table');  const tableDataClass = '[&_td]:p-1 '; const tableHeaderClass = '[&_th]:p-1';


--- # --description-- <ins> In your `highPrecedence` function, declare a variable using `const` and assign it a regex that checks if the string passed to the `str` parameter matches the pattern of a number followed by a `*` or `/` operator followed by another number. </ins> <del> In your `highPrecedence` function, declare a `regex` variable. Assign it a regular expression that matches a number (including decimal numbers) followed by a `*` or `/` operator followed by another number. Each number, and the operator, should be in separate capture groups. Incorporate the regular expression you've defined into your `highPrecedence` function to test if the provided string `str` matches the pattern. Use the `test()` method on your `regex` variable and return the result. </del> <ins> Your function should return a boolean value. Remember that you can use the `test()` method for this. </ins> # --hints-- <del> You should declare a `regex` variable in your `highPrecedence` function. </del> <ins> You should declare a variable in your `highPrecedence` function for your regex. </ins> ```js <del> assert.match(code, /consts+highPrecedences*=s*((s*strs*)|str)s*=>s*{s*(?:const|let|var)s+regex/); </del> <ins> assert.match(code, /consts+highPrecedences*=s*((s*strs*)|str)s*=>s*{s*(?:const|let|var)s+w+/); </ins> ``` <del> You should use `const` to declare your `regex` variable. </del> <ins> You should use `const` to declare your regex variable. </ins> ```js <del> assert.match(code, /consts+highPrecedences*=s*((s*strs*)|str)s*=>s*{s*consts+regex/); </del> <ins> assert.match(code, /consts+highPrecedences*=s*((s*strs*)|str)s*=>s*{s*consts+w+/); </ins> ``` <del> Your `regex` variable should be a regular expression. </del> <ins> Your regex variable should contain a regular expression. </ins> ```js <del> assert.match(code, /consts+highPrecedences*=s*((s*strs*)|str)s*=>s*{s*consts+regexs*=s*//); </del> <ins> assert.match(code, /consts+highPrecedences*=s*((s*strs*)|str)s*=>s*{s*consts+w+s*=s*//); </ins> ``` <del> Your highPrecedence should return `regex.test(str);` </del> <ins> Your `highPrecedence` function should return a boolean value. </ins> ```js <del> assert.match(code, /returns+regex.test(str);?/); </del> <ins> assert.isBoolean(highPrecedence("12*2")); </ins> ``` <del> Please enter a properly functioning regex. </del> <ins> Your `highPrecedence` function should correctly check if the string matches the pattern of a number followed by a `*` or `/` operator followed by another number. </ins> ```js <del> assert.strictEqual(highPrecedence("5*3"), true); </del> <ins> assert.isTrue(highPrecedence("5*3")); assert.isFalse(highPrecedence("5")); assert.isTrue(highPrecedence("10/2")); assert.isFalse(highPrecedence("*")); </ins> ``` # --seed--


"Cuando estamos recorriendo estos objetos, usemos esta propiedad imageLink para visualizar la imagen en un elemento img.", "Aquí está el código que hace esto:", "html += "<img src = '" + val.imageLink + "'>";"  ], "namePt": "Apresentar as imagens da fonte de dados", "descriptionPt": [ "Como temos visto nas ultimas lições, cada objeto em nosso array JSON contém a chave imageLink com um valor que corresponde a url da imagem de um gato.", "Quando estamos percorrendo por estes objetos, usamos a propriedade imageLink para visualizar a imagem em um elemento img.", "Aqui está o código para fazer isso:", "html += "<img src = '" + val.imageLink + "'>";"  ] }, {


return ( <Button bsStyle='default' <del> className={(block ? 'btn-cta-big' : '') + ' signup-btn btn-cta'} </del> <ins> className={(block ? 'btn-cta-big btn-block' : '') + ' signup-btn btn-cta'} </ins> data-test-label={dataTestLabel} href={href} onClick={() => gtagReportConversion()}


}, { "id":"cf1111c1c12feddfaeb8bdef",  "title": "Find White Space with Regular Expressions",   "title": "Find Whitespace with Regular Expressions",  "difficulty":"9.986", "description":[  "We can also use selectors like s to find spaces in a string.",   "We can also use selectors like s to find whitespace in a string.", "The whitespace characters are " " (space), r (carriage return), n (newline), t (tab), and f (form feed).",  "It is used like this:", "/s+/g",  "Select all the spaces in the sentence string."   "Select all the whitespace characters in the sentence string."  ], "tests":[ "assert(test === 7, 'message: Your RegEx should have found seven spaces in the testString.');",


"@commitlint/cli": "^7.0.0", "@commitlint/config-conventional": "^7.0.1", "@commitlint/travis-cli": "^7.0.0", <del> "@freecodecamp/challenge-md-parser": "^1.0.0", </del> <ins> "@freecodecamp/challenge-md-parser": "^0.0.1", </ins> "@semantic-release/changelog": "^2.0.2", "@semantic-release/git": "^5.0.0", "babel-cli": "^6.3.17",


extends layout block content <del> .hidden-xs a(href='https://github.com/freecodecamp/freecodecamp') img(style='position: absolute; top: 40; right: 0; border: 0; margin-top: -30px;', src='https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67', alt='Fork me on GitHub', data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png') </del> .jumbotron .text-center h1.hug-top Code with Us


#### 2. [JavaScript Algorithms and Data Structures Certification](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/) <ins> - [Learn Introductory JavaScript by Building a Pyramid Generator](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/#learn-introductory-javascript-by-building-a-pyramid-generator) </ins> - [Learn Basic JavaScript by Building a Role Playing Game](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/#learn-basic-javascript-by-building-a-role-playing-game) - [Learn Form Validation by Building a Calorie Counter](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/#learn-form-validation-by-building-a-calorie-counter) - [Learn Basic String and Array Methods by Building a Music Player](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/#learn-basic-string-and-array-methods-by-building-a-music-player)


<Col sm={10} smOffset={1} xs={12}> <Spacer /> <h1 className='text-center big-heading'> <del> {name ? 'Welcome back, ' + name + '.' : 'Welcome to freeCodeCamp.org'} </del> <ins> {name ? `Welcome back, ${name}.` : `Welcome to freeCodeCamp.org`} </ins> </h1> <Spacer /> </Col>


const count = 8; const rows = []; <del> --fcc-editable-region-- </del> function padRow() { } <ins> --fcc-editable-region-- </ins> padRow(); --fcc-editable-region--


"Después, iteremos a traveś de nuestro JSON, añadiendo más HTML a esa variable. Cuando se termina el ciclo, vamos a presentarla. ", "Aquí está el código que hace esto:", "
json.forEach(function(val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function(key) {
    html += "<b>" + key + "</b>: " + val[key] + "<br>";
  });
  html += "</div><br>";
});
"  ], "namePt": "Converter dados JSON para HTML", "descriptionPt": [ "Agora que estamos obtendo os dados de uma API JSON, vamos mostra-los em nosso HTML", "Podemos usar o método .forEach() para percorrer os nossos dados e modificar o elementos HTML.", "Em primeiro lugar, vamos declarar uma variável chamada html com var html = "";.", "Depois, vamos percorrer através do nosso JSON, adicionando mais HTML para a nossa variável. Quando essa iteração terminar, vamos apresentar o resultado.", "Aqui está o código que faz isso:", "
json.forEach(function(val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function(key) {
    html += "<b>" + key + "</b>: " + val[key] + "<br>";
  });
  html += "</div><br>";
});
"  ] }, {


"assert.deepEqual(friendly(['2015-07-01', '2015-07-04']), ['July 1st','4th'], 'ending month should be omitted since it is already mentioned');", "assert.deepEqual(friendly(['2015-12-01', '2016-02-03']), ['December 1st','February 3rd'], 'two months apart can be inferred if it is the next year');", "assert.deepEqual(friendly(['2015-12-01', '2017-02-03']), ['December 1st, 2015','February 3rd, 2017']);", <del> "assert.deepEqual(friendly(['2016-03-01', '2016-05-05']), ['March 1st','May 5th, 2016']);", </del> <ins> "assert.deepEqual(friendly(['2016-03-01', '2016-05-05']), ['March 1st','May 5th'], 'one month apart can be inferred it is the same year');", </ins> "assert.deepEqual(friendly(['2017-01-01', '2017-01-01']), ['January 1st, 2017'], 'since we do not duplicate only return once');", "assert.deepEqual(friendly(['2022-09-05', '2023-09-04']), ['September 5th, 2022','September 4th, 2023']);" ],


- text: The value of remainder should be 2 testString: assert(remainder === 2); - text: You should use the % operator  testString: assert(/s+?remainders*?=s*?.*%.*;/.test(code));   testString: assert(/s+?remainders*?=s*?.*%.*;?/.test(code));  ```


# --description-- <del> Following the same pattern, use that code in the `fightBeast` and `fightDragon` functions. Remember that `beast` is at index `1` and `dragon` is at index `2`. Also, remove the `console.log` call from your `fightDragon` function. </del> <ins> Following the same pattern as the `fightSlime` function, use that code in the `fightBeast` and `fightDragon` functions. Remember that `beast` is at index `1` and `dragon` is at index `2`. Also, remove the `console.log` call from your `fightDragon` function. </ins> # --hints--


import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import { Button, Form } from '@freecodecamp/react-bootstrap'; <del> import { isEqual } from 'lodash'; </del> import { userSelector } from '../../redux'; import { submitProfileUI } from '../../redux/settings';


br br a.btn.nonprofit-cta.btn-success(href="/nonprofits") I'm with a nonprofit and want help coding something <del> include partials/about include partials/faq </del>  No newline at end of file <ins> .big-break h2 Campers you'll hang out with: .row .col-xs-12.col-sm-12.col-md-4 img.img-responsive.testimonial-image.img-center(src="https://s3.amazonaws.com/freecodecamp/testimonial-jen.jpg", alt="@jenthebest's testimonial image") .testimonial-copy Getting back on track with Free Code Camp and committing to a new career in 2015! h3 - @jenthebest .col-xs-12.col-sm-12.col-md-4 img.img-responsive.testimonial-image.img-center(src="https://s3.amazonaws.com/freecodecamp/testimonial-tate.jpg", alt="@TateThurston's testimonial image") .testimonial-copy Just built my company's website with skills I've learned from Free Code Camp! h3 - @TateThurston .col-xs-12.col-sm-12.col-md-4 img.img-responsive.testimonial-image.img-center(src="https://s3.amazonaws.com/freecodecamp/testimonial-cynthia.jpg", alt="@cynthialanel's testimonial image") .testimonial-copy  I'm currently working through Free Code Camp to improve my JavaScript. The community is very welcoming! h3 - @cynthialanel .big-break h2 Skills you'll learn: .text-center .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-social-html5 .black-text HTML5 .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-social-css3 .black-text CSS3 .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-social-javascript .black-text JavaScript .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.fa.fa-database.font-awesome-padding .black-text Databases .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-social-chrome .black-text DevTools .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-social-nodejs .black-text Node.js .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-social-angular .black-text Angular.js .col-xs-12.col-sm-12.col-md-3 .landing-skill-icon.ion-ios-loop-strong .black-text Agile .big-break h2   h2 Fast facts about our community: h3.col-xs-offset-0.col-sm-offset-1.col-md-offset-2 ul.text-left li.ion-code   We're 100% free and open source li.ion-code   We're thousands of professionals who are learning to code li.ion-code   We're building projects for dozens of nonprofits li.ion-code   We share one goal: to boost our careers with code .big-break a.btn.btn-cta.signup-btn(href="/login") Start learning to code (it's free) </ins>  No newline at end of file


Essentially, we expect basic familiarity with some of the aforementioned technologies, tools, and libraries. With that being said, you are not required to be an expert on them to contribute. <del> **If you want to help us improve our codebase, you can either [set up freeCodeCamp locally](/how-to-setup-freecodecamp-locally.md)** </del> <ins> **If you want to help us improve our codebase, you can either [set up freeCodeCamp locally](how-to-setup-freecodecamp-locally.md)** </ins> OR


const url = new URL(val); const topDomain = url.hostname.split('.').slice(-2); if (topDomain.length === 2) { <del> return topDomain.join('.') === domain; </del> <ins> return Array.isArray(domain) ? domain.some(d => topDomain.join('.') === d) : topDomain.join('.') === domain; </ins> } return false; } catch (e) {


"Si lo permites, verás que el texto en el teléfono de la derecha cambiará con tu latitud y longitud", "Aquí hay un código que hace esto:", "
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    $("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
  });
}
"  ], "namePt": "Receber dados de Geo-localização", "descriptionPt": [ "Outra coisa interessante que podemos fazer é acessar a atual localização do nosso usuário. Todos os navegadores tem implementado um geo-localizador que pode nos fornecer essa informação.", "O navegador pode obter a longitude e latitude atual de nossos usuários", "Você irá ver uma janela para bloquear ou permitir que o site possa conhecer a nossa localização atual. O desafio será completado de qualquer maneira, sempre que o código estará correto.", "Se você permitir, irá ver o texto de saída do telefone mudar para sua latitude e longitude.", "Aqui está o código para fazer isso:", "
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    $("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
  });
}
"  ] } ]


 --- id: 5a9d7295424fe3d0e10cad14 title: Cascading CSS variables challengeType: 0 videoUrl: 'https://scrimba.com/c/cyLZZhZ' --- ## Description
 When you create a variable, it is available for you to use inside the element in which you create it. It also is available for any elements nested within it. This effect is known as <dfn>cascading</dfn>. Because of cascading, CSS variables are often defined in the <dfn>:root</dfn> element. :root is a <dfn>pseudo-class</dfn> selector that matches the root element of the document, usually the html element. By creating your variables in :root, they will be available globally and can be accessed from any other selector later in the style sheet.
 ## Instructions
 Define a variable named --penguin-belly in the :root selector and give it the value of pink. You can then see how the value will cascade down to change the value to pink, anywhere that variable is used.
 ## Tests
 ```yml tests: - text: Declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>. testString: assert(code.match(/:roots*?{[sS]*--penguin-bellys*?:s*?pinks*?;[sS]*}/gi), 'Declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.'); ```
 ## Challenge Seed

 ```html <style> :root { /* add code below */ /* add code above */ } body { background: var(--penguin-belly, #c6faf1); } .penguin { --penguin-skin: gray; --penguin-beak: orange; position: relative; margin: auto; display: block; margin-top: 5%; width: 300px; height: 300px; } .right-cheek { top: 15%; left: 35%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .left-cheek { top: 15%; left: 5%; background: var(--penguin-belly, white); width: 60%; height: 70%; border-radius: 70% 70% 60% 60%; } .belly { top: 60%; left: 2.5%; background: var(--penguin-belly, white); width: 95%; height: 100%; border-radius: 120% 120% 100% 100%; } .penguin-top { top: 10%; left: 25%; background: var(--penguin-skin, gray); width: 50%; height: 45%; border-radius: 70% 70% 60% 60%; } .penguin-bottom { top: 40%; left: 23.5%; background: var(--penguin-skin, gray); width: 53%; height: 45%; border-radius: 70% 70% 100% 100%; } .right-hand { top: 0%; left: -5%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 120% 30%; transform: rotate(45deg); z-index: -1; } .left-hand { top: 0%; left: 75%; background: var(--penguin-skin, gray); width: 30%; height: 60%; border-radius: 30% 30% 30% 120%; transform: rotate(-45deg); z-index: -1; } .right-feet { top: 85%; left: 60%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(-80deg); z-index: -2222; } .left-feet { top: 85%; left: 25%; background: var(--penguin-beak, orange); width: 15%; height: 30%; border-radius: 50% 50% 50% 50%; transform: rotate(80deg); z-index: -2222; } .right-eye { top: 45%; left: 60%; background: black; width: 15%; height: 17%; border-radius: 50%; } .left-eye { top: 45%; left: 25%; background: black; width: 15%; height: 17%; border-radius: 50%; } .sparkle { top: 25%; left: 15%; background: white; width: 35%; height: 35%; border-radius: 50%; } .blush-right { top: 65%; left: 15%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .blush-left { top: 65%; left: 70%; background: pink; width: 15%; height: 10%; border-radius: 50%; } .beak-top { top: 60%; left: 40%; background: var(--penguin-beak, orange); width: 20%; height: 10%; border-radius: 50%; } .beak-bottom { top: 65%; left: 42%; background: var(--penguin-beak, orange); width: 16%; height: 10%; border-radius: 50%; } .penguin * { position: absolute; } </style> <div class="penguin"> <div class="penguin-bottom"> <div class="right-hand"></div> <div class="left-hand"></div> <div class="right-feet"></div> <div class="left-feet"></div> </div> <div class="penguin-top"> <div class="right-cheek"></div> <div class="left-cheek"></div> <div class="belly"></div> <div class="right-eye"> <div class="sparkle"></div> </div> <div class="left-eye"> <div class="sparkle"></div> </div> <div class="blush-right"></div> <div class="blush-left"></div> <div class="beak-top"></div> <div class="beak-bottom"></div> </div> </div> ```

 ## Solution
 ```js var code = ":root {--penguin-belly: pink;}" ```


[settingsTypes.updateUserFlagComplete]: (state, { payload }) => payload ? spreadThePayloadOnUser(state, payload) : state, [settingsTypes.verifyCertComplete]: (state, { payload }) => <del> payload ? spreadThePayloadOnUser(state, payload) : state </del> <ins> payload ? spreadThePayloadOnUser(state, payload) : state, [settingsTypes.submitProfileUIComplete]: (state, { payload }) => payload ? { ...state, user: { ...state.user, [state.appUsername]: { ...state.user[state.appUsername], profileUI: { ...payload } } } } : state </ins> }, initialState );


# --instructions-- <del> Write an `@each` directive that goes through a list: `blue, black, red` and assigns each variable to a `.color-bg` class, where the `color` part changes for each item. Each class should set the `background-color` the respective color. </del> <ins> Write an `@each` directive that goes through a list: `blue, black, red` and assigns each variable to a `.color-bg` class, where the `color` part changes for each item to the respective color. Each class should set the `background-color` to the respective color as well. </ins> # --hints--


h4.negative-10.text-nowrap Community Builder img.profile-image(src='https://s3.amazonaws.com/freecodecamp/branden-byers.jpg' alt="Branden Byers picture") h4.text-nowrap Madison, Wisconsin <del> p.negative-10 "I'm a massage therapist and Stay-at-home-dad. I learned Hypercard, then Rails, but now I feel at home with JavaScript." </del> <ins> p.negative-10 "Cookbook author and stay-at-home-dad. Started coding as a kid, got distracted, but now I'm back in full JavaScript force!" </ins> .col-xs-12.col-sm-4.col-md-3.team-member h3.negative-10.text-nowrap Michael Johnson h4.negative-10.text-nowrap Nonprofit Coordinator


```yml tests: - text: The function countOnline should use a `for in` statement to iterate through the object keys of the object passed to it.  testString: assert(code.match(/fors*(s*(var|let)s+[a-zA-Z_$]w*s+ins+[a-zA-Z_$]w*s*)s*{/));   testString: assert(code.match(/fors*(s*(var|let|const)s+[a-zA-Z_$]w*s+ins+[a-zA-Z_$]w*s*)s*{/));  - text: 'The function countOnline should return 1 when the object { Alan: { online: false }, Jeff: { online: true }, Sarah: { online: false } } is passed to it' testString: assert(countOnline(usersObj1) === 1); - text: 'The function countOnline should return 2 when the object { Alan: { online: true }, Jeff: { online: false }, Sarah: { online: true } } is passed to it'


${author}

${bio.length > 50 ? bio.slice(0, 49) + '...' : bio}

${bio.length > 50 ? bio.slice(0, 50) + '...' : bio}
  ${author} author page
 `;


"title": "Declare String Variables", "description": [ "In the previous challenge, we used the code var myName = "your name". This is what we call a String variable. It is nothing more than a "string" of characters. JavaScript strings are always wrapped in quotes.",  "Now let's create two new string variables: myFirstNameand myLastName and assign them the values of your first and last name, respectively."   "Now let's create two new string variables: myFirstName and myLastName and assign them the values of your first and last name, respectively."  ], "tests": [ "assert((function(){if(typeof(myFirstName) !== "undefined" && typeof(myFirstName) === "string" && myFirstName.length > 0){return true;}else{return false;}})(), 'message: myFirstName should be a string with at least one character in it.');",


## Description
  To create a CSS Variable, you just need to give it a name with two dashes in front of it and assign it a value like this:   To create a CSS variable, you just need to give it a name with two dashes in front of it and assign it a value like this:  ```css --penguin-skin: gray;


Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style. <del> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </del> <ins> You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects. </ins> **User Story #1:** My tree map should have a title with a corresponding `id="title"`.


is2018DataVisCert && isApisMicroservicesCert && isFrontEndLibsCert && <del> is2020QaCert && is2020InfosecCert && </del> <ins> isInfosecQaCert && </ins> isJsAlgoDataStructCert && isRespWebDesignCert;


text-align: left; } <del> @media screen and (max-width: 767px) { .help-modal .btn-lg { font-size: 16px; } } </del> .help-text-warning { text-align: left; }


Puedes ayudarnos a: <del> - [📝 Investigar, escribir y actualizar nuestras guías.](#investiga-escribe-y-actualiza-nuestros-artículos-de-guía) </del> <ins> - [📝 Investigar, escribir y actualizar nuestras guías.](#investiga-escribe-y-actualiza-nuestras-guías) </ins> - [💻 Crear, actualizar y corregir errores en nuestros desafíos de código.](#crear-actualizar-y-corregir-errores-en-nuestros-desafíos-de-codificación) - [🌐 Traducir artículos de guía y desafíos de código.](#traducir-artículos-de-guía-y-desafíos-de-codificación) <del> - [🛠 Corregir errores en la plataforma de aprendizaje de freeCodeCamp.org.](#ayúdenos-a-corregir-errores-en-la-plataforma-de-aprendizaje-de-freeCodeCamp.org) </del> <ins> - [🛠 Corregir errores en la plataforma de aprendizaje de freeCodeCamp.org.](#investiga-escribe-y-actualiza-nuestras-guías) </ins> ### Investiga, escribe y actualiza nuestras guías


assert.deepEqual(binarySearch(_testArray, 13), [13]); ``` <ins> `binarySearch(testArray, 70)` should return `[13, 19, 22, 49, 70]`. ```js assert.deepEqual(binarySearch(_testArray, 70), [13, 19, 22, 49, 70]); ``` </ins> # --seed--


assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.media?.mediaText === 'only screen and (max-width: 550px)'); ``` <del> Your new `@media` rule should have a `.hero-title` selector, a `.hero-subtitle, .author, .quote, .list-header` selector, a `.social-icons` selector, and a `.text` selector. These selectors should be in this order. </del> <ins> Your new `@media` rule should have a `.hero-title` selector, a `.hero-subtitle, .author, .quote, .list-title` selector, a `.social-icons` selector, and a `.text` selector. These selectors should be in this order. </ins> ```js assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.selectorText === '.hero-title'); <del> assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.selectorText === '.hero-subtitle, .author, .quote, .list-header'); </del> <ins> assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.selectorText === '.hero-subtitle, .author, .quote, .list-title'); </ins> assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.selectorText === '.social-icons'); assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.selectorText === '.text'); ```


--- ## Case Studies <del> The Software Engineering Ethics Research Institute of the Department of Computer and Information Sciences at East Tennessee State University published a series of  Case Studies to help sensitize practicing software developers and students to the various types of ethical dilemmas they may face. [The International Standard for Professional Software Development and Ethical Responsibility](http://seeri.etsu.edu/TheSECode.htm) forms the basis for much of the analysis in each case. </del> <ins> The Markkula Center for Applied Ethics at Santa Clara University published a large collection of case studies to help expose practicing software developers and students to the various types of ethical dilemmas they may face. </ins> Cases: <del> * [**Big Brother Spyware**](http://seeri.etsu.edu/SECodeCases/ethicsC/BigBrother.htm) – Raises the issues of the tension between privacy, security, and whistleblowing in a post 11 September environment. </del> <ins> * [**Privacy, Technology, and School Shootings**](https://www.scu.edu/ethics/privacy/case-study-on-online-privacy/) - Schools are increasingly monitoring students' online activity. </ins> <del> * [**Computerized Patient Records**](http://seeri.etsu.edu/SECodeCases/ethicsC/Computerized%20Patient%20Records.htm) – The case uses patient records to examine the developer’s responsibility for information security. It evaluates a series of alternatives. </del> <ins> * [**Disclosing Software Vulnerabilities**](https://www.scu.edu/ethics/focus-areas/business-ethics/resources/the-vulnerability-disclosure-debate/) </ins> <del> * [**Death By Wire**](http://seeri.etsu.edu/SECodeCases/ethicsC/DeathByWire.htm) – The case address issues that arise from the shift of control from mechanically based systems to purely electronic/computer systems. It explores a situation where this process has been extended to heavy vehicles. It also looks at what happens when control of safety-critical equipments is turned over to a computer. </del> <ins> * [**Shipping Defective Products to Customers**](https://www.scu.edu/ethics/focus-areas/more/engineering-ethics/engineering-ethics-cases/to-ship-or-not-to-ship/) </ins> <del> * [**Digital Wallets and Whistle Blowing**](http://seeri.etsu.edu/SECodeCases/ethicsC/DigitalWallets.htm) – This is based on a real case involving security and includes an analysis of the decision related to when and how to whistle blow. </del> <ins> * [**Time-Sharing Space**](https://www.scu.edu/ethics/focus-areas/more/engineering-ethics/engineering-ethics-cases/time-sharing-space/) - An intern suspects a fellow intern is being condescending due to her gender. </ins> <del> * [**For Girls Only**](http://seeri.etsu.edu/SECodeCases/ethicsC/ForGirlsOnly.htm) – This case looks at a real case of gender bias in the development of software. </del> <ins> * [**Copyright Concerns**](https://www.scu.edu/ethics/focus-areas/more/engineering-ethics/engineering-ethics-cases/copyright-concerns/) - An employee develops software with some code that they had previously written while employed at another company. </ins> <del> * [**Nano-Technology: Swallow That Chip**](http://seeri.etsu.edu/SECodeCases/ethicsC/NanoTechnology.htm) – This case uses the vehicle of nano-technology to explore ways to address privacy and security issues that face software developers... </del> <ins> * [**Unintended Effects**](https://www.scu.edu/ethics/focus-areas/more/engineering-ethics/engineering-ethics-cases/unintended-effects/) - A manager believes his company is providing the wrong form of technology to an in-need community. </ins> <del> * [**Patriot Missile Case**](http://seeri.etsu.edu/SECodeCases/ethicsC/PatriotMissile.htm) – This piece examines the importance of configuration management and effective design as they relate to the Patriot Missile Disaster. * [**Therac-25**](http://users.csc.calpoly.edu/~jdalbey/SWE/Papers/THERAC25.html) – This case highlights the danger of software-based controls on life-threatening systems. </del> <ins> * [**Insurmountable Differences**](https://www.scu.edu/ethics/focus-areas/more/engineering-ethics/engineering-ethics-cases/insurmountable-differences/) - Responding to racially motivated remarks in the workplace. </ins> #### More Information <del> Additional information is available through the [Software Engineering Ethics Research Institute](http://seeri.etsu.edu) </del> <ins> * [The Markkula Center's homepage.](https://www.scu.edu/ethics/) </ins>


# --description-- <del> Two or more strings can be concatenated by using the `+` operator. For example: `'Hello' + ' there!'` results in `'Hello there!`. </del> <ins> Two or more strings can be concatenated by using the `+` operator. For example: `'Hello' + ' there!'` results in `'Hello there!'`. </ins> Call the `print()` function and use the `+` operator to concatenate the `text` variable to the string `'Encrypted text: '`. Pay attention to the spacing.


bindActionCreators({ submitProfileUI }, dispatch); const propTypes = { <del> isLocked: PropTypes.bool, showAbout: PropTypes.bool, showCerts: PropTypes.bool, showDonation: PropTypes.bool, showHeatMap: PropTypes.bool, showLocation: PropTypes.bool, showName: PropTypes.bool, showPoints: PropTypes.bool, showPortfolio: PropTypes.bool, showTimeLine: PropTypes.bool, </del> submitProfileUI: PropTypes.func.isRequired, <del> user: PropTypes.object </del> <ins> user: PropTypes.shape({ profileUI: PropTypes.shape({ isLocked: PropTypes.bool, showAbout: PropTypes.bool, showCerts: PropTypes.bool, showDonation: PropTypes.bool, showHeatMap: PropTypes.bool, showLocation: PropTypes.bool, showName: PropTypes.bool, showPoints: PropTypes.bool, showPortfolio: PropTypes.bool, showTimeLine: PropTypes.bool }), username: PropTypes.String }) </ins> }; class PrivacySettings extends Component { <del> constructor(props) { super(props); const originalProfileUI = { ...props.user.profileUI }; this.state = { privacyValues: { ...originalProfileUI }, originalProfileUI: { ...originalProfileUI } }; } componentDidUpdate() { const { profileUI: currentPropsProfileUI } = this.props.user; const { originalProfileUI } = this.state; if (!isEqual(originalProfileUI, currentPropsProfileUI)) { /* eslint-disable-next-line react/no-did-update-set-state */ return this.setState(state => ({ ...state, originalProfileUI: { ...currentPropsProfileUI }, privacyValues: { ...currentPropsProfileUI } })); } return null; } </del> handleSubmit = e => e.preventDefault(); <del> toggleFlag = flag => () => this.setState( state => ({ privacyValues: { ...state.privacyValues, [flag]: !state.privacyValues[flag] } }), () => this.props.submitProfileUI(this.state.privacyValues) ); </del> <ins> toggleFlag = flag => () => { const privacyValues = { ...this.props.user.profileUI }; privacyValues[flag] = !privacyValues[flag]; this.props.submitProfileUI(privacyValues); }; </ins> render() { <del> const { privacyValues: { isLocked = true, showAbout = false, showCerts = false, showDonation = false, showHeatMap = false, showLocation = false, showName = false, showPoints = false, showPortfolio = false, showTimeLine = false } } = this.state; </del> const { user } = this.props; <ins> const { isLocked = true, showAbout = false, showCerts = false, showDonation = false, showHeatMap = false, showLocation = false, showName = false, showPoints = false, showPortfolio = false, showTimeLine = false } = user.profileUI; </ins> return ( <div className='privacy-settings'>


git cherry-pick <commit-hash> ``` <del> 4. Resolve any conflicts, and cleanup, install run tests </del> <ins> 4. Resolve any conflicts, cleanup, install dependencies and run tests </ins> ```console npm run clean


} ``` <del> However, this should be used with care as using multiple conditional operators without proper indentation may make your code hard to read. For example: </del> <ins> It is considered best practice to format multiple conditional operators such that each condition is on a separate line, as shown above. Using multiple conditional operators without proper indentation may make your code hard to read. For example: </ins> ```js function findGreaterOrEqual(a, b) {


Is Chuck Norris a Cat Person?

Is Chuck Norris a Cat Person?

Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...


# --instructions-- <del> Add your name as the `author` of the project in the package.json file. </del> <ins> Add your name as the `author` of the project in the `package.json` file. </ins> **Note:** Remember that you’re writing JSON, so all field names must use double-quotes (") and be separated with a comma (,). # --hints-- <del> package.json should have a valid "author" key </del> <ins> `package.json` should have a valid "author" key </ins> ```js (getUserInput) =>


"id": "56533eb9ac21ba0edf2244d5", "title": "Comparison with the Greater Than Or Equal To Operator", "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.",   "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", "
 6  >=  6  // true
 7  >= '3' // true
 2  >=  3  // false
'7' >=  9  // false
", "
Instructions
",


{certPath ? ( <Link className='timeline-cert-link' <del> external={true} to={`certification/${username}/${certPath}`} </del> <ins> to={`/certification/${username}/${certPath}`} </ins> > {challengeTitle} <CertificationIcon />


'invalid-protocol': 'URL must start with http or https', 'url-not-image': 'URL must link directly to an image file', 'use-valid-url': 'Please use a valid URL' <ins> }, certification: { certifies: 'This certifies that', completed: 'has successfully completed the freeCodeCamp.org', developer: 'Developer Certification, representing approximately', executive: 'Executive Director, freeCodeCamp.org', verify: 'Verify this certification at {{certURL}}', issued: 'Issued' </ins> } };


# --hints-- <del> Your code should use the `hsl()` function to declare the color `green`. </del> <ins> Your code should use the `hsl()` function to declare the color green. </ins> ```js assert(code.match(/.greens*?{s*?background-colors*:s*?hsl/gi)); ``` <del> Your code should use the `hsl()` function to declare the color `cyan`. </del> <ins> Your code should use the `hsl()` function to declare the color cyan. </ins> ```js assert(code.match(/.cyans*?{s*?background-colors*:s*?hsl/gi)); ``` <del> Your code should use the `hsl()` function to declare the color `blue`. </del> <ins> Your code should use the `hsl()` function to declare the color blue. </ins> ```js assert(code.match(/.blues*?{s*?background-colors*:s*?hsl/gi));


<Col className='certifications' sm={10} smPush={1}> <Link className='btn btn-lg btn-primary btn-block' <del> external={true} </del> to={`/certification/${username}/${cert.certSlug}`} > View {cert.title}


takeEvery(types.updateUserFlag, updateUserFlagSaga), takeLatest(types.submitNewAbout, submitNewAboutSaga), takeLatest(types.submitNewUsername, submitNewUsernameSaga), <del> takeLatest(types.validateUsername, validateUsernameSaga), </del> <ins> debounce(2000, types.validateUsername, validateUsernameSaga), </ins> takeLatest(types.submitProfileUI, submitProfileUISaga), takeEvery(types.verifyCert, verifyCertificationSaga) ];


challengeFile.fileKey === fileKey ? { ...challengeFile, ...updates } : { ...challengeFile } <del> ) </del> <ins> ), isBuildEnabled: true </ins> }; }, [actionTypes.storedCodeFound]: (state, { payload }) => ({


return [ takeLatest(types.executeChallenge, executeCancellableChallengeSaga), takeLatest( <del> [ types.updateFile, types.previewMounted, types.challengeMounted, types.resetChallenge ], </del> <ins> [types.updateFile, types.challengeMounted, types.resetChallenge], </ins> previewChallengeSaga ), <ins> takeLatest(types.previewMounted, previewChallengeSaga, { flushLogs: false }), </ins> takeLatest(types.projectPreviewMounted, previewProjectSolutionSaga) ]; }


# --hints-- <ins> You should have four `article` elements in your second `section`. ```js const secondSection = document.querySelectorAll('section')[1] const articles = secondSection.querySelectorAll('article') assert(articles.length === 4) ``` </ins> You should have four `.dessert` elements. ```js


# --instructions-- <del> Add version "1.1.0" of the `@freecodecamp/example` package to the `dependencies` field of your `package.json` file. </del> <ins> Add version `1.1.0` of the `@freecodecamp/example` package to the `dependencies` field of your `package.json` file. </ins> **Note:** `@freecodecamp/example` is a faux package used as a learning tool.


"Return the provided string with the first letter of each word capitalized.", "For the purpose of this exercise, you should also capitalize connecting words like 'the' and 'of'." ], <del> "challengeEntryPoint": "titleCase("I'm a little tea pot")", </del> <ins> "challengeEntryPoint": "titleCase("I'm a little tea pot");", </ins> "challengeSeed": "function titleCase(str) {n  return str;rn}", "tests": [ "expect(titleCase("I'm a little tea pot")).to.be.a('String');",