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


3. 帮助我们为[YouTube频道视频](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ/videos)添加字幕。 <del> ##贡献予开源代码库 </del> <ins> ## 贡献予开源代码库 </ins> 我们有数以千计的[编码挑战](https://learn.freecodecamp.org)和[指南文章](https://guide.freecodecamp.org)集中在这个庞大的开源代码库中。


- [📝 研究，编写和更新我们的指南文章](#研究编写和更新我们的指南文章) <del> - [💻 创建，更新编码挑战和修复其中的错误](创建更新编码挑战和修复其中的错误) </del> <ins> - [💻 创建，更新编码挑战和修复其中的错误](#创建更新编码挑战和修复其中的错误) </ins> - [🌐 翻译指南文章和编码挑战](#翻译指南文章和编码挑战) <del> - [🛠 帮助我们修复freeCodeCamp.org学习平台中的错误](#帮助我们修复freeCodeCamp.org学习平台中的错误) </del> <ins> - [🛠 帮助我们修复freeCodeCamp.org学习平台中的错误](#帮助我们修复freecodecamporg学习平台中的错误) </ins> ### 研究，编写和更新我们的指南文章


1. [Contribua para essa base de códigos abertos.](#contribua-para-essa-base-de-códigos-abertos) <del> Nos ajude criando e editando [Artigos de guias](https://www.freecodecamp.org/guide), [desafios de código](https://www.freecodecamp.org/learn) e corrigindo bugs na plataforma de aprendizado. </del> <ins> Nos ajude criando e editando [Artigos de guias](https://guide.freecodecamp.org), [desafios de código](https://www.freecodecamp.org/learn) e corrigindo bugs na plataforma de aprendizado. </ins> 2. Ajude campistas em nosso [fórum público](https://www.freecodecamp.org/forum/).


id: 5a94fe8569fb03452672e464 title: Create Grids within Grids challengeType: 0 <del> videoUrl: 'https://scrimba.com/p/pByETK/c6N78Ap' </del> forumTopicId: 301128 ---


align-items: center; max-width: 960px; margin: 0 auto; <ins> padding: 0 15px; </ins> }


padding: 0; margin: 0; border: none; <ins> background-color: white; </ins> } .enable-iframe {


} from 'lodash'; import { compileHeadTail, setExt, transformContents } from '../utils/polyvinyl'; <del> import { nightThemeStyle } from './displayStyle.js'; </del> const htmlCatch = 'n<!--fcc-->n'; const jsCatch = 'n;/*fcc*/n';


[stubTrue, identity] ]); <del> export function concatHtml({ required = [], template, files = [], theme = 'night' } = {}) { theme = theme === '' ? 'night' : theme; </del> <ins> export function concatHtml({ required = [], template, files = [] } = {}) { </ins> const createBody = template ? _template(template) : defaultTemplate; <del> const displayTheme = theme === 'night' ? nightThemeStyle : ` `; </del> const head = required .map(({ link, src }) => { if (link && src) {


} return ''; }) <del> .reduce((head, element) => head.concat(element), displayTheme); </del> <ins> .reduce((head, element) => head.concat(element)); </ins> const source = files.reduce( (source, file) => source.concat(file.contents, htmlCatch),


<del> export const nightThemeStyle = ` <style> html{ color: white; } a { color: #99c9ff; } </style> `; </del>


import { createExecuteChallengeSaga } from './execute-challenge-saga'; import { createCurrentChallengeSaga } from './current-challenge-saga'; import { challengeTypes } from '../../../../utils/challengeTypes'; <del> import { userSelector } from '../../../redux'; </del> export const ns = 'challenge'; export const backendNS = 'backendChallenge';


state[ns].projectFormValues || {}; export const challengeDataSelector = state => { <del> const { theme } = userSelector(state); </del> const { challengeType } = challengeMetaSelector(state); let challengeData = { challengeType }; if (


template }; } <del> challengeData.theme = theme; </del> return challengeData; };


runTestInTestFrame(document, testString, testTimeout); } <del> export function buildDOMChallenge({ files, required = [], template = '', theme = `` }) { </del> <ins> export function buildDOMChallenge({ files, required = [], template = '' }) { </ins> const finalRequires = [...globalRequires, ...required, ...frameRunner]; const loadEnzyme = Object.keys(files).some(key => files[key].ext === 'jsx'); const toHtml = [jsToHtml, cssToHtml];


.then(checkFilesErrors) .then(files => ({ challengeType: challengeTypes.html, <del> build: concatHtml({ required: finalRequires, template, files, theme }), </del> <ins> build: concatHtml({ required: finalRequires, template, files }), </ins> sources: buildSourceMap(files), loadEnzyme }));


} .certification-namespace.certificate-wrapper { <del> top: calc(100vh / 20); position: relative; </del> font-family: 'Sax Mono', monospace; }


FormGroup, ControlLabel, Button, <del> Col </del> <ins> Col, Row </ins> } from '@freecodecamp/react-bootstrap'; import Helmet from 'react-helmet';


} const { textarea } = this.state;  const placeholderText = `Please provide as much detail as possible about the account or behavior you are reporting.`;  return ( <Fragment> <Helmet> <title>Report a users profile | freeCodeCamp.org</title> </Helmet>  <FullWidthRow> <Spacer size={2} /> <Col md={8} mdOffset={2}>   <Spacer size={2} /> <Row className='text-center'> <Col sm={8} smOffset={2} xs={12}>
 Do you want to report {username} 's profile for abuse?
  </Col> </Row> <Row> <Col sm={6} smOffset={3} xs={12}>
 We will notify the community moderators' team, and a send copy of  this report to your email:{' '} {email}.   this report to your email: {email}

We may get back to you for more information, if required.
 <form onSubmit={this.handleSubmit}> <FormGroup controlId='report-user-textarea'>  <ControlLabel>Additional Information</ControlLabel>   <ControlLabel>What would you like to report?</ControlLabel>  <FormControl componentClass='textarea' onChange={this.handleChange}  placeholder=''   placeholder={placeholderText}  value={textarea} /> </FormGroup> <Button block={true} bsStyle='primary' type='submit'> Submit the report </Button>  <Spacer />  </form> </Col>  </FullWidthRow>   </Row>  </Fragment> ); }


