Cat Form
 <form action="https://freecatphotoapp.com/submit-cat-photo">  <fieldset>  --fcc-editable-region--  <fieldset>  <input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor <input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor  --fcc-editable-region--  </fieldset>  --fcc-editable-region--  <input type="text" name="catphotourl" placeholder="cat photo URL" required> <button type="submit">Submit</button> </form>


// eslint-disable-next-line max-len it('Worker executor should successfully execute 3 tasks and use 1 worker', async () => { mockWorker(); <del> const testWorker = createWorker('test', { concurrency: 1 }); </del> <ins> const testWorker = createWorker('test', { maxWorkers: 1 }); </ins> const task1 = testWorker.execute('test1'); const task2 = testWorker.execute('test2');


import { bindActionCreators } from 'redux'; import EditorTabs from './EditorTabs'; import { showUpcomingChanges } from '../../../../../config/env.json'; <ins> import i18next from 'i18next'; </ins> const mapStateToProps = createStructuredSelector({ currentTab: currentTabSelector


"workshop-blog-page": { "title": "Build a Cat Blog Page", "intro": [  "In this workshop, you will learn how to build an HTML only blog page using semantic elements including the main, nav, article and footer elements."   "In this workshop, you will learn how to build an HTML only blog page using semantic elements including the main, nav, article and footer elements."  ] }, "szcd": { "title": "13", "intro": [] },


 <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


margin: 0; padding: 0; } .certification-namespace h1 { margin: 12px 0; } .certification-namespace.container { max-width: 1500px; width: 100%;


section: PropTypes.string };  function ChallengeDescription({ description, instructions, section }) { return ( <div className={`challenge-instructions ${section}`}>
 {instructions && ( <Fragment>

 </Fragment> )}

 );   class ChallengeDescription extends Component { componentDidMount() { // Just in case 'current' has not been created, though it should have been. if (this.instructionsRef.current) { Prism.highlightAllUnder(this.instructionsRef.current); } } constructor(props) { super(props); this.instructionsRef = React.createRef(); } render() { const { description, instructions, section } = this.props; return ( <div className={`challenge-instructions ${section}`} ref={this.instructionsRef} >
 {instructions && ( <Fragment>

 </Fragment> )}

 ); }  } ChallengeDescription.displayName = 'ChallengeDescription';


# --description-- <del> Add an `else` block to handle the current song's position in the playlist. </del> <ins> Add an `else` block to handle the song's current playback time. This allows you to resume the current song at the point where it was paused. </ins> Within the `else` block, set the `currentTime` property of the `audio` object to the value stored in `userData?.songCurrentTime`.


# --description-- <del> Set `monsterHealth` to `monsterHealth` minus the power of the player's current weapon. Remember you have the `currentWeapon` variable and the `power` property. </del> <ins> Set `monsterHealth` to `monsterHealth` minus the power of the player's current weapon. Remember that you can access the power of the player's current weapon using `weapons[currentWeapon].power`. </ins> # --hints--


const propTypes = { canFocusEditor: PropTypes.bool, children: PropTypes.any, <ins> editorRef: PropTypes.object, </ins> executeChallenge: PropTypes.func, innerRef: PropTypes.any, introPath: PropTypes.string,


# --description-- <ins> In programming, it is standard practice to prefix a variable with `is` or `has` to indicate that the variable is a boolean. ```js let isRunning = true; let hasCompleted = false; ``` </ins> Declare an `isError` variable and set it to `false`, but use `let` so you can reassign it later. # --hints--


"difficulty": 0.13, "challengeSeed": "125671865", "description": [  "jQuery is a powerful tool for manipulating HTML elements.", "It's a lot easier to use than JavaScript itself, so we'll learn it first.",   "jQuery is a powerful library built in Javascript for manipulating HTML elements.", "It's a lot easier to use than Javascript itself, so we'll learn it first.",  "It's also extremely popular with employers, so we're going to learn it well.", "Codecademy has an excellent free course that will walk us through the basics of jQuery.", "Go to http://www.codecademy.com/courses/web-beginner-en-bay3D/0/1 and complete the first section."


Three circles of equal radius are placed inside a larger circle such that each pair of circles is tangent to one another and the inner circles do not overlap. There are four uncovered "gaps" which are to be filled iteratively with more tangent circles.       At each iteration, a maximally sized circle is placed in each gap, which creates more gaps for the next iteration. After 3 iterations (pictured), there are 108 gaps and the fraction of the area which is not covered by circles is 0.06790342, rounded to eight decimal places.


laser pointers

lasagna

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


if (typeof test.remove !== 'function') { return false; } <ins> test.add(15); test.add(30); </ins> return test.remove(100) == null; })() );


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.


"expect(drawer(19.50, 20.00, [['PENNY', 0.01], ['NICKEL', 0], ['DIME', 0], ['QUARTER', 0], ['ONE', 0], ['FIVE', 0], ['TEN', 0], ['TWENTY', 0], ['ONE HUNDRED', 0]])).to.be.a('string');", "expect(drawer(19.50, 20.00, [['PENNY', 0.50], ['NICKEL', 0], ['DIME', 0], ['QUARTER', 0], ['ONE', 0], ['FIVE', 0], ['TEN', 0], ['TWENTY', 0], ['ONE HUNDRED', 0]])).to.be.a('string');", "assert.deepEqual(drawer(19.50, 20.00, [['PENNY', 1.01], ['NICKEL', 2.05], ['DIME', 3.10], ['QUARTER', 4.25], ['ONE', 90.00], ['FIVE', 55.00], ['TEN', 20.00], ['TWENTY', 60.00], ['ONE HUNDRED', 100.00]]), [['QUARTER', 0.50]], 'return correct change');", <del> "assert.deepEqual(drawer(3.26, 100.00, [['PENNY', 1.01], ['NICKEL', 2.05], ['DIME', 3.10], ['QUARTER', 4.25], ['ONE', 90.00], ['FIVE', 55.00], ['TEN', 20.00], ['TWENTY', 60.00], ['ONE HUNDRED', 100.00]]), [['TWENTY', 80.00], ['TEN', 10.00], ['FIVE', 5], ['ONE', 1], ['QUARTER', 0.50], ['DIME', 0.20], ['PENNY', 0.04] ], 'return correct change with multiple coins and bills');", </del> <ins> "assert.deepEqual(drawer(3.26, 100.00, [['PENNY', 1.01], ['NICKEL', 2.05], ['DIME', 3.10], ['QUARTER', 4.25], ['ONE', 90.00], ['FIVE', 55.00], ['TEN', 20.00], ['TWENTY', 60.00], ['ONE HUNDRED', 100.00]]), [['TWENTY', 60.00], ['TEN', 20.00], ['FIVE', 15], ['ONE', 1], ['QUARTER', 0.50], ['DIME', 0.20], ['PENNY', 0.04] ], 'return correct change with multiple coins and bills');", </ins> "assert.deepEqual(drawer(19.50, 20.00, [['PENNY', 0.01], ['NICKEL', 0], ['DIME', 0], ['QUARTER', 0], ['ONE', 0], ['FIVE', 0], ['TEN', 0], ['TWENTY', 0], ['ONE HUNDRED', 0]]), 'Insufficient Funds', 'insufficient funds');", "assert.deepEqual(drawer(19.50, 20.00, [['PENNY', 0.50], ['NICKEL', 0], ['DIME', 0], ['QUARTER', 0], ['ONE', 0], ['FIVE', 0], ['TEN', 0], ['TWENTY', 0], ['ONE HUNDRED', 0]]), "Closed", 'cash-in-drawer equals change');" ]


You should not call the `changeBackgroundColor` function. Instead, assign the function reference to the `onclick` property. ```js <ins> assert.strictEqual(typeof btn.onclick, 'function'); assert.strictEqual(typeof changeBackgroundColor, 'function'); </ins> assert.strictEqual(btn.onclick, changeBackgroundColor); ```


# --description-- <del> Inside `pick`, use `let` to initialize a variable named `numbers` and set it to an empty array. </del> <ins> Inside `pick`, use `const` to initialize a variable named `numbers` and set it to an empty array. </ins> # --hints--


} onReady={this.videoIsReady} opts={{ <del> rel: 0, </del> <ins> playerVars: { rel: 0 }, </ins> width: '960px', height: '540px' }}


 The sort method sorts the elements of an array according to the callback function. For example:
function ascendingOrder(arr) {
  return arr.sort(function(a, b) {
    return a - b;
  });
}
ascendingOrder([1, 5, 2, 3, 4]);
// Returns [1, 2, 3, 4, 5]

function reverseAlpha(arr) {
  return arr.sort(function(a, b) {
    return a < b;
  });
}
reverseAlpha(['l', 'h', 'z', 'b', 's']);
// Returns ['z', 's', 'l', 'h', 'b']

function ascendingOrder(arr) {
  return arr.sort(function(a, b) {
    return a - b;
  });
}
ascendingOrder([1, 5, 2, 3, 4]);
// Returns [1, 2, 3, 4, 5]

function reverseAlpha(arr) {
  return arr.sort(function(a, b) {
    return a === b ? 0 : a < b ? : 1 : -1;
  });
}
reverseAlpha(['l', 'h', 'z', 'b', 's']);
// Returns ['z', 's', 'l', 'h', 'b']
  Note: It's encouraged to provide a callback function to specify how to sort the array items. JavaScript's default sorting method is by string Unicode point value, which may return unexpected results.


1. When you click on the `#check-btn` element without entering a value into the `#text-input` element, an alert should appear with the text `Please input a value` 1. When the `#text-input` element only contains the letter `A` and the `#check-btn` element is clicked, the `#result` element should contain the text `A is a palindrome` 1. When the `#text-input` element contains the text `eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `eye is a palindrome` <del> 1. When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `eye is a palindrome` </del> <ins> 1. When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `_eye is a palindrome` </ins> 1. When the `#text-input` element contains the text `race car` and the `#check-btn` element is clicked, the `#result` element should contain the text `race car is a palindrome` 1. When the `#text-input` element contains the text `not a palindrome` and the `#check-btn` element is clicked, the `#result` element should contain the text `not a palindrome is not a palindrome` 1. When the `#test-input` element contains the text `A man, a plan, a canal. Panama` and the `#check-btn` element is clicked, the `#result` element should contain the text `A man, a plan, a canal. Panama is a palindrome`


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


# --description-- <del> Inside your `while` loop, push a random number between 0 and 10 to the end of the `numbers` array. You can create this random number with `Math.floor(Math.random() * 11)`. </del> <ins> Inside your `while` loop, push a random number between `0` and `10` to the end of the `numbers` array. You can create this random number with `Math.floor(Math.random() * 11)`. </ins> # --hints--


`Thermostat` should be a `class` with a defined `constructor` method. ```js <del> assert( typeof Thermostat === 'function' && typeof Thermostat.constructor === 'function' ); </del> <ins> assert.isFunction(Thermostat); assert.isFunction(Thermostat?.constructor); </ins> ``` <del> `class` keyword should be used. </del> <ins> The `class` keyword should be used. </ins> ```js <del> assert(code.match(/class/g)); </del> <ins> assert.match(code, /class/); </ins> ``` `Thermostat` should be able to be instantiated. ```js <del> assert( (() => { const t = new Thermostat(122); return typeof t === 'object'; })() ); </del> <ins> const _t = new Thermostat(122); assert.isObject(_t); </ins> ``` When instantiated with a Fahrenheit value, `Thermostat` should set the correct `temperature`. ```js <del> assert( (() => { const t = new Thermostat(122); return t.temperature === 50; })() ); </del> <ins> const _t = new Thermostat(122); assert.strictEqual(_t?.temperature, 50); </ins> ``` A `getter` should be defined. ```js <del> assert( (() => { const desc = Object.getOwnPropertyDescriptor( Thermostat.prototype, 'temperature' ); return !!desc && typeof desc.get === 'function'; })() ); </del> <ins> const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature'); assert.isFunction(_desc?.get); </ins> ``` A `setter` should be defined. ```js <del> assert( (() => { const desc = Object.getOwnPropertyDescriptor( Thermostat.prototype, 'temperature' ); return !!desc && typeof desc.set === 'function'; })() ); </del> <ins> const _desc = Object.getOwnPropertyDescriptor(Thermostat.prototype, 'temperature'); assert.isFunction(_desc?.set); </ins> ``` Calling the `setter` with a Celsius value should set the `temperature`. ```js <del> assert( (() => { const t = new Thermostat(32); t.temperature = 26; const u = new Thermostat(32); u.temperature = 50; return t.temperature === 26 && u.temperature === 50; })() ); </del> <ins> const _t = new Thermostat(32); _t.temperature = 26; const _u = new Thermostat(32); _u.temperature = 50; assert.approximately(_t.temperature, 26, 0.1); assert.approximately(_u.temperature, 50, 0.1); </ins> ``` # --seed--


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


> <Caret /> <h4> <del> Super Block One Certification (300 hours) </del> <ins> Super Block One Certification (300 hours) </ins> </h4> </button> </li>


## Instructions
 Write a remove method that takes an element and removes it from the linked list.  Note The length of the list should decrease by one every time an element is removed from the linked list.   Note: The length of the list should decrease by one every time an element is removed from the linked list.
 ## Tests


```js function whatIsInAName(collection, source) { <del> const arr = []; // Only change code below this line // Only change code above this line return arr; </del> } whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });


# --description-- <del> Add one last conditional statement that checks if the player's `x` position is less than or equal to the sum of the platform's `x` position plus the platform's width minus one-third of the player's width. </del> <ins> Add one last boolean expression that checks if the player's `x` position is less than or equal to the sum of the platform's `x` position plus the platform's width minus one-third of the player's width. </ins> # --hints-- <del> You should have a conditional statement that checks if the player's `x` position is lesser than or equal to the platform's `x` position plus the platform's width minus the player's width divided by `3`. </del> <ins> You should have a boolean expression that checks if the player's `x` position is lesser than or equal to the platform's `x` position plus the platform's width minus the player's width divided by `3`. </ins> ```js assert.match(code, /player.position.xs*<=s*platform.position.xs*+s*platform.widths*-s*player.widths*/s*3,?/)


# --seed-- <ins> ## --after-user-code-- ```js let rules=[["A -> apple","B -> bag","S -> shop","T -> the","the shop -> my brother","a never used -> .terminating rule"], ["A -> apple","B -> bag","S -> .shop","T -> the","the shop -> my brother","a never used -> .terminating rule"], ["A -> apple","WWWW -> with","Bgage -> ->.*","B -> bag","->.* -> money","W -> WW","S -> .shop","T -> the","the shop -> my brother","a never used -> .terminating rule"], ["_+1 -> _1+","1+1 -> 11+","1! -> !1",",! -> !+","_! -> _","1*1 -> x,@y","1x -> xX","X, -> 1,1","X1 -> 1X","_x -> _X",",x -> ,X","y1 -> 1y","y_ -> _","1@1 -> x,@y","1@_ -> @_",",@_ -> !_","++ -> +","_1 -> 1","1+_ -> 1","_+_ -> "], ["A0 -> 1B","0A1 -> C01","1A1 -> C11","0B0 -> A01","1B0 -> A11","B1 -> 1B","0C0 -> B01","1C0 -> B11","0C1 -> H01","1C1 -> H11"]]; let tests=["I bought a B of As from T S.", "I bought a B of As from T S.", "I bought a B of As W my Bgage from T S.", "_1111*11111_", "000000A000000"]; let outputs=["I bought a bag of apples from my brother.", "I bought a bag of apples from T shop.", "I bought a bag of apples with my money from T shop.", "11111111111111111111", "00011H1111000"] ``` </ins> ## --seed-contents-- ```js


# --description--  **Objective:** Build an app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/JEXgeY.   **Objective:** Build an app that is functionally similar to this: https://heat-map.freecodecamp.rocks.  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.


# --description-- <del> Use the `setAttribute` method on the `playButton` element to set an attribute named `"aria-label"`. For the value, use a `ternary` to set `song?.title` to `Play ${song.title}` or `"Play"` if there's no `song.title` available. </del> <ins> The `setPlayButtonAccessibleText` function will set the `aria-label` attribute to the current song, or to the first song in the playlist. And if the playlist is empty, it sets the `aria-label` to `"Play"`. Use the `setAttribute` method on the `playButton` element to set an attribute named `"aria-label"`. For the value, use a ternary to `set song?.title` to `Play ${song.title}` or `"Play"` if there's no `song.title` available. </ins> Don't forget you need template interpolation here, so you need to use backticks.


import rateLimit from 'express-rate-limit'; // @ts-expect-error - no types import MongoStoreRL from 'rate-limit-mongo'; <ins> import isEmail from 'validator/lib/isEmail'; </ins> import { AUTH0_DOMAIN, MONGOHQ_URL } from '../utils/env'; import { auth0Client } from '../plugins/auth0'; <ins> import { createAccessToken } from '../utils/tokens'; </ins> import { findOrCreateUser } from './helpers/auth-helpers'; <del> const getEmailFromAuth0 = async (req: FastifyRequest) => { </del> <ins> const getEmailFromAuth0 = async ( req: FastifyRequest ): Promise<string | null> => { </ins> const auth0Res = await fetch(`https://${AUTH0_DOMAIN}/userinfo`, { headers: { Authorization: req.headers.authorization ?? '' } }); <del> if (!auth0Res.ok) { req.log.error(auth0Res); throw new Error('Invalid Auth0 Access Token'); } </del> <ins> if (!auth0Res.ok) return null; </ins> <del> const { email } = (await auth0Res.json()) as { email: string }; return email; </del> <ins> // For now, we assume the response is a JSON object. If not, we can't proceed // and the only safe thing to do is to throw. const { email } = (await auth0Res.json()) as { email?: string }; return typeof email === 'string' ? email : null; </ins> }; /**


align-items: center; min-height: 100vh; flex-direction: column; <ins> padding: 50px; </ins> } .certificate-outer-wrapper .donation-section { <del> padding: 20px 0px; </del> <ins> padding-bottom: 100px; </ins> } .certificate-outer-wrapper .donation-section hr {


--fcc-editable-region-- function pick(guess) { <del> let numbers = []; </del> <ins> const numbers = []; </ins> while (numbers.length < 10) { }


? 'vs-custom' : editorSystemTheme; <del> const isFailedChallengeTest = (test: Test): test is ChallengeTest => !!test.err && 'text' in test; const firstFailedTest = props.tests.find<ChallengeTest>(test => isFailedChallengeTest(test) ); </del> <ins> const firstFailedTest = props.tests.find(test => !!test.err); </ins> return ( <Suspense fallback={<Loader loaderDelay={600} />}>


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


type Story = StoryObj<typeof CloseButton>; export const Basic: Story = { <del> args: { className: '', label: '' } </del> <ins> args: {} </ins> }; export default story;


on: workflow_dispatch: schedule: <del> # runs every weekday at 12:15 PM UTC - cron: '15 12 * * 1-5' </del> <ins> # runs Monday and Wednesday at 12:15 PM UTC - cron: '15 12 * * 1,3' </ins> env: GITHUB_TOKEN: ${{ secrets.CROWDIN_CAMPERBOT_PAT }}


if (!codeUri.enabled) { return null; } <del> location.hash = '?solution=' + codeUri.encode(encodeFcc(solution)); </del> <ins> if (history && typeof history.replaceState === 'function') { history.replaceState( history.state, null, '?solution=' + codeUri.encode(encodeFcc(solution)) ); } else { location.hash = '?solution=' + codeUri.encode(encodeFcc(solution)); } </ins> return solution; },


padding-bottom: 18px; background: transparent; border: none; <ins> text-align: left; </ins> } button.map-title:hover {


const searchButton = document.getElementById('search-button'); let alertMessage; window.alert = (message) => alertMessage = message; // Override alert and store message <del> const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz' const numbers = '0123456789'; const charactersLength = letters.length; const numbersLength = numbers.length; const firstLetter = letters.charAt(Math.floor(Math.random() * charactersLength)); const secondLetter = letters.charAt(Math.floor(Math.random() * charactersLength)); const thirdLetter = letters.charAt(Math.floor(Math.random() * charactersLength)); const fourthLetter = letters.charAt(Math.floor(Math.random() * charactersLength)); const randomNumber1 = numbers.charAt(Math.floor(Math.random() * numbersLength)); const randomNumber2 = numbers.charAt(Math.floor(Math.random() * numbersLength)); const badName = firstLetter + secondLetter + thirdLetter + fourthLetter + randomNumber1 + randomNumber2; const randomInvalidPokeId = badName; </del> <ins> const randomInvalidPokeId = crypto.randomUUID().substring(0, 6); </ins> searchInput.value = randomInvalidPokeId; searchInput.dispatchEvent(new Event('change')); searchButton.click(); <del> const res = await fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/' + randomInvalidPokeId.toString()); // Fetch from proxy to simulate network delay </del> <ins> const res = await fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/' + randomInvalidPokeId); // Fetch from proxy to simulate network delay </ins> if (!res.ok) { <del> await new Promise(resolve => setTimeout(resolve, 1000)); // Additional delay to allow the alert to trigger </del> <ins> await new Promise(resolve => setTimeout(resolve, 2000)); // Additional delay to allow the alert to trigger </ins> assert.include(['pokémon not found', 'pokemon not found'], alertMessage.trim().replace(/[.,?!]+$/g, '').toLowerCase()); }


"cert-map-estimates": { "certs": "认证（300 小时）", "coding-prep": "（数千小时的挑战）" <ins> }, "editor-tabs": { "info": "信息", "code": "码", "tests": "测验", "preview": "预习" </ins> } }, "donate": {


], "tests": [ "assert(typeof timesFive === 'function', 'message: timesFive should be a function');",  "assert(code.match(/timesFive(s*d+s*)/g), 'message: function timesFive should be called with a number');",   "assert(code.match(/timesFive(s*d+s*)/g), 'message: function timesFive should be called with a number');",  "assert(timesFive(5) === 25, 'message: timesFive(5) should return 25');", "assert(timesFive(2) === 10, 'message: timesFive(2) should return 10');", "assert(timesFive(0) === 0, 'message: timesFive(0) should return 0');"


} .map-challenge-title { <ins> display: flex; </ins> margin-bottom: 0.25rem; <del> max-width: calc(100% - 80px); </del> <ins> max-width: calc(100% - 105px); } @media (max-width: 640px) { .map-ui .block ul { padding-inline-start: 6px; font-size: 0.9rem; } button.map-title { width: 100%; } .map-ui ul { padding-inline-start: 15px; } .map-ui > ul { padding-inline-start: 0; } .map-challenge-title { max-width: 100%; } .map-title-completed { flex-shrink: 0; padding-left: 15px; } </ins> } .block a { text-decoration: none; } <ins> /* 14px is the width of the expansion arrow */ .superblock { max-width: calc(100% - 14px); } </ins>


on: workflow_dispatch: schedule: <del> # runs every weekday at 12:30 PM UTC - cron: '30 12 * * 1-5' </del> <ins> # runs Monday and Wednesday at 12:15 PM UTC - cron: '15 12 * * 1,3' </ins> env: GITHUB_TOKEN: ${{ secrets.CROWDIN_CAMPERBOT_PAT }}


} = this.props; return ( <Hotkeys <ins> editorRef={this.editorRef} </ins> executeChallenge={executeChallenge} innerRef={this.containerRef} introPath={introPath}


# --description-- <del> Below that conditional statement, add another conditional statement that checks if the player's `x` position is greater than or equal to the platform's `x` position minus half of the player's width. </del> <ins> Below that boolean expression, add another boolean expression that checks if the player's `x` position is greater than or equal to the platform's `x` position minus half of the player's width. </ins> # --hints-- <del> You should have a conditional statement that checks if the player's `x` position is greater than or equal to the platform's `x` position minus half of the player's width. </del> <ins> You should have a boolean expression that checks if the player's `x` position is greater than or equal to the platform's `x` position minus half of the player's width. </ins> ```js assert.match(code, /consts+collisionDetectionRuless*=s*[s*player.position.ys*+s*player.heights*<=s*platform.position.ys*,s*player.position.ys*+s*player.heights*+s*player.velocity.ys*>=s*platform.position.ys*,s*player.position.xs*>=s*platform.position.xs*-s*player.widths*/s*2,?s*]s*;?/);


{ type: 'info', message: dedent` <del> ${username} has chosen to make their profile private. They will need to make their profile public </del> <ins> ${username} has chosen to make their portfolio private. They will need to make their portfolio public </ins> in order for others to be able to view their certification. ` }


.tool-panel-group-mobile .btn-block + .btn-block { margin: 0 2px 0 0; <ins> padding-left: 8px; padding-right: 8px; </ins> }


} return bookListCopy; } <del> const newBookList = add(bookList, 'A Brief History of Time'); const newerBookList = remove(bookList, 'On The Electrodynamics of Moving Bodies'); const newestBookList = remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies'); </del> ```


"Nest one div element with the class well within each of your col-xs-6 div elements." ], "tests": [  "assert($("div").length > 4, 'Add two div elements inside your div class="well"> element both with the class col-xs-6')",   "assert($("div").length > 4, 'Add a div element with the class well inside each of your div class="col-xs-6"> elements')",  "assert($("div.col-xs-6").children("div.well").length > 1, 'Nest both of your div class="col-xs-6" elements within your div class="row" element.')", "assert(editor.match(/
/g) && editor.match(/<div/g) && editor.match(/
/g).length === editor.match(/<div/g).length, 'Make sure all your div elements have closing tags.')" ],


# --description-- <del> Turn the words `cat photos` located inside `p` element into a link by replacing the words with the anchor element added previously. The `p` element should show the same text in the browser, but the words `cat photos` should now be a link. There should only be one link showing in the app. </del> <ins> Turn the words `cat photos` located inside `p` element into a link using the same value for the `href` attribute as the link below the `p` element. The `p` element should show the same text in the browser, but the words `cat photos` should now be a link. Make sure to remove the `a` element with the text `cat photos` on the line below the `p` element. </ins> # --hints--


} function pick(guess) { <del> let numbers = []; </del> <ins> const numbers = []; </ins> while (numbers.length < 10) { numbers.push(Math.floor(Math.random() * 11)); }


.find('.map-title') .find('h4') .text() <del> ).toBe('Super Block One Certification (300 hours)'); </del> <ins> ).toBe('Super Block One Certification (300xa0hours)'); </ins> expect(enzymeWrapper.find('ul').length).toBe(0); enzymeWrapper.find('.map-title').simulate('click');


'cert-map-estimates': { certs: 'Certification (300u00A0hours)', 'coding-prep': '(Thousands of hours of challenges)' <ins> }, 'editor-tabs': { info: 'Info', code: 'Code', tests: 'Tests', preview: 'Preview' </ins> } }, donate: {


Use the addition operator to concatenate a blank space `" "` to the beginning and end of your repeated `character` string. <ins> Remember that you can use the `+` operator to concatenate strings like this: ```js " " + "string" ``` </ins> # --hints-- You should concatenate an empty space to the beginning of your returned value.


# --description--  **Objective:** Build an app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/bgpXyK.   **Objective:** Build an app that is functionally similar to this: https://scatterplot-graph.freecodecamp.rocks.  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.


); renderIsHonestAgreed = () => (  <Panel bsStyle='info' className='agreed btn'>   <Button block={true} bsStyle='primary' className='disabled-agreed' disabled={true} >
You have accepted our Academic Honesty Policy.
  </Panel>   </Button>  ); render() {


<ins> /** * Adapted from: * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML * Based on https://github.com/chriskempson/tomorrow-theme * @author Rose Pritchard */ .night code[class*='language-'], .night pre[class*='language-'] { color: #ccc; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; text-shadow: none; } .night pre[class*='language-'] code[class*='language-'] { color: #d4d4d4; } /* Code blocks */ .night pre[class*='language-'] { padding: 1em; margin: 0.5em 0; overflow: auto; } .night :not(pre) > code[class*='language-'], .night pre[class*='language-'] { background: #242424; } /* Inline code */ .night :not(pre) > code[class*='language-'] { padding: 0.1em; border-radius: 0.3em; white-space: normal; } .night .token.comment, .night .token.block-comment, .night .token.prolog, .night .token.doctype, .night .token.cdata { color: #608b4e; } .night .token.punctuation { color: #ffff00; } .night .token.tag, .night .token.attr-name, .night .token.namespace, .night .token.deleted { color: #e2777a; } .night .token.function-name { color: #d4d4d4; } .night .token.boolean, .night .token.number, .night .token.function { color: #569cd6; } .night .token.property, .night .token.class-name, .night .token.constant, .night .token.symbol { color: #f8c555; } .night .token.selector, .night .token.important, .night .token.atrule, .night .token.keyword, .night .token.builtin { color: #569cd6; } .night .token.string, .night .token.char, .night .token.attr-value, .night .token.regex, .night .token.variable { color: #7ec699; } .night .token.operator, .night .token.entity, .night .token.url { color: #67cdcc; background: none; } .night .token.important, .night .token.bold { font-weight: bold; } .night .token.italic { font-style: italic; } .night .token.entity { cursor: help; } .night .token.inserted { color: green; } </ins>


}; const mapStateToProps = createSelector( <ins> isDonationModalOpenSelector, </ins> userSelector, <del> ({ theme = 'night' }) => ({ theme }) </del> <ins> (open, { theme = 'night' }) => ({ canFocus: !open, theme }) </ins> ); const mapDispatchToProps = dispatch =>


.find('.map-title') .find('h4') .text() <del> ).toBe('Super Block One Certification (300 hours)'); </del> <ins> ).toBe('Super Block One Certification (300xa0hours)'); </ins> expect(enzymeWrapper.find('ul').length).toBe(1); });


editorDidMount = (editor, monaco) => { this._editor = editor; <del> this._editor.focus(); </del> <ins> if (this.props.canFocus) this._editor.focus(); </ins> this._editor.addAction({ id: 'execute-challenge', label: 'Run tests',


Your `<title>` element should be nested in your `<head>` element. ```js <del> assert(code.match(/<head>s*<title>.*</title>s*</head>/i)); </del> <ins> assert(code.match(/<head>s*<title>.*</title>s*</head>/si)); </ins> ``` Your `<title>` element should have the text `Camper Cafe Menu`. You may need to check your spelling. ```js <del> assert(code.match(/<title>camperscafesmenu</title>/i)); </del> <ins> assert.match(document.querySelector('title')?.innerText, /camper cafe menu/i); </ins> ``` # --seed--


When a method returns a value, you can think of it as giving the value back to you, making it available for use in other parts of your code. <del> Declare a `popped` variable, and assign it the result of `rows.pop()`. Then, log your `popped` variable. </del> <ins> Create a new variable called `popped` and assign it the result of `rows.pop()`. Then, log `popped` to the console. </ins> # --hints-- <del> You should declare a `popped` variable. </del> <ins> You should declare a variable called `popped`. </ins> ```js assert.match(code, /popped/); ``` <del> You should use `let` to declare your `popped` variable. </del> <ins> You should use `let` to declare your variable called `popped`. </ins> ```js assert.match(code, /lets+popped/);


```js const splitter = code.split("if (this.position.x < this.width) {") <ins> assert.match(splitter[1], /this.heights*=s*proportionalSize(s*d+s*)s*;?/); ``` You should assign `proportionalSize(40)` to the `height` property. ```js const splitter = code.split("if (this.position.x < this.width) {") </ins> assert.match(splitter[1], /this.heights*=s*proportionalSize(s*40s*)s*;?/); ```


if (element.type === FourOhFourPage) { return <DefaultLayout pathname={pathname}>{element}</DefaultLayout>; } <del> if (/^/certification(/.*)*/.test(pathname)) { </del> <ins> if (//certification//.test(pathname)) { </ins> return ( <CertificationLayout pathname={pathname}>{element}</CertificationLayout> ); } <del> if (/^/guide(/.*)*/.test(pathname)) { </del> <ins> if (//guide//.test(pathname)) { </ins> console.log('Hitting guide for some reason. Need a redirect.'); } const splitPath = pathname.split('/'); <del> const splitPathThree = splitPath.length > 2 ? splitPath[3] : ''; </del> <ins> const isSuperBlock = (splitPath.length === 3 && splitPath[1]) || (splitPath.length === 4 && splitPath[2]); </ins> <del> const isNotSuperBlockIntro = splitPath.length > 3 && splitPathThree.length > 1; if (/^/learn(/.*)*/.test(pathname) && isNotSuperBlockIntro) { </del> <ins> if (//learn//.test(pathname) && !isSuperBlock) { </ins> return ( <DefaultLayout pathname={pathname} showFooter={false}> {element}


export function transformEditorLink(url) { return url .replace( <del> /(?<=//)(?<projectname>[^.]+).(?<username>[^.]+).repl.co/?/, 'replit.com/@$<username>/$<projectname>' </del> <ins> /(//)(?<projectname>[^.]+).(?<username>[^.]+).repl.co/?/, '//replit.com/@$<username>/$<projectname>' </ins> ) .replace( <del> /(?<=//)(?<projectname>[^.]+).glitch.me/?/, 'glitch.com/edit/#!/$<projectname>' </del> <ins> /(//)(?<projectname>[^.]+).glitch.me/?/, '//glitch.com/edit/#!/$<projectname>' </ins> ); }


assert.strictEqual(resultEl.innerText.trim().replace(/[.,?!]+$/g, '').toLowerCase(), 'eye is a palindrome'); ``` <del> When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `eye is a palindrome`. </del> <ins> When the `#text-input` element contains the text `_eye` and the `#check-btn` element is clicked, the `#result` element should contain the text `_eye is a palindrome`. </ins> ```js const inputEl = document.getElementById('text-input');


# --description-- <del> Use `const` and arrow syntax to define a function called `setPlayButtonAccessibleText`. </del> <ins> To make the application more accessible, it is important that the play button describes the current song or the first song in the playlist. </ins> <del> This function will set the `aria-label` attribute to the current song, or to the first song in the playlist. And if the playlist is empty, it sets the `aria-label` to `"Play"`. </del> <ins> Start by creating an empty arrow function called `setPlayButtonAccessibleText`. </ins> # --hints--


// all auth routes. fastify.addHook('onRequest', fastify.redirectIfSignedIn); <del> fastify.get('/mobile-login', async req => { </del> <ins> fastify.get('/mobile-login', async (req, reply) => { </ins> const email = await getEmailFromAuth0(req); <del> await findOrCreateUser(fastify, email); </del> <ins> if (!email) { return reply.status(401).send({ message: 'We could not log you in, please try again in a moment.', type: 'danger' }); } if (!isEmail(email)) { return reply.status(400).send({ message: 'The email is incorrectly formatted', type: 'danger' }); } const { id } = await findOrCreateUser(fastify, email); reply.setAccessTokenCookie(createAccessToken(id)); </ins> }); done();


.table > tfoot > tr > td { border: none; } <ins> .modal { overflow-y: auto; } </ins>


// eslint-disable-next-line max-len it('Worker executor should successfully execute 3 tasks in parallel and use 3 workers', async () => { mockWorker(); <del> const testWorker = createWorker('test', { concurrency: 3 }); </del> <ins> const testWorker = createWorker('test', { maxWorkers: 3 }); </ins> const task1 = testWorker.execute('test1'); const task2 = testWorker.execute('test2');


Here you'll build a cash register app that will return change to the customer based on the price of the item, the amount of cash provided by the customer, and the amount of cash in the cash drawer. You'll also need to show different messages to the user in different scenarios, such as when the customer provides too little cash or when the cash drawer doesn't have enough to issue the correct change. <del> There are a few variables you'll need to use in your code: </del> <ins> In the `script.js` file, you have been provided with the `price` and `cid` variables. The `price` variable is the price of the item, and the `cid` variable is the cash-in-drawer, which is a 2D array listing the available currency in the cash drawer. </ins> <del> - `price`: the price of the item as a floating point number. - `cash`: the amount of cash provided by the customer for the item, which is provided via an `input` element on the page. - `cid`: cash-in-drawer, a 2D array listing available currency in the cash drawer. </del> <ins> The other variable you will need add is the `cash` variable, which is the amount of cash provided by the customer for the item, which is provided via an `input` element on the page. </ins> If you'd like to test your application with different values for `price` and `cid`, make sure to declare them with the `let` keyword so they can be reassigned by our tests.


<Fragment> <FullWidthRow>
  {username} has not made their profile public.   {username} has not made their portfolio public.
 </FullWidthRow> <FullWidthRow>
 {username} needs to change their privacy setting in order for you to  view their profile.   view their portfolio.
 </FullWidthRow> <Spacer />


#challenge-page-tabs .nav-tabs > li > a { padding: 5px 10px; <ins> text-decoration: none; font-size: 0.8em; </ins> } #challenge-page-tabs .tab-content {


var test = new LinkedList(); test.add('cat'); test.add('dog'); <del> return test.head().next.element === 'dog'; </del> <ins> test.add('fish'); return test.head().next.element === 'dog' && test.head().next.next.element === 'fish'; </ins> })() ); ```


} .form-control { <del> color: var(--theme-color); </del> <ins> color: var(--primary-color); </ins> outline: none; border-color: var(--quaternary-background); <ins> background-color: var(--primary-background); </ins> -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important;


openHelpModal={props.openHelpModal} openResetModal={props.openResetModal} tryToExecuteChallenge={tryToExecuteChallenge} <del> hint={firstFailedTest?.text} </del> <ins> hint={firstFailedTest?.message} </ins> testsLength={props.tests.length} attempts={attemptsRef.current} challengeIsCompleted={challengeIsComplete()}


 // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`<Honesty /> <Honesty /> snapshot when isHonest is false: Honesty 1`] = `
 <SectionHeader> Academic Honesty Policy </SectionHeader> <FullWidthRow> <Uncontrolled(Panel) className="honesty-panel" > <HonestyPolicy /> </Uncontrolled(Panel)>
 <Button active={false} block={true} bsClass="btn" bsStyle="primary" disabled={false} onClick={[Function]} > Agree </Button> </FullWidthRow>
 `; exports[`<Honesty /> <Honesty /> snapshot when isHonest is true: HonestyAccepted 1`] = `
 <SectionHeader> Academic Honesty Policy </SectionHeader> <FullWidthRow> <Uncontrolled(Panel) className="honesty-panel" > <HonestyPolicy /> </Uncontrolled(Panel)>
 <Button active={false} block={true} bsClass="btn" bsStyle="primary" className="disabled-agreed" disabled={true} >
 You have accepted our Academic Honesty Policy.
 </Button> </FullWidthRow>
 `;


This will open the user management tools, you will be able to see the list of all the users. <del> Search for the user that will become contributor. Use the three dots menu on the user row to open a menu and select "Add to team". The proofreader teams have a standard name of `Proof Readers (<language>)`, you can search the team using the language name. Once you have selected the team, use the "ADD" button at the bottom of the page to finalize the thing. </del> <ins> Search for the user that will become proofreader. Use the three dots menu on the user row to open a menu and select "Add to team". The proofreader teams have a standard name of `Proof Readers (<language>)`, you can search the team using the language name. Once you have selected the team, use the "ADD" button at the bottom of the page to finalize the thing. </ins> The user is now a proofreader.


id='challenge-page-tabs' onSelect={moveToTab} > <del> <TabPane eventKey={1} title='Instructions'> </del> <ins> <TabPane eventKey={1} title='Info'> </ins> {instructions} </TabPane> <TabPane eventKey={2} title='Code' {...editorTabPaneProps}>


Which starting number, under the given `limit`, produces the longest chain? <del> **Note:** Once the chain starts the terms are allowed to go above one million. </del> <ins> **Note:** Once the chain starts the terms are allowed to go above `limit`. </ins> # --hints--


height: 100%; overflow: hidden; } <del> #challenge-page-tabs a { text-decoration: none; } #challenge-page-tabs a:hover { color: var(--secondary-background); </del> <ins> #challenge-page-tabs .nav-tabs > li.active > a { color: var(--quaternary-color); background-color: var(--quaternary-background); </ins> }


.map-title-completed { margin-left: auto; <del> width: 100px; </del> <ins> min-width: 100px; </ins> padding-left: 20px; }


id='challenge-page-tabs' onSelect={moveToTab} > <del> <TabPane eventKey={1} title='Info'> </del> <ins> <TabPane eventKey={1} title={i18next.t('learn.editor-tabs.info')}> </ins> {instructions} </TabPane> <del> <TabPane eventKey={2} title='Code' {...editorTabPaneProps}> </del> <ins> <TabPane eventKey={2} title={i18next.t('learn.editor-tabs.code')} {...editorTabPaneProps} > </ins> {showUpcomingChanges && <EditorTabs />} {editor} </TabPane> <del> <TabPane eventKey={3} title='Tests' {...editorTabPaneProps}> </del> <ins> <TabPane eventKey={3} title={i18next.t('learn.editor-tabs.tests')} {...editorTabPaneProps} > </ins> {testOutput} </TabPane> {hasPreview && ( <del> <TabPane eventKey={4} title='Preview'> </del> <ins> <TabPane eventKey={4} title={i18next.t('learn.editor-tabs.preview')} > </ins> {preview} </TabPane> )}


# --hints-- <del> There should be an `img` element right above the second `section` element's closing tag. </del> <ins> There should be an `img` element right after the closing `</ul>` tag. </ins> ```js assert($('section')[1].lastElementChild.nodeName === 'IMG');


.scene-wrapper { overflow: hidden; position: relative; <ins> color: var(--gray-00); </ins> } .scene-start-screen {


id: 587d778b367417b2b2512aa8 title: Add an Accessible Date Picker challengeType: 0 <del> videoUrl: 'https://scrimba.com/c/cD9DJHr' </del> <ins> videoUrl: 'https://scrimba.com/c/cR3bRbCV' </ins> --- ## Description


} } <ins> focusOnEditor() { this._editor.focus(); } </ins> onChange = editorValue => { const { updateFile, fileKey } = this.props; updateFile({ key: fileKey, editorValue });


return ( <Fragment>
  Before we issue our verified certification to a camper, he or she must accept our Academic Honesty Pledge, which reads:   Before you can claim a verified certification, you must accept our Academic Honesty Pledge, which reads:

 "I understand that plagiarism means copying someone else’s work and


}, timeout); worker.onmessage = e => { <del> if (e.data && e.data.type) { </del> <ins> clearTimeout(timeoutId); // data.type is undefined when the message has been processed // successfully and defined when something else has happened (e.g. // an error occurred) if (e.data?.type) { </ins> this.emit(e.data.type, e.data.data); <del> return; </del> <ins> } else { this.emit('done', e.data); </ins> } <del> clearTimeout(timeoutId); this.emit('done', e.data); </del> }; worker.onerror = e => {


assert.match(calculateCalories.toString(), /document.querySelectorAll(s*('|")#breakfast input[s*type=numbers*]s*1s*)/); ``` <del> You should assign the result of your `odocument.querySelectorAll()` call to `breakfastNumberInputs`. </del> <ins> You should assign the result of your `document.querySelectorAll()` call to `breakfastNumberInputs`. </ins> ```js assert.match(calculateCalories.toString(), /breakfastNumberInputss*=s*document.querySelectorAll(s*('|")#breakfast input[s*type=numbers*]s*1s*)/);


class WorkerExecutor { constructor( workerName, <del> { location = '/js/', concurrency = 2, terminateWorker = false } = {} </del> <ins> { location = '/js/', maxWorkers = 2, terminateWorker = false } = {} </ins> ) { <del> this._workerName = workerName; this._workers = []; this._queue = []; this._running = 0; this._concurrency = concurrency; </del> <ins> this._workerPool = []; this._taskQueue = []; this._workersInUse = 0; this._maxWorkers = maxWorkers; </ins> this._terminateWorker = terminateWorker; <del> this._location = location; </del> <ins> this._scriptURL = `${location}${workerName}.js`; </ins> this._getWorker = this._getWorker.bind(this); } async _getWorker() { <del> let worker; if (this._workers.length) { worker = this._workers.shift(); } else { worker = await new Promise((resolve, reject) => { const worker = new Worker(`${this._location}${this._workerName}.js`); worker.onmessage = e => { if (e.data && e.data.type && e.data.type === 'contentLoaded') { resolve(worker); } }; worker.onerror = err => reject(err); }); } return worker; </del> <ins> return this._workerPool.length ? this._workerPool.shift() : this._createWorker(); </ins> } <del> _pushTask(task) { this._queue.push(task); this._next(); </del> <ins> _createWorker() { return new Promise((resolve, reject) => { const newWorker = new Worker(this._scriptURL); newWorker.onmessage = e => { if (e.data?.type === 'contentLoaded') { resolve(newWorker); } }; newWorker.onerror = err => reject(err); }); </ins> } _handleTaskEnd(task) { return () => { <del> this._running--; if (task._worker) { const worker = task._worker; </del> <ins> this._workersInUse--; const worker = task._worker; if (worker) { </ins> if (this._terminateWorker) { worker.terminate(); } else { worker.onmessage = null; worker.onerror = null; <del> this._workers.push(worker); </del> <ins> this._workerPool.push(worker); </ins> } } <del> this._next(); </del> <ins> this._processQueue(); </ins> }; } <del> _next() { while (this._running < this._concurrency && this._queue.length) { const task = this._queue.shift(); </del> <ins> _processQueue() { while (this._workersInUse < this._maxWorkers && this._taskQueue.length) { const task = this._taskQueue.shift(); </ins> const handleTaskEnd = this._handleTaskEnd(task); task._execute(this._getWorker).done.then(handleTaskEnd, handleTaskEnd); <del> this._running++; </del> <ins> this._workersInUse++; </ins> } }


The `rem` unit stands for `root em`, and is relative to the font size of the `html` element. <del> Create an `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to be roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`). </del> <ins> Create a `.small-text` selector and set the `font-size` to `0.85rem`, which would calculate to roughly `13.6px` (remember that you set your `html` to have a `font-size` of `16px`). </ins> # --hints--


# --description-- <del> Add another conditional statement that checks if the sum of the player's `y` position, height, and `y` velocity is greater than or equal to the platform's `y` position. </del> <ins> Add another boolean expression that checks if the sum of the player's `y` position, height, and `y` velocity is greater than or equal to the platform's `y` position. </ins> # --hints-- <del> You should have a conditional statement that checks if the sum of the player's `y` position, height, and `y` velocity is greater than or equal to the platform's `y` position. </del> <ins> You should have a boolean expression that checks if the sum of the player's `y` position, height, and `y` velocity is greater than or equal to the platform's `y` position. </ins> ```js


"Try creating one of each." ], "tests":[  "assert(editor.getValue().match(/(//)...../g), 'Create a // style comment that contains at least five letters');", "assert(editor.getValue().match(/(/*)...../g), 'Create a /* */ style comment that contains at least five letters.');", "assert(editor.getValue().match(/(*/)/g), 'Make sure that you close the comment with a */');"   "assert(editor.getValue().match(/(//)...../g), 'Create a // style comment that contains at least five letters');", "assert(editor.getValue().match(/(/*)[wW]{5,}(?=*/)/gm), 'Create a /* */ style comment that contains at least five letters.');", "assert(editor.getValue().match(/(*/)/g), 'Make sure that you close the comment with a */');"  ], "challengeSeed":[ ],


<ins> /* global expect jest */ import React from 'react'; import ShallowRenderer from 'react-test-renderer/shallow'; import TestRenderer from 'react-test-renderer'; import Honesty from './Honesty'; import { Button } from '@freecodecamp/react-bootstrap'; describe('<Honesty />', () => { const renderer = new ShallowRenderer(); const updateIsHonestMock = jest.fn(); test('<Honesty /> snapshot when isHonest is false', () => { const componentToRender = ( <Honesty isHonest={false} updateIsHonest={updateIsHonestMock} /> ); const component = renderer.render(componentToRender); expect(component).toMatchSnapshot('Honesty'); }); test('<Honesty /> snapshot when isHonest is true', () => { const componentToRender = ( <Honesty isHonest={true} updateIsHonest={updateIsHonestMock} /> ); const component = renderer.render(componentToRender); expect(component).toMatchSnapshot('HonestyAccepted'); }); test('should call updateIsHonest method on clicking agree button', () => { const root = TestRenderer.create( <Honesty isHonest={false} updateIsHonest={updateIsHonestMock} /> ).root; root.findByType(Button).props.onClick(); expect(updateIsHonestMock).toHaveBeenCalledWith({ isHonest: true }); }); }); </ins>


</p> <p key={6}> In the situations where we discover instances of unambiguous plagiarism, <del> we will replace the camper in question’s certification with a message </del> <ins> we will replace the person in question’s certification with a message </ins> that "Upon review, this account has been flagged for academic dishonesty." </p>


`); } catch (err) { if (__userCodeWasExecuted) { <ins> // rethrow error, since test failed. </ins> throw err; <ins> } else { // report errors to dev console (not the editor console, since the test // may still pass) __utils.oldLog(err); </ins> } testResult = eval(e.data.testString); }


function Hotkeys({ canFocusEditor, children, <ins> editorRef, </ins> executeChallenge, introPath, innerRef,


`myVar = myVar - 1;` should be changed. ```js <del> assert( /lets*myVars*=s*11;s*/*.*s*([-]{2}s*myVar|myVars*[-]{2});/.test(code) ); </del> <ins> assert(!code.match(/myVars*=s*myVars*[-]s*1.*?;?/)); ``` You should not assign `myVar` with `10`. ```js assert(!code.match(/myVars*=s*10.*?;?/)); </ins> ``` You should use the `--` operator on `myVar`.


# --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"];


--fcc-editable-region-- function pick(guess) { <del> let numbers = []; </del> <ins> const numbers = []; </ins> while (numbers.length < 10) { numbers.push(Math.floor(Math.random() * 11)); }


.once('error', err => reject(err.message)); }); <del> this._pushTask(task); </del> <ins> this._taskQueue.push(task); this._processQueue(); </ins> return task; } } <ins> // Error and completion handling </ins> const eventify = self => { self._events = {};


此指南可阅读的语言版本 	     Read these guidelines in 	   English 	   中文 	  русский 	   عربي 	   Español 	    中文 	   Português 	   Русский 	  Español 	  Ελληνικά


"tests": [ "assert.deepEqual(chunk(['a', 'b', 'c', 'd'], 2), [['a', 'b'], ['c', 'd']], 'should return chunked arrays');", "assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]], 'should return chunked arrays');", <del> "assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]], 'should return cthe last chunk as remaining elements');" </del> <ins> "assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]], 'should return the last chunk as remaining elements');" </ins> ] }, {


## --sentence-- <del> `_ to _ you all. I'm David, the project _ from FCC _.` </del> <ins> `_ to _ you all. I'm David, the project _ from FCC _` </ins> ## --blanks--


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


"// Only change code above this line.", "// We use this function to show you the value of your variable in your output box.", "// You'll learn about functions soon.", <del> "if(typeof(myArray) !== "undefined" && typeof(data) !== "undefined"){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', data = ' + JSON.stringify(z));})(myArray, data);}" </del> <ins> "if(typeof(myArray) !== "undefined" && typeof(myData) !== "undefined"){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', myData = ' + JSON.stringify(z));})(myArray, myData);}" </ins> ], "type": "waypoint", "challengeType": 1


# --description-- <del> Within the arrow function of the event listener, add an `if` to check if `userData?.currentSong` is `falsey`. </del> <ins> Within the arrow function of the event listener, add an `if` to check if `userData?.currentSong` is `null`. </ins> Inside the `if` block, call the `playSong()` function with the `id` of the first song in the `userData?.songs` array. This will ensure the first song in the playlist is played first. # --hints-- <del> You should create an `if` statement with the condition `!userData?.currentSong`. </del> <ins> You should create an `if` statement with the condition `userData?.currentSong === null`. </ins> ```js <del> assert.match(code, /ifs*((s*!userData?.currentSongs*|s*userData?.currentSongs*===s*nulls*|s*userData?.currentSongs*===s*undefineds*))s*{/) </del> <ins> assert.match(code, /ifs*(s*userData?.currentSongs*===s*nulls*)s*{/); </ins> ``` You should call the `playSong` function with `userData?.songs[0].id` inside your `if` block. ```js <del> assert.match(code, /ifs*((s*!userData?.currentSongs*|s*userData?.currentSongs*===s*nulls*|s*userData?.currentSongs*===s*undefineds*))s*{s*playSong(s*userData?.songss*[s*0s*]s*.ids*)s*;?s*}/) </del> <ins> assert.match(code, /ifs*(s*userData?.currentSongs*===s*nulls*)s*{s*playSong(s*userData?.songss*[s*0s*]s*.ids*)s*;?s*}/); </ins> ``` # --seed--


> <Caret /> <h4> <del> Super Block One Certification (300 hours) </del> <ins> Super Block One Certification (300 hours) </ins> </h4> </button> <ul>


You also need to get the value of your `#budget` input. You already queried this at the top of your code, and set it to the `budgetNumberInput` variable. However, you used `getElementById`, which returns an `Element`, not a `NodeList`. <del> A `NodeList` is an array-like, which means you can iterate through it and it shares some common methods with an array. For your `getCaloriesFromInputs` function, an array will work for the argument just as well as a `NodeList` does. </del> <ins> A `NodeList` is an array-like object, which means you can iterate through it and it shares some common methods with an array. For your `getCaloriesFromInputs` function, an array will work for the argument just as well as a `NodeList` does. </ins> Declare a `budgetCalories` variable and set it to the result of calling `getCaloriesFromInputs` – pass an array containing your `budgetNumberInput` as the argument.


padding-top: 15px; } <del> .honesty-policy .agreed { display: flex; justify-content: center; align-items: center; background-color: var(--quaternary-color); color: #fff; } div .agreed p { color: white; } .honesty-policy .agreed p { </del> <ins> .honesty-policy .disabled-agreed p { </ins> margin-top: 0; margin-bottom: 0; }


Editor.displayName = 'Editor'; Editor.propTypes = propTypes; <ins> // NOTE: withRef gets replaced by forwardRef in react-redux 6, // https://github.com/reduxjs/react-redux/releases/tag/v6.0.0 </ins> export default connect( mapStateToProps, <del> mapDispatchToProps </del> <ins> mapDispatchToProps, null, { withRef: true } </ins> )(Editor);


}; ``` <del> When the `#search-input` element contains the value `94` and the `#search-button` element is clicked, the `#types` element should contain two inner elements with the text values `GHOST` and `POISON`, respectively. Make sure the `#type` element content is cleared between searches. </del> <ins> When the `#search-input` element contains the value `94` and the `#search-button` element is clicked, the `#types` element should contain two inner elements with the text values `GHOST` and `POISON`, respectively. Make sure the `#types` element content is cleared between searches. </ins> ```js async () => {


challengeFile && ( <Editor containerRef={this.containerRef} <ins> ref={this.editorRef} </ins> {...challengeFile} fileKey={challengeFile.key} />


on: workflow_dispatch: schedule: <del> # runs every weekday at 12:00 noon UTC - cron: '0 12 * * 1-5' </del> <ins> # runs Monday and Wednesday at 12:15 PM UTC - cron: '15 12 * * 1,3' </ins> env: GITHUB_TOKEN: ${{ secrets.CROWDIN_CAMPERBOT_PAT }}


export type Test = { pass?: boolean; err?: string; <ins> message?: string; </ins> } & (ChallengeTest | CertTest); export type ChallengeTest = {


}; ``` <del> When the `#search-input` element contains the value `Pikachu` and the `#search-button` element is clicked, the `#types` element should contain a single inner element with the value `ELECTRIC`. Make sure the `#type` element content is cleared between searches. </del> <ins> When the `#search-input` element contains the value `Pikachu` and the `#search-button` element is clicked, the `#types` element should contain a single inner element with the value `ELECTRIC`. Make sure the `#types` element content is cleared between searches. </ins> ```js async () => {


.tool-panel-group-mobile button, .tool-panel-group-mobile a { <del> font-size: 16px; </del> <ins> font-size: 0.8rem; </ins> } .tool-panel-group-mobile {


Inside the callback function, create a new `const` variable called `collisionDetectionRules` and assign it an empty array. <del> Inside that array, add a conditional statement that checks if the player's `y` position plus the player's height is less than or equal to the platform's `y` position. </del> <ins> Inside that array, add a boolean expression that checks if the player's `y` position plus the player's height is less than or equal to the platform's `y` position. </ins> # --hints--


/* eslint-disable @typescript-eslint/no-unsafe-member-access */ <del> import { setupServer, superRequest } from '../../jest.utils'; </del> <ins> import { setupServer, superRequest, createSuperRequest } from '../../jest.utils'; </ins> import { AUTH0_DOMAIN } from '../utils/env'; <ins> const mockedFetch = jest.fn(); jest.spyOn(globalThis, 'fetch').mockImplementation(mockedFetch); const newUserEmail = 'a.n.random@user.com'; const mockAuth0NotOk = () => ({ ok: false }); const mockAuth0InvalidEmail = () => ({ ok: true, json: () => ({ email: 'invalid-email' }) }); const mockAuth0ValidEmail = () => ({ ok: true, json: () => ({ email: newUserEmail }) }); </ins> jest.mock('../utils/env', () => { // eslint-disable-next-line @typescript-eslint/no-unsafe-return return {


export const handleRequest = (makeRequest: () => Promise<Response>) => () => { makeRequest() <del> .then(res => res.json() as Promise<{ stdout: string; stderr: string }>) .then(data => alert(JSON.stringify(data))) </del> <ins> .then( res => res.json() as Promise<{ stdout?: string; stderr?: string; message?: string; }> ) .then(data => { if (data.message) { alert(data.message); } else { alert(JSON.stringify(data)); } }) </ins> .catch(err => console.error(err)); };


], "tests": [ [ <del> "Algorithms expressed exponentially like O(N^2) can work well in certain situations, so you shouldn't avoid them completely.", </del> <ins> "Algorithms expressed exponentially like O(C^N), where C is a constant can work well in certain situations, so you shouldn't avoid them completely.", </ins> false, "While they can work in certain small scale situations, they aren't good practice because they will not work larger scale." ],


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


}; this.containerRef = React.createRef(); <ins> this.editorRef = React.createRef(); </ins> } onResize() { this.setState({ resizing: true });


<del> import React, { Fragment } from 'react'; </del> <ins> import React, { Fragment, Component } from 'react'; import Prism from 'prismjs'; </ins> import PropTypes from 'prop-types'; import './challenge-description.css';


} const onChange = (editorValue: string) => { <del> const { updateFile, fileKey } = props; </del> <ins> const { updateFile, fileKey, isResetting } = props; if (isResetting) return; </ins> // TODO: now that we have getCurrentEditableRegion, should the overlays // follow that directly? We could subscribe to changes to that and redraw if // those imply that the positions have changed (i.e. if the content height


function createSuperBlockTitle(str) { return codingPrepRE.test(str) ? `${str} (Thousands of hours of challenges)` <del> : `${str} Certification (300 hours)`; </del> <ins> : `${str} Certification (300xa0hours)`; </ins> } export class SuperBlock extends Component {


# --description--  **Objective:** Build an app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/KaNGNR.   **Objective:** Build an app that is functionally similar to this: https://treemap-diagram.freecodecamp.rocks.  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.


"assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), 'button', 'message: MagicEightBall's third child should be a button element.');", "assert(Enzyme.mount(React.createElement(MagicEightBall)).state('randomIndex') === '' && Enzyme.mount(React.createElement(MagicEightBall)).state('userInput') === '', 'message: MagicEightBall's state should be initialized with a property of userInput and a property of randomIndex both set to a value of an empty string.');", "assert(Enzyme.mount(React.createElement(MagicEightBall)).find('p').length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find('p').text() === '', 'message: When MagicEightBall is first mounted to the DOM, it should return an empty p element.');",  "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find('input').simulate('change', { target: { value: 'test?' }}); comp.find('button').simulate('click'); }; const result = () => comp.find('p').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, 'message: When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array.'); "   "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find('input').simulate('change', { target: { value: 'test?' }}); comp.find('button').simulate('click'); }; const result = () => comp.find('p').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, 'message: When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array.');}"  ], "solutions": [ "nconst inputStyle = {n  width: 235,n  margin: 5n}nnclass MagicEightBall extends React.Component {n  constructor(props) {n    super(props);n    this.state = {n      userInput: '',n      randomIndex: ''n    }n    this.ask = this.ask.bind(this);n    this.handleChange = this.handleChange.bind(this);n  }n  ask() {n    if (this.state.userInput) {n      this.setState({n        randomIndex: Math.floor(Math.random() * 20),n        userInput: ''n      });n    }n  }n  handleChange(event) {n    this.setState({n      userInput: event.target.valuen    });n  }n  render() {n    const possibleAnswers = [n      "It is certain", "It is decidedly so", "Without a doubt",n      "Yes, definitely", "You may rely on it", "As I see it, yes",n      "Outlook good", "Yes", "Signs point to yes", "Reply hazy try again",n      "Ask again later", "Better not tell you now", "Cannot predict now",n      "Concentrate and ask again", "Don't count on it", "My reply is no",n      "My sources say no", "Outlook not so good","Very doubtful", "Most likely"n    ];n    const answer = possibleAnswers[this.state.randomIndex];n    return (n
n        <inputn          type="text"n          value={this.state.userInput}n          onChange={this.handleChange}n          style={inputStyle} />
n        <button onClick={this.ask}>Ask the Magic Eight Ball!</button>
n
Answer:
n
n          {answer}n
n
n    );n  }n};"


// Change code above this line } } <del> const newBookList = add(bookList, 'A Brief History of Time'); const newerBookList = remove(bookList, 'On The Electrodynamics of Moving Bodies'); const newestBookList = remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies'); console.log(bookList); </del> ``` # --solutions--


<ins> --- title: Gatsby.js --- ## Gatsby.js [Gatsby](https://www.gatsbyjs.org) is a static site generator for [React](https://guide.freecodecamp.org/react), powered by [GraphQL](https://graphql.org/). Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast. The Gatsby environment provides several "starters" to help configure static sites quickly. Starters can be found here: [Starter Library](https://www.gatsbyjs.org/starters/). ### How Gatsby works Gatsby builds sites with the data provided by the developer, regardless of the source. #### Data sources Gatsby accepts the data behind the site in various formats, such as: 1. CMSs: Wordpress, Contentful, Drupal, etc. 2. Markdown: Documentation, posts, etc. 3. Data: APIs, Databases, JSON, CSV, etc. #### Build Gatsby's build is powered by GraphQL and rendered through HTML, CSS, and React. Since Gatsby is built on React you straight away get all the things we love about React, like composability, one-way binding, reusability, great environment and allows you to query your data however you want! #### Deploy Gatsby deploys the site on a static web host such as Amazon S3, Netlify, GitHub Pages, Surge.sh and many more. ### Installation and using the Gatsby CLI * Node: `npm install --global gatsby-cli` * Get started with the official Gatsby starter: `gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default` * After that change to the newly created directory `cd gatsby-site` * `gatsby develop` starts a hot-reloading development server at `localhost:8000`. The site will reload when changes in `src/pages` will be saved. * To generate the static HTML pages use `gatsby build` * `gatsby serve` will start a local server that will present your built site. ### Querying data You are accessing all data by writing GraphQL queries. GraphQL allows you to pull only the data you need into your components, unlike when fetching data from REST API. A detailed walkthrough is available at https://www.gatsbyjs.org/tutorial/part-four/?no-cache=1#how-gatsbys-data-layer-uses-graphql-to-pull-data-into-components. #### More Information: For tutorials and more information check out the Gatsby.js official site: [Gatsby.js official site](https://www.gatsbyjs.org/tutorial/) </ins>


# --description--  **Objective:** Build an app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/GrZVaM.   **Objective:** Build an app that is functionally similar to this: https://bar-chart.freecodecamp.rocks.  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.


- text: functionWithArgs(7,9) should output 16 testString: if(typeof functionWithArgs === "function") { capture(); functionWithArgs(7,9); uncapture(); } assert(logOutput == 16); - text: Call functionWithArgs with two numbers after you define it.  testString: assert(/^s*functionWithArgss*(s*d+s*,s*d+s*)s*;/m.test(code));   testString: assert(/^s*functionWithArgss*(s*d+s*,s*d+s*)s*/m.test(code));  ```


"All related radio buttons should have the same name attribute.", "Here's an example of a radio button:", "<label><input type="radio" name="indoor-outdoor"> Indoor</label>",  "Add to your form a pair of radio buttons. Each radio button should be nested within its own label element. They should share a common name attribute. One should have the option of indoor and the other should have the option of outdoor."   "Add a pair of radio buttons to your form. One should have the option of indoor and the other should have the option of outdoor."  ], "tests": [ "assert($('input[type="radio"]').length > 1, 'Your page should have two radio button elements.')",


return `
 --fcc-editable-region--  <button class="playlist-song-info" onclick="playSong(${song.id})">   <button class="playlist-song-info">  ${song.title} ${song.artist} ${song.duration}


"title": "Add ID Attributes to Bootstrap Elements", "description": [ "Recall that in addition to class attributes, you can give each of your elements an id attribute.",  "Each id should be unique to a specific element.",   "Each id must be unique to a specific element and used only once per page.",  "Let's give a unique id to each of our div elements of class well.", "Remember that you can give an element an id like this: <div class="well" id="center-well">", "Give the well on the left the id of left-well. Give the well on the right the id of right-well."


newTest.stack = stack; } <del> newTest.message = newTest.message.replace(/<p>/, `<p>${i + 1}. `); yield put(updateConsole(newTest.message)); </del> <ins> const withIndex = newTest.message.replace(/<p>/, `<p>${i + 1}. `); yield put(updateConsole(withIndex)); </ins> } finally { testResults.push(newTest); }


return ( <Fragment> <Helmet> <del> <title>Report a users profile | freeCodeCamp.org</title> </del> <ins> <title>Report a users portfolio | freeCodeCamp.org</title> </ins> </Helmet> <Spacer size={2} /> <Row className='text-center'> <Col sm={8} smOffset={2} xs={12}> <h2> Do you want to report {username} <del> 's profile for abuse? </del> <ins> 's portfolio for abuse? </ins> </h2> </Col> </Row>


return isSessionUser ? ( <Fragment> <FullWidthRow>
You have not made your profile public.

 You have not made your portfolio public.
  </FullWidthRow> <FullWidthRow>
  You need to change your privacy setting in order for your profile to be seen by others. This is a preview of how your profile will look   You need to change your privacy setting in order for your portfolio to be seen by others. This is a preview of how your portfolio will look  when made public.
 </FullWidthRow>


let alertMessage; window.alert = (message) => alertMessage = message; // Override alert and store message <del> const randomValidPokeId = Math.floor(Math.random() * 1025) + 1; </del> <ins> const randomValidPokeId = String(Math.floor(Math.random() * 1025) + 1); </ins> searchInput.value = randomValidPokeId; searchInput.dispatchEvent(new Event('change')); searchButton.click(); <del> const res = await fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/' +  randomValidPokeId.toString()); // Fetch from proxy to simulate network delay </del> <ins> const res = await fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/' +  randomValidPokeId); // Fetch from proxy to simulate network delay </ins> if (res.ok) { <del> await new Promise(resolve => setTimeout(resolve, 1000)); // Additional delay to allow UI to update </del> <ins> await new Promise(resolve => setTimeout(resolve, 2000)); // Additional delay to allow UI to update </ins> <del> const data = await res.json(); const typesEl = document.getElementById('types'); const actualTypes = data.types.map(typeSlot => typeSlot.type.name); </del> <ins> const data = await res.json(); const typesEl = document.getElementById('types'); const actualTypes = data.types.map(typeSlot => typeSlot.type.name); </ins> assert.lengthOf(typesEl.children, actualTypes.length); assert.sameMembers(actualTypes, [...typesEl.children].map(el => el.innerText.trim().toLowerCase())); } } catch (err) {


id: bad87fee1348bd9aecf08801 title: Introduction to HTML5 Elements challengeType: 0 <del> videoUrl: 'https://scrimba.com/p/pVMPUv/c4Ep9Am' </del> <ins> videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7' </ins> --- ## Description


"  <li>cheese</li>", "</ul>", "would create a bullet point-style list of "milk" and "cheese".",  "Replace your p elements with an unordered list of three things that cats love."   "Remove the last two p elements and create an unordered list of three things that cats love at the bottom of the page."  ], "tests": [ "assert($("ul").length > 0, 'Create a ul element.')",


"cert-map-estimates": { "certs": "Certificación (300 horas)", "coding-prep": "(Miles de horas de desafíos)" <ins> }, "editor-tabs": { "info": "Información", "code": "Código", "tests": "Pruebas", "preview": "Avance" </ins> } }, "donate": {


"id": "bad87fee1348cd8acef08812", "title": "Create a Block Element Bootstrap Button", "description": [  "Normally, your button elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",   "Normally, your button elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a "new line" below the block.",  "This image illustrates the difference between inline elements and block-level elements:", "", "Note that these buttons still need the btn class.",


], "challengeSeed":[ "//var ourDog = {", <del> "//   "name": "Camper"", "//   "legs": 4", "//   "tails": 1", </del> <ins> "//   "name": "Camper",", "//   "legs": 4,", "//   "tails": 1,", </ins> "//   "friends": ["everything!"]", "//};", "",


export function insertEditableRegions(challengeFiles = []) { if (challengeFiles?.some(file => file.editableRegionBoundaries?.length > 0)) { const editableRegionStrings = fileExtension => { <del> const startComment = fileExtension === 'html' ? '<!--' : '/*'; const endComment = fileExtension === 'html' ? '-->' : '*/'; return `n${startComment} User Editable Region ${endComment}n`; </del> <ins> switch (fileExtension) { case 'html': return 'n<!-- User Editable Region -->n'; case 'css': return 'n/* User Editable Region */n'; case 'py': return 'n# User Editable Regionn'; case 'js': return 'n// User Editable Regionn'; default: return 'nUser Editable Regionn'; } </ins> }; const filesWithEditableRegions = challengeFiles.map(file => {


`bookList` should not change and still equal `["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"]`. ```js <ins> add(bookList, "Test"); </ins> assert( JSON.stringify(bookList) === JSON.stringify([


}; this._editor = null; <ins> this.focusOnEditor = this.focusOnEditor.bind(this); </ins> } editorWillMount = monaco => {


import { createSelector } from 'reselect'; import { executeChallenge, updateFile } from '../redux'; <del> import { userSelector } from '../../../redux'; </del> <ins> import { userSelector, isDonationModalOpenSelector } from '../../../redux'; </ins> import { Loader } from '../../../components/helpers'; const MonacoEditor = React.lazy(() => import('react-monaco-editor')); const propTypes = { <ins> canFocus: PropTypes.bool, </ins> contents: PropTypes.string, dimensions: PropTypes.object, executeChallenge: PropTypes.func.isRequired,


], "challengeSeed":[ "// var ourDog = {", <del> "//   "name": "Camper"", "//   "legs": 4", "//   "tails": 1", </del> <ins> "//   "name": "Camper",", "//   "legs": 4,", "//   "tails": 1,", </ins> "//   "friends": ["everything!"]", "// };", "",


<del> --- title: Gatsby.js --- ## Gatsby.js [Gatsby](https://www.gatsbyjs.org) is a static site generator for [React](https://guide.freecodecamp.org/react), powered by [GraphQL](https://graphql.org/). Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast. The Gatsby environment provides several "starters" to help configure static sites quickly. Starters can be found here: [Starter Library](https://www.gatsbyjs.org/starters/). ### How Gatsby works Gatsby builds sites with the data provided by developer, regardless of the source. #### Data sources Gatsby accepts the data behind the site in various formats, such as: 1. CMSs: Wordpress, Contenful, Drupal, etc. 2. Markdown: Documentation, posts, etc. 3. Data: APIs, Databasses, JSON, CSV, etc. #### Build Gatsby's build is powered by GraphQL and rendered through HTML, CSS, and React. Since Gatsby is built on React you straight away get all the things we love about React, like composability, one-way binding, resuability, great environment and allows you to query your data however you want! #### Deploy Gatsby deploys the site on a static web host such as Amazon S3, Netlify, GitHub Pages, Surge.sh and many more. ### Installation and using the Gatsby CLI * Node: `npm install --global gatsby-cli` * Get started with the official Gatsby starter: `gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default` * After that change to the newly created directory `cd gatsby-site` * `gatsby develop` starts a hot-reloading development server at `localhost:8000`. The site will reload when changes in `src/pages` will be saved. * To generate the static HTML pages use `gatsby build` * `gatsby serve` will start a local server that will present your built site. ### Querying data You are accessing all data by writing GraphQL queries. GraphQL allows you to pull only the data you need into your components, unlike when fetching data from REST API. A detailed walktrough is available at https://www.gatsbyjs.org/tutorial/part-four/?no-cache=1#how-gatsbys-data-layer-uses-graphql-to-pull-data-into-components. #### More Information: For tutorials and more information check out the Gatsby.js official site: [Gatsby.js official site](https://www.gatsbyjs.org/tutorial/) </del>


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


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


id: 587d778d367417b2b2512aaa title: Make Elements Only Visible to a Screen Reader by Using Custom CSS challengeType: 0 <del> videoUrl: 'https://scrimba.com/c/c8azdfM' </del> <ins> videoUrl: 'https://scrimba.com/c/cJ8QGkhJ' </ins> --- ## Description


"Aside from using open source libraries such as jQuery and Bootstrap, and short snippets of code which are clearly attributed to their original author, 100% of the code in my projects was written by me, or <del> along with another camper with whom I was pair programming in real time." </del> <ins> along with another person going through the freeCodeCamp curriculum with whom I was pair programming in real time." </ins> </p> <p key={5}> "I pledge that I did not plagiarize any of my freeCodeCamp.org work. I


], "MDNlinks": [ "Comparison Operators", <del> "String.slice()", </del> <ins> "Array.slice()", </ins> "Array.filter()", "Array.indexOf()", <del> "String.concat()" </del> <ins> "Array.concat()" </ins> ], "type": "bonfire", "challengeType": 5,


The `<header>` tag is a container which is used for navigational links or introductory content. It may typically include heading elements, such as `<h1>`, `<h2>`, but may also include other elements such as a search form, logo, author information etc. <del> <h1> corresponds to the most important heading. As we move to other tags like <h2>, <h3>, etc the degree of importance decreases. </del> <ins> `<h1>` corresponds to the most important heading. As we move to other tags like `<h2>`, `<h3>`, etc the degree of importance decreases. </ins> Although not required, the `<header>` tag is intended to contain the surrounding sections heading. It may also be used more than once in an HTML document. It is important to note that the `<header>` tag does not introduce a new section, but is simply the head of a section. Here's an example using the `<header>` tag:


"
Hello Paragraph
" ], "tests": [  "assert.isTrue((/Kitty(s)+ipsum(s)+dolor/gi).test($("p").text()), 'message: Your p element should contain the first few words of the provided kitty ipsum text.');"   "assert.isTrue((/Kitty(s)+ipsum/gi).test($("p").text()), 'message: Your p element should contain the first few words of the provided kitty ipsum text.');"  ], "challengeType": 0, "nameEs": "Llena espacios con texto de relleno",


const res = await fetch(url + '/api/users', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, <del> body: `username=fcc_test_${Date.now()}`.substingr(0, 29) </del> <ins> body: `username=fcc_test_${Date.now()}`.substring(0, 29) </ins> }); if (res.ok) { const { _id, username } = await res.json();


"In the game of golf each hole has a par meaning the average number of strokes a golfer is expected to make in order to sink the ball in a hole to complete the play. Depending on how far above or below par your strokes are, there is a different nickname.", "Your function will be passed par and strokes arguments. Return the correct string according to this table which lists the strokes in order of priority; top (highest) to bottom (lowest):", "

Strokes	Return

1	"Hole-in-one!"

<= par - 2	"Eagle"

par - 1	"Birdie"

par	"Par"

par + 1	"Bogey"

par + 2	"Double Bogey"

>= par + 3	"Go Home!"

",  "par and strokes will always be numeric and positive."   "par and strokes will always be numeric and positive. We have added an array of all the names for your convenience."  ], "releasedOn": "January 1, 2016", "challengeSeed": [  "var names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];",  "function golfScore(par, strokes) {", "  // Only change code below this line", "  ",


--fcc-editable-region-- function pick(guess) { <del> let numbers = []; </del> <ins> const numbers = []; </ins> } --fcc-editable-region--


- text: Clicking the decrement button should decrement the count by 1. testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const second = () => { mockedComponent.find(''.dec'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === -1, ''Clicking the decrement button should decrement the count by 1.''); }; ' - text: Clicking the reset button should reset the count to 0.  testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const init = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const increment = () => { mockedComponent.find(''.inc'').simulate(''click''); mockedComponent.find(''.inc'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const decrement = () => { mockedComponent.find(''.dec'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const reset = () => { mockedComponent.find(''.reset'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await init(); const secondValue = await increment(); const thirdValue = await decrement(); const fourthValue = await reset(); assert(firstValue === 0 && secondValue === 2 && thirdValue === 1 && fourthValue === 0, ''Clicking the reset button should reset the count to 0.''); }; '   testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const init = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const increment = () => { mockedComponent.find(''.inc'').simulate(''click''); mockedComponent.find(''.inc'').simulate(''click''); mockedComponent.find(''.inc'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const decrement = () => { mockedComponent.find(''.dec'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const reset = () => { mockedComponent.find(''.reset'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await init(); const secondValue = await increment(); const thirdValue = await decrement(); const fourthValue = await reset(); assert(firstValue === 0 && secondValue === 3 && thirdValue === 2 && fourthValue === 0, ''Clicking the reset button should reset the count to 0.''); }; '  ```


return ( <button className={classes} onClick={onClick} type='button'>  {label ?? 'Close'}   {label || 'Close'}  × </button> );


Your `letters.forEach()` callback function should be nested inside the `range(1, 99).forEach(number => {}` callback function. ```js <del> assert.match(code, /ranges*(s*1s*,s*99s*)s*.forEachs*(s*((s*numbers*)|number)s*=>s*{s*[^}]*letters.forEach(s*((s*letters*)|letter)s*=>s*{s*}s*)s*}s*)/) </del> <ins> assert.match(code, /ranges*(s*1s*,s*99s*)s*.forEachs*(s*((s*numbers*)|number)s*=>s*{s*[^}]*letters.forEach(s*((s*letters*)|letter)s*=>s*{s*}s*)s*;?s*}s*)/) </ins> ``` # --seed--


); ``` <ins> Trying to remove an element from an empty tree should return `null`. ```js assert( (function () { var test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree(); } else { return false; } if (typeof test.remove !== 'function') { return false; } return test.remove(100) == null; })() ); ``` </ins> Trying to remove an element that does not exist should return `null`. ```js


} from '../../../redux/selectors'; import { ChallengeFiles, <del> ChallengeTest, </del> Dimensions, FileKey, ResizeProps,


} return { <del> postResult </del> <ins> postResult, oldLog </ins> }; })();


isResetting: boolean, isSignedIn: boolean, { theme }: { theme: Themes }, <del> tests: [{ text: string; testString: string }], </del> <ins> tests: [{ text: string; testString: string; message?: string }], </ins> isChallengeCompleted: boolean ) => ({ attempts,


"He aquí un ejemplo:", "<p>Aquí está un <a href="https://freecodecamp.org"> enlace a freeCodeCamp</a> para que lo sigas.</p>", "
",  "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de ancla "fotos de gatos"."   "Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de ancla "cat photos"."  ] }, "pt-br": {


--- # --description-- <del> The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `<em>` tag. </del> <ins> The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in an `<em>` tag. </ins> To use `em` on its own: <iframe allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="cp_embed_iframe " frameborder="0" height="300" width="100%" name="cp_embed_6" scrolling="no" src="https://codepen.io/TheOdinProjectExamples/embed/wvewqpp?height=300&theme-id=dark&default-tab=html%2Cresult&slug-hash=wvewqpp&user=TheOdinProjectExamples&name=cp_embed_6" style="width: 100%; overflow:hidden; display:block;" title="CodePen Embed" loading="lazy" id="cp_embed_wvewqpp"></iframe>


const keyMap = { NAVIGATION_MODE: 'escape', EXECUTE_CHALLENGE: ['ctrl+enter', 'command+enter'], <ins> FOCUS_EDITOR: 'e', </ins> NAVIGATE_PREV: ['p'], NAVIGATE_NEXT: ['n'] };