<del> require('dotenv').config(); </del> <ins> const env = require('../config/env'); </ins> const { createFilePath } = require('gatsby-source-filesystem');


} }; <del> exports.createPages = function createPages({ graphql, actions }) { </del> <ins> exports.createPages = function createPages({ graphql, actions, reporter }) { if (!env.algoliaAPIKey || !env.algoliaAppId) { if (process.env.FREECODECAMP_NODE_ENV === 'production') { throw new Error( 'Algolia App id and API key are required to start the client!' ); } else { reporter.info( 'Algolia keys missing or invalid. Required for search to yield results.' ); } } </ins> const { createPage } = actions; return new Promise((resolve, reject) => {


const DEBOUNCE_TIME = 100; <del> const searchClient = algoliasearch(algoliaAppId, algoliaAPIKey); </del> <ins> // If a key is missing, searches will fail, but the client will still render. const searchClient = algoliaAppId && algoliaAPIKey ? algoliasearch(algoliaAppId, algoliaAPIKey) : {}; </ins> const propTypes = { children: PropTypes.any,


module.exports = Object.assign(locations, { locale, stripePublicKey, <del> algoliaAppId, algoliaAPIKey </del> <ins> algoliaAppId: !algoliaAppId || algoliaAppId === 'Algolia app id from dashboard' ? null : algoliaAppId, algoliaAPIKey: !algoliaAPIKey || algoliaAPIKey === 'Algolia api key from dashboard' ? null : algoliaAPIKey </ins> });


ROLLBAR_CLIENT_ID='post_client_id from rollbar dashboard' ALGOLIA_ADMIN_KEY=123abc <del> ALGOLIA_APP_ID=ACDEFG ALGOLIA_API_KEY=123abc </del> <ins> ALGOLIA_APP_ID='Algolia app id from dashboard' ALGOLIA_API_KEY='Algolia api key from dashboard' </ins> AUTH0_CLIENT_ID=stuff AUTH0_CLIENT_SECRET=stuff


h3 { font-size: 1rem; } <ins> .btn-cta { font-size: 1.2rem; } </ins> } .text-center {


## Description
 We can access the data inside arrays using <dfn>indexes</dfn>.  Array indexes are written in the same bracket notation that strings use, except that instead of specifying a character, they are specifying an entry in the array. Like strings, arrays use <dfn>zero-based</dfn> indexing, so the first element in an array is element 0.   Array indexes are written in the same bracket notation that strings use, except that instead of specifying a character, they are specifying an entry in the array. Like strings, arrays use <dfn>zero-based</dfn> indexing, so the first element in an array has an index of 0.
 Example


```js let testStr = "Pumpkin"; <del> let testRegex = /P(engu|umpk)in/g; </del> <ins> let testRegex = /P(engu|umpk)in/; </ins> testRegex.test(testStr); // Returns true ```


```yml tests: - text: Your regex myRegex should return true for the string Franklin D. Roosevelt  testString: assert(myRegex.test('Franklin D. Roosevelt'));   testString: myRegex.lastIndex = 0; assert(myRegex.test('Franklin D. Roosevelt'));  - text: Your regex myRegex should return true for the string Eleanor Roosevelt  testString: assert(myRegex.test('Eleanor Roosevelt'));   testString: myRegex.lastIndex = 0; assert(myRegex.test('Eleanor Roosevelt'));  - text: Your regex myRegex should return false for the string Franklin Rosevelt  testString: assert(!myRegex.test('Franklin Rosevelt'));   testString: myRegex.lastIndex = 0; assert(!myRegex.test('Franklin Rosevelt'));  - text: You should use .test() to test the regex. testString: assert(code.match(/myRegex.test(s*myStrings*)/)); - text: Your result should return true.


<Row> {!closeLabel && ( <Col sm={10} smOffset={1} xs={12}> <del> <b>Nicely done. You just completed {blockNameify(block)}.</b> </del> <ins> <b>Nicely done. You just completed {blockNameify(block)}. </b> </ins> {donationText} </Col> )}


--- ## Introduction to the Managing Packages with npm Challenges  The Node Package Manager (npm) is a command-line tool used by developers to share and control modules (or packages) of JavaScript code written for use with Node.js.

When starting a new project, npm generates a package.json file. This file lists the package dependencies for your project. Since npm packages are regularly updated, the package.json file allows you to set specific version numbers for each dependency. This ensures that updates to a package don't break your project.

npm saves packages in a folder named node_modules. These packages can be installed in two ways:

globally in a root node_modules folder, accessible by all projects.

locally within a project's own node_modules folder, accessible only to that project.

Most developers prefer to install packages local to each project to create a separation between the dependencies of different projects. Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public Glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing.
Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!   The Node Package Manager (npm) is a command-line tool used by developers to share and control modules (or packages) of JavaScript code written for use with Node.js.

When starting a new project, npm generates a package.json file. This file lists the package dependencies for your project. Since npm packages are regularly updated, the package.json file allows you to set specific version numbers for each dependency. This ensures that updates to a package don't break your project. npm saves packages in a folder named node_modules. These packages can be installed in two ways: 1. globally in a root node_modules folder, accessible by all projects. 2. locally within a project's own node_modules folder, accessible only to that project. Most developers prefer to install packages local to each project to create a separation between the dependencies of different projects. Working on these challenges will involve you writing your code on Glitch on our starter project. After completing each challenge you can copy your public Glitch url (to the homepage of your app) into the challenge screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing. Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!


tests: - text: The AppWrapper should render to the page. testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').length === 1; })());  - text: The Presentational component should render an h2, input, button, and ul elements.   - text: The Presentational component should render to page.  testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('Presentational').length === 1; })()); - text: The Presentational component should render an h2, input, button, and ul elements. testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); return ( PresentationalComponent.find('div').length === 1 && PresentationalComponent.find('h2').length === 1 && PresentationalComponent.find('button').length === 1 && PresentationalComponent.find('ul').length === 1 ); })());


Usernames are used everywhere on the internet. They are what give users a unique identity on their favorite sites. You need to check all the usernames in a database. Here are some simple rules that users have to follow when creating their username. 1) Usernames can only use alpha-numeric characters. <del> 2) The only numbers in the username have to be at the end. There can be zero or more of them at the end. </del> <ins> 2) The only numbers in the username have to be at the end. There can be zero or more of them at the end. Username cannot start with the number. </ins> 3) Username letters can be lowercase and uppercase. 4) Usernames have to be at least two characters long. A two-character username can only use alphabet letters as characters. </section>


script.innerHTML = tryTransform(babelTransformCode(babelOptionsJS))( script.innerHTML ); <del> console.log('transformed:', script.innerHTML); </del> }); }


{subscriptionPayment ? ( <Fragment> <b> <del> Confirm your donation of ${donationAmount / 100} / year with PayPal: </del> <ins> Confirm your donation of ${donationAmount / 100} /{' '} {donationDuration} with PayPal: </ins> </b> <Spacer /> </Fragment>


```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'


- text: Your code should set the font-size property for the h5 tag to 21 pixels. testString: assert($('h5').css('font-size') == '21px'); - text: Your code should set the font-size property for the h6 tag to 14 pixels.  testString: assert($('h6').css('font-size') == '14px');   testString: const regex = /h6s*{s*font-sizes*:s*14pxs*(;s*}|})/i; assert.strictEqual(true, regex.test(code));  ```


<meta content='https://cdn.freecodecamp.org/platform/universal/fcc-twitter-1120X600-social-green.png' name='twitter:image:src' /> <meta content='freeCodeCamp.org' name='twitter:title' /> <del> <meta content='Learn to code. Build projects. Earn certifications.' </del> <ins> <meta content='Learn to code at home. Build projects. Earn certifications.' </ins> + 'Since 2015, 40,000 graduates have gotten jobs at tech ' + 'companies including Google, Apple, Amazon, and Microsoft.' name='twitter:description' />


<script src="https://unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script> <script src="https://unpkg.com/docsify-remote-markdown/dist/docsify-remote-markdown.min.js"></script> <del> </html> </del>  No newline at end of file <ins> </html> </ins>


return res.redirect('/forgot'); } res.render('account/reset', { <del> title: 'Password Reset' </del> <ins> title: 'Password Reset', token: req.params.token </ins> }); }); };


from: 'Team@freecodecamp.com', subject: 'Reset your Free Code Camp password', text: [ <del> 'You are receiving this email because you (or someone else)', </del> <ins> 'You are receiving this email because you (or someone else)n', </ins> 'requested we reset your Free Code Camp account's password.nn', <del> 'Please click on the following link, or paste this into your', </del> <ins> 'Please click on the following link, or paste this into yourn', </ins> 'browser to complete the process:nn', 'http://', req.headers.host, '/reset/', token, 'nn', <del> 'If you did not request this, please ignore this email and', </del> <ins> 'If you did not request this, please ignore this email andn', </ins> 'your password will remain unchanged.n' <del> ].join(' ') </del> <ins> ].join('') </ins> }; transporter.sendMail(mailOptions, function(err) { if (err) { return done(err); }


extends ../layout block content <del> .col-sm-8.col-sm-offset-2 form(method='POST') legend Reset Password </del> <ins> .col-sm-8.col-sm-offset-2.jumbotron form(action='/reset/#{token}', method='POST') h1 Reset Password </ins> input(type='hidden', name='_csrf', value=_csrf) .form-group label(for='password') New Password


```yml question: <del> text: 'What type of HTTP is request is usually used to access a website?' </del> <ins> text: 'What type of HTTP request is usually used to access a website?' </ins> answers: - 'POST' - 'GET'


## Description
 You are given two arrays and an index.  Use the array methods slice and splice to copy each element of the first array into the second array, in order.   Copy each element of the first array into the second array, in order.  Begin inserting elements at index n of the second array. Return the resulting array. The input arrays should remain the same after the function runs.


```yml tests:  - text: The globalTitle variable should not change. testString: assert(globalTitle === "Winter Is Coming");  - text: Your code should not use the replace method for this challenge. testString: assert(!code.match(/.?[sS]*?replace/g)); - text: urlSlug("Winter Is Coming") should return "winter-is-coming".


<div id='js-seed'> ```js <del> // The global variable var globalTitle = "Winter Is Coming"; </del> // Only change code below this line function urlSlug(title) {


<section id='solution'> ```js <del> // The global variable var globalTitle = "Winter Is Coming"; </del> // Only change code below this line function urlSlug(title) { return title.trim().split(/s+/).join("-").toLowerCase();


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()}


</Modal.Body> <Modal.Footer> {isSignedIn ? null : ( <del> <Login block={true} bsSize='lg' bsStyle='primary' className='btn-cta' > Sign in to save your progress </Login> </del> <ins> <Login block={true}>Sign in to save your progress</Login> </ins> )} <Button block={true}


}); } <del> if (!user.name) { </del> <ins> // If the user does not have a name, and have set their name to public, // warn them. Otherwise, fallback to username if (!user.name && user.showName) { </ins> return res.json({ messages: [ {


<div style="width: 100%; text-align: center;"> <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" width="520" height="170" aria-hidden="true" alt="Diagram showing the possible paths for 2 by 2 and 4 by 3 rectangles"> <style> <del> .g { fill: none; stroke: #ccc } .s, .s2 { fill: #bff; stroke: black; fill-opacity: .4 } .s2 { fill: #fbf } .d { stroke:black; fill:none} </del> <ins> .diagram-g { fill: none; stroke: #ccc } .diagram-s, .diagram-s2 { fill: #bff; stroke: black; fill-opacity: .4 } .diagram-s2 { fill: #fbf } .diagram-d { stroke:black; fill:none} </ins> </style> <del> <defs>	<g id="m"> <g id="h4"><g id="h2"> <path id="h" d="m0 10h 640" class="g"/> <use xlink:href="#h" transform="translate(0,20)"/></g> <use xlink:href="#h2" transform="translate(0, 40)"/></g> <use xlink:href="#h4" transform="translate(0,80)"/> <g id="v8"><g id="v4"><g id="v2"> <path id="v" d="m10 0v160 m 20 0 v-160" class="g"/> <use xlink:href="#v" transform="translate(40,0)"/></g> <use xlink:href="#v2" transform="translate(80,0)"/></g> <use xlink:href="#v4" transform="translate(160,0)"/></g> <use xlink:href="#v8" transform="translate(320,0)"/></g> <path id="b" d="m0 0h80v60h-80z" class="s"/> </del> <ins> <defs> <g id="diagram-m"> <g id="diagram-h4"> <g id="diagram-h2"> <path id="diagram-h" d="m0 10h 640" class="diagram-g"/> <use xlink:href="#diagram-h" transform="translate(0, 20)"/> </g> <use xlink:href="#diagram-h2" transform="translate(0, 40)"/> </g> <use xlink:href="#diagram-h4" transform="translate(0, 80)"/> <g id="diagram-v8"> <g id="diagram-v4"> <g id="diagram-v2"> <path id="diagram-v" d="m10 0v160 m 20 0 v-160" class="diagram-g"/> <use xlink:href="#diagram-v" transform="translate(40, 0)"/> </g> <use xlink:href="#diagram-v2" transform="translate(80, 0)"/> </g> <use xlink:href="#diagram-v4" transform="translate(160, 0)"/> </g> <use xlink:href="#diagram-v8" transform="translate(320, 0)"/> </g> <path id="diagram-b" d="m0 0h80v60h-80z" class="diagram-s"/> </ins> </defs> <del> <g transform="translate(.5,.5)"> <use xlink:href="#m"/> <g transform="translate(10,10)"> <path d="m0 0v40h40v-40z" class="s2"/><path d="m20 0v40" class="d"/> <path d="m60 0v40h40v-40z" class="s2"/><path d="m60 20h40" class="d"/> <g transform="translate(120, 0)"> <use xlink:href="#b"/><path d="m0 20h40v20h40" class="d"/></g> <g transform="translate(220, 0)"> <use xlink:href="#b"/><path d="m0 40h40v-20h40" class="d"/></g> <g transform="translate(320, 0)"> <use xlink:href="#b"/><path d="m20 0v40h20v-20h20v40" class="d"/></g> <g transform="translate(420, 0)"> <use xlink:href="#b"/><path d="m60 0v40h-20v-20h-20v40" class="d"/></g> <g transform="translate(20, 80)"> <use xlink:href="#b"/><path d="m40 0v60" class="d"/></g> <g transform="translate(120, 80)"> <use xlink:href="#b"/><path d="m60 0v20h-20v20h-20v20" class="d"/></g> <g transform="translate(220, 80)"> <use xlink:href="#b"/><path d="m20 0v20h20v20h20v20" class="d"/></g> <g transform="translate(320, 80)"> <use xlink:href="#b"/><path d="m0 20h20v20h20v-20h20v20h20" class="d"/></g> <g transform="translate(420, 80)"> <use xlink:href="#b"/><path d="m0 40h20v-20h20v20h20v-20h20" class="d"/></g> </g></g> </svg> </div> </del> <ins> <g transform="translate(.5, .5)"> <use xlink:href="#diagram-m"/> <g transform="translate(10, 10)"> <path d="m0 0v40h40v-40z" class="diagram-s2"/> <path d="m20 0v40" class="diagram-d"/> <path d="m60 0v40h40v-40z" class="diagram-s2"/> <path d="m60 20h40" class="diagram-d"/> <g transform="translate(120, 0)"> <use xlink:href="#diagram-b"/> <path d="m0 20h40v20h40" class="diagram-d"/> </g> <g transform="translate(220, 0)"> <use xlink:href="#diagram-b"/> <path d="m0 40h40v-20h40" class="diagram-d"/> </g> <g transform="translate(320, 0)"> <use xlink:href="#diagram-b"/> <path d="m20 0v40h20v-20h20v40" class="diagram-d"/> </g> <g transform="translate(420, 0)"> <use xlink:href="#diagram-b"/> <path d="m60 0v40h-20v-20h-20v40" class="diagram-d"/> </g> <g transform="translate(20, 80)"> <use xlink:href="#diagram-b"/> <path d="m40 0v60" class="diagram-d"/> </g> <g transform="translate(120, 80)"> <use xlink:href="#diagram-b"/> <path d="m60 0v20h-20v20h-20v20" class="diagram-d"/> </g> <g transform="translate(220, 80)"> <use xlink:href="#diagram-b"/> <path d="m20 0v20h20v20h20v20" class="diagram-d"/> </g> <g transform="translate(320, 80)"> <use xlink:href="#diagram-b"/> <path d="m0 20h20v20h20v-20h20v20h20" class="diagram-d"/> </g> <g transform="translate(420, 80)"> <use xlink:href="#diagram-b"/> <path d="m0 40h20v-20h20v20h20v-20h20" class="diagram-d"/> </g> </g> </g> </svg> </div> </ins> # --instructions--


# --description-- <del> Continuing with the date theme, HTML5 also introduced the `time` element along with a `datetime` attribute to standardize times. The `datetime` attribute is an inline element that can wrap a date or time on a page. A `datetime` attribute holds a valid format of that date. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's informally or colloquially written in the text. </del> <ins> Continuing with the date theme, HTML5 also introduced the `time` element along with a `datetime` attribute to standardize times. The `time` element is an inline element that can wrap a date or time on a page. A `datetime` attribute holds a valid format of that date. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's informally or colloquially written in the text. </ins> Here's an example:


} api.get('/signout', (req, res) => { <del> const { origin } = getRedirectParams(req); </del> <ins> const { origin, returnTo } = getRedirectParams(req); </ins> req.logout(); req.session.destroy(err => { if (err) {


}); } removeCookies(req, res); <del> res.redirect(origin); </del> <ins> res.redirect(returnTo); </ins> }); });


isRootPath } from './utils/redirection'; import { jwtSecret } from '../../../config/secrets'; <ins> import { availableLangs } from '../../../config/i18n/all-langs'; </ins> const passportOptions = { emailOptional: true,


export const devLoginRedirect = () => { return (req, res) => { <del> // this mirrors the production approach, but without any validation </del> <ins> // this mirrors the production approach, but only validates the prefix </ins> let { returnTo, origin, pathPrefix } = getRedirectParams( req, <del> params => params </del> <ins> ({ returnTo, origin, pathPrefix }) => { pathPrefix = availableLangs.client.includes(pathPrefix) ? pathPrefix : ''; return { returnTo, origin, pathPrefix }; } </ins> ); returnTo += isRootPath(getRedirectBase(origin, pathPrefix), returnTo) <del> ? 'learn' </del> <ins> ? '/learn' </ins> : ''; return res.redirect(returnTo); };


const origin = returnUrl.origin; // if this is not one of the client languages, validation will convert // this to '' before it is used. <del> const pathPrefix = returnUrl.pathname.split('/')[0]; </del> <ins> const pathPrefix = returnUrl.pathname.split('/')[1]; </ins> return _normalizeParams({ returnTo: returnUrl.href, origin, pathPrefix }); }


stroke: var(--color-quaternary); } <del> .map-title svg:first-child { transform: rotate(90deg); } </del> .open > .map-title svg:first-child { <del> transform: rotate(-90deg); </del> <ins> transform: rotate(90deg); </ins> } .map-challenges-ul {


A game is played with three piles of stones and two players. <del> On each player's turn, the player removes one or more stones from the piles. However, if the player takes stones from more than one pile, the same number of stunes must be removed from each of the selected piles. </del> <ins> On each player's turn, the player removes one or more stones from the piles. However, if the player takes stones from more than one pile, the same number of stones must be removed from each of the selected piles. </ins> In other words, the player chooses some $N > 0$ and removes:


Text is often a large part of web content. CSS has several options for how to align it with the `text-align` property. <del> `text-align: justify;` causes all lines of text except the last line to meet the left and right edges of the line box. </del> <ins> `text-align: justify;` spaces the text so that each line has equal width. </ins> `text-align: center;` centers the text


# --description-- <del> One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the `::before` and `::after` pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a `::before` pseudo-element is used to add a rectangle to an element with the class `heart`: </del> <ins> One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the `::before` and `::after` pseudo-elements. ::before creates a pseudo-element that is the first child of the selected element; ::after creates a pseudo-element that is the last child of the selected element. In the following example, a `::before` pseudo-element is used to add a rectangle to an element with the class `heart`: </ins> ```css .heart::before {


The `fieldset` element is used to group related inputs and labels together in a web form. `fieldset` elements are <dfn>block-level elements</dfn>, meaning that they appear on a new line. <del> Nest the `Indoor` and `Outdoor` radio buttons within a `fieldset` element, and don't forget to indent the buttons. </del> <ins> Nest the `Indoor` and `Outdoor` radio buttons within a `fieldset` element, and don't forget to indent the radio buttons. </ins> # --hints--


show={solutionOpen} > <Modal.Header closeButton={true}> <del> <Modal.Title id='contained-modal-title'> </del> <ins> <Modal.Title id='contained-modal-title' className='text-center'> </ins> {`${username}'s Solution to ${ idToNameMap.get(id)?.challengeTitle ?? '' }`}


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()) {


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


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();


You should add the first `input` after the `label` text `Enter Your First Name:`, and include a space after the colon. ```js <del> assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML, 'Enter Your First Name: <input>'); </del> <ins> assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML.trim(), 'Enter Your First Name: <input>'); </ins> ``` You should add the second `input` after the `label` text `Enter Your Last Name:`, and include a space after the colon. ```js <del> assert.equal(document.querySelectorAll('label')?.[1]?.innerHTML, 'Enter Your Last Name: <input>'); </del> <ins> assert.equal(document.querySelectorAll('label')?.[1]?.innerHTML.trim(), 'Enter Your Last Name: <input>'); </ins> ``` You should add the third `input` after the `label` text `Enter Your Email:`, and include a space after the colon. ```js <del> assert.equal(document.querySelectorAll('label')?.[2]?.innerHTML, 'Enter Your Email: <input>'); </del> <ins> assert.equal(document.querySelectorAll('label')?.[2]?.innerHTML.trim(), 'Enter Your Email: <input>'); </ins> ``` You should add the fourth `input` after the `label` text `Create a New Password:`, and include a space after the colon. ```js <del> assert.equal(document.querySelectorAll('label')?.[3]?.innerHTML, 'Create a New Password: <input>'); </del> <ins> assert.equal(document.querySelectorAll('label')?.[3]?.innerHTML.trim(), 'Create a New Password: <input>'); </ins> ``` # --seed--


# --description--  Cramer's rule is a formula for solving a system of linear equations by using the determinants of matrixes formed from subsets of the coefficients and right hand side values.   Cramer's rule is a formula for solving a system of linear equations by using the determinants of matrices formed from subsets of the coefficients and right hand side values.   The determinate of a matrix with 2 rows and two columns is given by:   The determinant of a matrix with 2 rows and two columns is given by:  $begin{aligned}|A|={begin{vmatrix}a&bc&dend{vmatrix}}=ad-bc.end{aligned}$


## --text-- <del> Which activation function switches values between -1 and 1? </del> <ins> Which activation function squishes values between -1 and 1? </ins> ## --answers--


assert(document.querySelectorAll('.characters > div')?.length === 4); ``` <del> Your two new `div` elemnts should have the `class` set to `blue`. </del> <ins> Your two new `div` elements should have the `class` set to `blue`. </ins> ```js const divs = document.querySelectorAll('.characters > div');


assert(isValidSolution_(solve24(testCases_[1]))); ``` <del> `solve24("6789")` should return `(6*8)/(9-7)`. `(8*6)/(9-7)`, or a similar valid string </del> <ins> `solve24("6789")` should return `(6*8)/(9-7)`, `(8*6)/(9-7)`, or a similar valid string </ins> ```js assert(isValidSolution_(solve24(testCases_[2])));


assert($('p > a').length); ``` <del> The link's href value should be `https://freecatphotoapp.com`. You have either omitted the href value or have a typo. </del> <ins> The link's `href` value should be `https://freecatphotoapp.com`. You have either omitted the `href` value or have a typo. </ins> ```js const nestedAnchor = $('p > a')[0];


# --hints-- <del> The endpoint `/json` should serve the json object `{"message": "Hello json"}` </del> <ins> The endpoint `/json` should serve the JSON object `{"message": "Hello json"}` </ins> ```js (getUserInput) =>


# --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.


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.


# --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) =>


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--


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"


# --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.


Something does not look right. You added the correct `class` attribute value to the `p` element with `Donut` as its text, but you have not defined a selector for it. <del> Since the `flavor` class selector already has the properties you want, just add the `dessert` class name to it. </del> <ins> The CSS rule for the `flavor` class already sets the properties you want. Add the `dessert` class as an additional selector for this CSS rule. </ins> # --hints--


} const Spacer = ({ size, children }: SpacerProps): JSX.Element => (  <div className='spacer' style={{ padding: `${Padding[size]}px 0`, height: '1px' }} >   <div className='spacer' style={{ padding: `${Padding[size]}px 0` }}>  {children}
 );


 <div class="spacer"  style="padding: 15px 0px; height: 1px;"   style="padding: 15px 0px;"  />
 <div class="spacer"  style="padding: 15px 0px; height: 1px;"   style="padding: 15px 0px;"  />
 <div


<div class="spacer"  style="padding: 15px 0px; height: 1px;"   style="padding: 15px 0px;"  /> <div class="text-center row"


</div> <div class="spacer" <del> style="padding: 15px 0px; height: 1px;" </del> <ins> style="padding: 15px 0px;" </ins> /> </div> </div>


className="spacer" style={ { <del> "height": "1px", </del> "padding": "5px 0", } }


className="spacer" style={ { <del> "height": "1px", </del> "padding": "15px 0", } }


# --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--


> [!NOTE] > If you are using Apple Devices with M1 Chip to run the application locally, it is suggested to use Node v14.7 or above. You might run into issues with dependencies like Sharp otherwise. <ins> ## Working With Other Languages To see how the client renders in another language go to [testing the client app in a world language.](how-to-work-on-localized-client-webapp.md#Testing-the-Client-App-in-a-World-Language) </ins> ## Getting Help If you are stuck and need help, feel free to ask questions in the ['Contributors' category on our forum](https://forum.freecodecamp.org/c/contributors) or [the contributors chat room](https://discord.gg/PRyKn3Vbay).


}; }; <ins> const actRE = new RegExp(/act(...) is not supported in production builds/); </ins> const updateProxyConsole = (proxyLogger?: ProxyLogger) => (frameContext: Context) => { // window does not exist if the preview is hidden, so we have to check.


frameContext.window.console.error = function proxyWarn( ...args: string[] ) { <del> proxyLogger(args.map((arg: string) => utilsFormat(arg)).join(' ')); </del> <ins> if (args.every(arg => !actRE.test(arg))) { proxyLogger(args.map((arg: string) => utilsFormat(arg)).join(' ')); } </ins> return oldError(...(args as [])); }; }


# --description-- <ins> The child combinator selector `>` is used between selectors to target only elements that match the second selector and are a direct child of the first selector. This can be helpful when you have deeply nested elements and want to control the scope of your styling. </ins> Use the `>` selector to target the unordered list elements within the `nav` elements, and use _Flexbox_ to evenly space the children. # --hints--


<ins> [![Stories in Ready](https://badge.waffle.io/FreeCodeCamp/freecodecamp.png?label=ready&title=Ready)](https://waffle.io/FreeCodeCamp/freecodecamp) </ins> <img src="https://s3.amazonaws.com/freecodecamp/logo4.0LG.png"> Free Code Camp!


<del> npx lint-staged </del> <ins> NODE_OPTIONS="--max-old-space-size=7168" npx lint-staged </ins>


"knip": "npx -y knip@1 --include files", "knip:all": "npx -y knip@1", "prelint": "pnpm run -F=client predevelop", <del> "lint": "npm-run-all create:shared -p lint:*", </del> <ins> "lint": "NODE_OPTIONS="--max-old-space-size=7168" npm-run-all create:shared -p lint:*", </ins> "lint:challenges": "cd ./curriculum && pnpm run lint", "lint:js": "eslint --cache --max-warnings 0 .", "lint:ts": "tsc && tsc -p shared && tsc -p api",


# --description-- <del> Add one final property to the object named `text`. Give this property the final `text.innerText` value from the `goTown` function. </del> <ins> Add one final property to the object named `text`. Give this property the same string value as the one assigned to `text.innerText` in the `goTown` function. </ins> # --hints--


Your `setAttribute` method should have ``song?.title ? `Play ${song.title}` : "Play"`` as the second argument. ```js <del> assert.match(code, /playButton.setAttribute(s*('|")aria-label1,s*song?.titles*?s*`Plays*${song.title}`s*:s*1Play1s*);?s*/) </del> <ins> assert.match(code, /playButton.setAttribute(s*('|")aria-label1,s*song?.titles*?s*`Plays*${song.title}`s*:s*('|")Play2s*);?s*/) </ins> ``` # --seed--


To run all Playwright tests, run the following command: ```bash <ins> cd e2e </ins> npx playwright test ```


# --description-- <del> You need to determine whether the task being added already exists or not. If it doesn't exist, you will add it, and if it already exists, you will set it up for editing. You can use the `findIndex()` method to accomplish this. </del> <ins> You will need to determine whether the task being added to the `taskData` array already exists or not. If the task does not exist, you will add it to the array. If it does exist, you will update it. To accomplish this, you can use the <dfn>findIndex()</dfn> method. </ins> <del> `findIndex` is an array method that lets find the index of the first element in an array that satisfies a given testing function. </del> <ins> The `findIndex()` array method finds and returns the index of the first element in an array that meets the criteria specified by a provided testing function. If no such element is found, the method returns `-1`. </ins> Here's an example: ```js <del> const numbers = [3, 1, 5, 6, 10, 9, 8]; const firstEvenNumIndex = numbers.findIndex((num) => num % 2 === 0); </del> <ins> const numbers = [3, 1, 5, 6]; const firstNumLargerThanThree = numbers.findIndex((num) => num > 3); </ins> <del> console.log(firstEvenNumIndex); // Output: 3 – because the first even number (6) is at index 3 </del> <ins> console.log(firstNumLargerThanThree); // prints index 2 </ins> ``` <del> Declare a `dataArrIndex` variable using `const` and set it to the result of the `findIndex()` method applied to the `taskData` array. Utilize arrow syntax to provide a callback function with `item` as the parameter, and within the callback, check if the `id` property of `item` is equal to the `id` property of `currentTask`. </del> <ins> Use `const` to declare a variable called `dataArrIndex` and assign it the value of `taskData.findIndex()`. For the `findIndex()` method, pass in an arrow function with `item` as the parameter. </ins> <del> If the task exists, this returns the index, and if it doesn't exist, it returns `-1`. </del> <ins> Within the arrow function, check if the `id` property of `item` is strictly equal to the `id` property of `currentTask`. </ins> # --hints--


## --video-solution-- <del> 1 </del> <ins> 2 </ins>


# --description-- <del> Use the `join()` method to combine the `songsHTML` markup into a single string. </del> <ins> Right now the `songsHTML` is an array. If you tried to display this as is, you would see the songs separated by commas. This is not the desired outcome because you want to display the songs as a list. To fix this, you will need to join the array into a single string by using the <dfn>join()</dfn> method. </ins> <del> The `join()` method is used to concatenate all the elements of an array into a single string. It takes an optional parameter called `separator` which is used to separate each element of the array. For example: </del> <ins> The `join()` method is used to concatenate all the elements of an array into a single string. It takes an optional parameter called a `separator` which is used to separate each element of the array. For example: </ins> ```js const exampleArr = ["This", "is", "a", "sentence"];


Chain the `join()` method to your `map()` method and pass in an empty string for the separator. <ins> To chain multiple methods together, you can call the `join()` method on the result of the `map()` method. For example: ```js array.map().join(); ``` </ins> # --hints-- You should add `join("")` to the existing code.


const getMultiple = await $.get(url + '?created_by=Alice&assigned_to=Bob'); assert.isArray(getMultiple); assert.lengthOf(getMultiple, 2); <ins> const copyId = getMultiple[0]._id; const getById = await $.get(url + `?_id=${copyId}`); assert.isArray(getById); assert.lengthOf(getById, 1); assert.equal(getById[0]._id, copyId, 'should be able to query a document by _id') </ins> } catch (err) { throw new Error(err.responseText || err.message); }


{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 => (


Create a `taskObj` object with an `id` property as the first property. For the value of the `id` property, retrieve the value of the `titleInput` field, convert it to lowercase, and then use the `split()` and `join()` methods to hyphenate it. <del> Make sure all of those are in template literals because you need the `id` property value as a string. </del> <ins> Make sure that the value of the `id` property is enclosed within template literals, as you will be appending more to the string later on. </ins> # --hints--


```js const player = new Player(); <del> assert.match(player.update.toString(), /ifs*(s*this.position.ys*+s*this.heights*+s*this.velocity.ys*<=s*canvas.heights*)s*{s*}/); </del> <ins> assert.match(player.update.toString(), /ifs*(s*(?:this.position.ys*+s*this.heights*+s*this.velocity.y|this.position.ys*+s*this.velocity.ys*+s*this.height|this.heights*+s*this.position.ys*+s*this.velocity.y|this.heights*+s*this.velocity.ys*+s*this.position.y|this.velocity.ys*+s*this.position.ys*+s*this.height|this.velocity.ys*+s*this.heights*+s*this.position.y)s*<=s*canvas.heights*)s*{s*}/); </ins> ``` # --seed--


console.log(greeting()); // Hello Anonymous ``` <del> Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`. </del> <ins> Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`. Remember that you destructured the `players` variable from the `myFavoriteFootballTeam` object on line `175`. </ins> # --hints--


Before moving on, this is a great opportunity to learn a common array use. Currently, your code accesses the last element in the array with `rows[2]`. But you may not know how many elements are in an array when you want the last one. <del> You can make use of the `.length` property of an array - this returns the number of elements in the array. For example, your `rows` array has 3 elements, so `rows.length` would be `3`. </del> <ins> You can make use of the `.length` property of an array - this returns the number of elements in the array. To get the last element of any array, you can use the following syntax: </ins> <del> Since you know the last element is at index `2`, you can compare that with the length of the array and see it is one less. The last element of an array will always be accessible at the index `length - 1`. You can use that in your bracket notation. </del> <ins> ```js array[array.length - 1] ``` `array.length` returns the number of elements in the array. By subtracting `1`, you get the index of the last element in the array. You can apply this same concept to your `rows` array. Update your `rows[2]` to dynamically access the last element in the `rows` array. Refer to the example above to help you. </ins> <del> Update your `rows[2]` to access the `rows.length - 1` index instead of the `2` index. You should not see anything change in your console. </del> <ins> You should not see anything change in your console. </ins> # --hints--


```js let array = [1, 2, 3]; array[1] = 25; <ins> console.log(array); // prints [1, 25, 3] </ins> ``` Update the **third** element of your `rows` array to be the number `10`. Then print the `rows` array to your console.


```js <del> assert.match(code, /authorContainer.innerHTMLs*=s*(`|"|')<p.*>.*</p>1/) </del> <ins> assert.match(code, /authorContainer.innerHTMLs*=s*(`|"|')s*<p.*>.*</p>s*1/) </ins> ``` Your `p` element should have the class `error-msg`. ```js <del> assert.match(code, /(`|"|')<ps+classs*=s*("|')error-msg2>/) </del> <ins> assert.match(code, /(`|"|')s*<ps+classs*=s*("|')error-msg2>/) </ins> ``` Your `p` element should have the text `There was an error loading the authors`. ```js <del> assert.match(code, /(`|"|')<ps+classs*=s*("|')error-msg2>Theres+wass+ans+errors+loadings+thes+authors</p>1s*;?/) </del> <ins> assert.match(code, /(`|"|')<ps+classs*=s*("|')error-msg2>Theres+wass+ans+errors+loadings+thes+authors</p>s*1s*;?/) </ins> ```


const state$ = { value: { challenge: { challengeMeta: { challengeType: 0 } }, <del> app: { user: { username: 'test' } } </del> <ins> app: { user: { username: 'test' }, allChallengesInfo: { challengeEdges: [], certificateNodes: [] } } </ins> } };


<ins> import { createSelector } from 'reselect'; </ins> import { challengeTypes } from '../../../../../shared/config/challenge-types'; import { completedChallengesSelector,


return challengeData; }; <del> export const currentBlockIdsSelector = state => { const { block, certification, challengeType } = challengeMetaSelector(state); const allChallengesInfo = allChallengesInfoSelector(state); </del> <ins> export const currentBlockIdsSelector = createSelector( challengeMetaSelector, allChallengesInfoSelector, (challengeMeta, allChallengesInfo) => { const { block, certification, challengeType } = challengeMeta; </ins> <del> return getCurrentBlockIds( allChallengesInfo, block, certification, challengeType ); }; </del> <ins> return getCurrentBlockIds( allChallengesInfo, block, certification, challengeType ); } ); </ins> export const completedChallengesInBlockSelector = state => { const completedChallengesIds = completedChallengesIdsSelector(state);


); }; <del> export const completedPercentageSelector = state => { const isSignedIn = isSignedInSelector(state); if (isSignedIn) { const completedChallengesIds = completedChallengesIdsSelector(state); const { id } = challengeMetaSelector(state); const currentBlockIds = currentBlockIdsSelector(state); const completedPercentage = getCompletedPercentage( completedChallengesIds, currentBlockIds, id ); return completedPercentage; } else return 0; }; </del> <ins> export const completedPercentageSelector = createSelector( isSignedInSelector, completedChallengesSelector, challengeMetaSelector, currentBlockIdsSelector, (isSignedIn, completedChallenges, { id }, currentBlockIds) => { if (isSignedIn) { const completedPercentage = getCompletedPercentage( completedChallenges.map(node => node.id), currentBlockIds, id ); return completedPercentage; } else return 0; } ); </ins> export const isBlockNewlyCompletedSelector = state => { const completedPercentage = completedPercentageSelector(state);


# --description-- <del> For now, remove your first console log and your `rows[2]` assignment. Leave the second `rows` log statement for later. </del> <ins> For now, remove your first console log and your `rows[rows.length - 1]` assignment. Leave the second `rows` log statement for later. </ins> # --hints--


assert.notMatch(code, /console.log(s*rows[s*0s*]s*)/); ``` <del> You should remove your `rows[2]` reassignment. </del> <ins> You should remove your `rows[rows.length - 1]` reassignment. </ins> ```js <del> assert.notMatch(code, /rows[2]/); </del> <ins> assert.notMatch(code, /rows[s*rows.lengths*-s*1s*]/); </ins> ``` You should not remove your `console.log(rows)` statement.


--- # --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--


padding-bottom: 10px; } <del> .help-modal-heading { line-height: 1.5; font-weight: 400; word-spacing: -0.4ch; } </del> .help-form-legend { color: var(--secondary-color); border: 0;


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


"order": 1, "superBlock": "project-euler", "disableLoopProtectTests": true, <ins> "disableLoopProtectPreview": true, </ins> "challengeOrder": [ { "id": "5900f3d21000cf542c50fee4",


Arrays have a special `length` property that allows you to see how many values, or <dfn>elements</dfn>, are in the array. You would access this property using syntax like `myArray.length`. <del> Update your condition to check if `rows.length` is less than or equal to `count`. </del> <ins> Note that `rows.length` in the `padRow` call would give you an off-by-one error, because `done` is incremented *before* the call. Update your condition to check if `rows.length` is less than `count`. </ins> # --hints-- <del> Your `while` loop should check if `rows.length` is less than or equal to `count`. </del> <ins> Your `while` loop should check if `rows.length` is less than `count`. </ins> ```js <del> assert.match(__helpers.removeJSComments(code), /whiles*(s*rows.lengths*<=s*counts*)/); </del> <ins> assert.match(__helpers.removeJSComments(code), /whiles*(s*rows.lengths*<s*counts*)/); </ins> ``` # --seed--


# --description-- <del> You can also replace the `done` reference in your `padRow` call. Note that `rows.length` here would give you an off-by-one error, because `done` is incremented *before* the call. So you'll need to replace `done` here with `rows.length + 1`. When you do this, you may see a `Range Error`, because we've created another off-by-one error. You'll need to change the `while` condition to use the less than operator, instead of the less than or equal operator. </del> <ins> Replace the `done` reference in your `padRow` call with `rows.length + 1`. </ins> # --hints--


assert.match(__helpers.removeJSComments(code), /rows.push(padRows*(s*rows.lengths*+s*1/); ``` <del> Your `while` loop should run while `rows.length` is less than `count`. ```js assert.match(__helpers.removeJSComments(code), /whiles*(s*rows.lengths*<s*count)/); ``` </del> # --seed-- ## --seed-contents--


--fcc-editable-region-- let done = 0; <del> while (rows.length <= count) { </del> <ins> while (rows.length < count) { </ins> done++; rows.push(padRow(done, count)); }


Your arrow function callback should check if `item.id === currentTask.id`. ```js <del> assert.match(code, /consts+dataArrIndexs*=s*taskData.findIndex(s*((s*items*)|item)s*=>s*item.ids*===s*currentTask.ids*)s*;?/) </del> <ins> assert.match(code, /consts+dataArrIndexs*=s*taskData.findIndex(s*((s*items*)|item)s*=>s*(?:item.ids*===s*currentTask.id|currentTask.ids*===s*item.id)s*)s*;?/) </ins> ``` # --seed--


.fill-in-the-blank-wrap > p { margin: 0; <del> font-size: 1.25em; </del> <ins> font-size: 1.25rem; line-height: 1.5; </ins> } .fill-in-the-blank-input {


background-color: var(--primary-background); border-radius: 0; overflow-wrap: anywhere; <del> line-height: 1.5rem; </del> <ins> line-height: 1.5; </ins> z-index: 1; position: relative; border-left: none;


border-bottom-color: var(--gray-45) !important; } <ins> .fill-in-the-blank-input:focus { z-index: 2; } </ins> .code-tag code { font-size: 100%; z-index: 0;


To begin, we will discuss a particular type of tree, the binary tree. In fact, we will actually discuss a particular binary tree, a binary search tree. Let's describe what this means. While the tree data structure can have any number of branches at a single node, a binary tree can only have two branches for every node. Furthermore, a binary search tree is ordered with respect to the child subtrees, such that the value of each node in the left subtree is less than or equal to the value of the parent node, and the value of each node in the right subtree is greater than or equal to the value of the parent node. It's very helpful to visualize this relationship in order to understand it better:

  Now this ordered relationship is very easy to see. Note that every value to the left of 8, the root node, is less than 8, and every value to the right is greater than 8. Also notice that this relationship applies to each of the subtrees as well. For example, the first left child is a subtree. 3 is the parent node, and it has exactly two child nodes — by the rules governing binary search trees, we know without even looking that the left child of this node (and any of its children) will be less than 3, and the right child (and any of its children) will be greater than 3 (but also less than the structure's root value), and so on.


# --description-- <del> Add a `title` and a `meta` element to the `head`. Give your project a title of `Registration Form`, and give a `charset` attribute with a value of `UTF-8` to your `meta` element. </del> <ins> Add a `title` and `meta` element inside the `head` element. Give your project a title of `Registration Form`, and add the `charset` attribute with a value of `utf-8` to your `meta` element. </ins> # --hints--


assert.exists(title); ``` <del> The `title` element should be within the `head` element. </del> <ins> Your `title` element should be within the `head` element. </ins> ```js assert.exists(document.querySelector('head > title')); ``` <del> Your project should have a title of `Registration Form`. </del> <ins> Your project should have a title of `Registration Form`. Remember, the casing and spelling matters for the title. </ins> ```js const title = document.querySelector('title'); <del> assert.equal(title.text.toLowerCase(), 'registration form') </del> <ins> assert.equal(title.text, 'Registration Form'); </ins> ``` <del> Remember, the casing and spelling matters for the title. </del> <ins> You should create a `meta` element within the `head` element. </ins> ```js <del> const title = document.querySelector('title'); assert.equal(title.text, 'Registration Form'); </del> <ins> assert.exists(document.querySelector('head > meta')); ``` You should give the `meta` element a `charset` attribute with the value of `utf-8`. ```js assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8'); ``` Your `meta` element should be a void element, it does not have an end tag `</meta>`. ```js assert.notMatch(code, /</metas*>?/i); </ins> ``` # --seed--


The <dfn>HSL</dfn> color model, or hue, saturation, and lightness, is another way to represent colors. <del> The CSS hsl function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness. </del> <ins> The CSS `hsl` function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness. </ins> If you imagine a color wheel, the hue red is at 0 degrees, green is at 120 degrees, and blue is at 240 degrees.


Now you need to create a `draw` method for the `CheckPoint` class. <del> Inside the `draw` method, add a `fillStyle` property to the `ctx` object and set it to `"#f1be32"`. </del> <ins> Inside the `draw` method, assign the `fillStyle` property on the `ctx` object the hex color `"#f1be32"`. </ins> Below the `fillStyle` property, use the `fillRect` method on the `ctx` object and pass in the `x`, `y`, `width`, and `height` properties as arguments.


Your `CheckPoint` class should have a `draw` method. ```js <del> const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height)") assert.match(splitter[2], /draw(s*)s*{/); </del> <ins> const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height)"); assert.match(splitter[2], /draws*(s*)s*{/); </ins> ``` <del> Your `draw` method should have a `fillStyle` property added to the `ctx` object. </del> <ins> Your `draw` method should assign a value to the `fillStyle` property on the `ctx` object. </ins> ```js <del> const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height)") assert.match(splitter[2], /draw(s*)s*{s*ctx.fillStyle/); </del> <ins> const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height)"); assert.match(splitter[2], /draws*(s*)s*{s*ctx.fillStyles*=/); </ins> ``` <del> You should assign `"#f1be32"` to the `ctx.fillStyle` property. </del> <ins> You should assign the hex color `"#f1be32"` to the `fillStyle` property on the `ctx` object. </ins> ```js <del> const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height)") assert.match(splitter[2], /draw(s*)s*{s*ctx.fillStyles*=s*('|")#f1be321s*;?/); </del> <ins> const splitter = code.split("ctx.fillRect(this.position.x, this.position.y, this.width, this.height)"); assert.match(splitter[2], /draws*(s*)s*{s*ctx.fillStyles*=s*('|")#f1be321s*;?/); </ins> ``` Your `draw` method should invoke the `fillRect` method on the `ctx` object. ```js <del> const splitter = code.split('#f1be32') </del> <ins> const splitter = code.split('#f1be32'); </ins> assert.match(splitter[1], /ctx.fillRect(/); ``` <del> When invoking `ctx.fillRect` you should pass in the `x`, `y`, `width`, and `height` properties as arguments. Don't forget the `this` keyword. </del> <ins> When invoking `ctx.fillRect` you should pass in the `position.x`, `position.y`, `width`, and `height` properties as arguments. Don't forget the `this` keyword. </ins> ```js <del> const splitter = code.split('#f1be32') </del> <ins> const splitter = code.split('#f1be32'); </ins> assert.match(splitter[1], /ctx.fillRect(s*this.position.xs*,s*this.position.ys*,s*this.widths*,s*this.heights*)s*;?/); ```


assert(document.querySelector("fieldset:nth-of-type(3) input:nth-of-type(5)[type='checkbox']")); ``` <del> You should have an checkbox input with an `id` of `"price"`. </del> <ins> You should have a checkbox input with an `id` of `"price"`. </ins> ```js assert.strictEqual(document.querySelectorAll("fieldset:nth-of-type(3) input[type='checkbox']")[4].getAttribute('id'), 'price');


# --description-- <del> To make an checkbox input checked by default, you can add the `checked` attribute. </del> <ins> To make a checkbox input checked by default, you can add the `checked` attribute. </ins> Here is an example of using the `checked` attribute: