assert.match(code, /consts+collisionDetectionRuless*=s*[s*(?:[^]]*s*)*];?/); ``` <del> You should have 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> You should have 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> ```js assert.match(code, /consts+collisionDetectionRuless*=s*[s*player.position.ys++s*player.heights*<=s*platform.position.y,?s*]s*;?/);


} return test; } <del> // tail: 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"]; </del> ```


); ``` <del> `newestBookList` should equal `["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]`. </del> <ins> `remove(add(bookList, "A Brief History of Time"), "On The Electrodynamics of Moving Bodies");` should equal `["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]`. </ins> ```js assert( <del> JSON.stringify(newestBookList) === </del> <ins> JSON.stringify(remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies')) === </ins> JSON.stringify([ 'The Hound of the Baskervilles', 'Philosophiæ Naturalis Principia Mathematica',


], "description": [ "You can add the fa-paper-plane Font Awesome icon by adding <i class="fa fa-paper-plane"></i> within your submit button element.",  "Give your form's text input field a class of form-control. Give your form's submit button the classes btn btn-primary. Also give this button the Font Awesome icon of fa-paper-plane."   "Give your form's text input field a class of form-control. Give your form's submit button the classes btn btn-primary. Also give this button the Font Awesome icon of fa-paper-plane.", "All textual <input>, <textarea>, and <select> elements with the class .form-control have a width of 100%."  ], "challengeSeed": [ "<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">",


} } <del> @media (max-width: 767px) { .certificate-outer-wrapper .donation-section { padding: 20px 20px; } } </del> @media screen and (max-width: 992px) { .certification-namespace header { height: 160px;


- text: All elements from the first array should be added to the second array in their original order. testString: assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4]); - text: The first array should remain the same after the function runs. <del> testString: frankenSplice(testArr1, testArr2); assert.deepEqual(testArr1, [1, 2]); </del> <ins> testString: frankenSplice(testArr1, testArr2, 1); assert.deepEqual(testArr1, [1, 2]); </ins> - text: The second array should remain the same after the function runs. <del> testString: frankenSplice(testArr1, testArr2); assert.deepEqual(testArr2, ["a", "b"]); </del> <ins> testString: frankenSplice(testArr1, testArr2, 1); assert.deepEqual(testArr2, ["a", "b"]); </ins> ```


import DonateModal from '../Donation'; import 'prismjs/themes/prism.css'; <ins> import './prism.css'; import './prism-night.css'; </ins> import 'react-reflex/styles.css'; import './learn.css';


); ``` <del> `newerBookList` should equal `["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"]`. </del> <ins> `remove(bookList, "On The Electrodynamics of Moving Bodies")` should return `["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"]`. </ins> ```js assert( <del> JSON.stringify(newerBookList) === </del> <ins> JSON.stringify(remove(bookList, 'On The Electrodynamics of Moving Bodies')) === </ins> JSON.stringify([ 'The Hound of the Baskervilles', 'Philosophiæ Naturalis Principia Mathematica',


} .certification-namespace .information { <del> margin-top: -20px; </del> height: 380px; text-align: center; background-color: var(--gray-05);


You should use a `for...of` loop to iterate through the `arr` array. ```js <del> assert.match(code, /consts+detectFullHouses*=s*((s*arrs*)|arr)s*=>s*{.*s*fors*(s*consts+nums+ofs+arrs*)s*{s*.*}/s); </del> <ins> assert.match(code, /consts+detectFullHouses*=s*((s*arrs*)|arr)s*=>s*{.*s*fors*(s*(const|let|var)s+nums+ofs+arrs*)s*{s*.*}/s); </ins> ``` # --seed--


); ``` <del> `newBookList` should equal `["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]`. </del> <ins> `add(bookList, "A Brief History of Time")` should return `["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]`. </ins> ```js assert( <del> JSON.stringify(newBookList) === </del> <ins> JSON.stringify(add(bookList, "A Brief History of Time")) === </ins> JSON.stringify([ 'The Hound of the Baskervilles', 'On The Electrodynamics of Moving Bodies',


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


req.flash('info', { msg: dedent` Once you have completed all of our challenges, you should  join our Half Way Club and start getting   join our Half Way Club and start getting  ready for our nonprofit projects. `.split('n').join(' ') });


Your `h2` tag should have a `width` of 80vw. ```js <del> assert(code.match(/h2s*?{s*?width:s*?80vw;s*?}/g)); </del> <ins> assert( __helpers .removeCssComments(code) .match(/h2s*?{s*?width:s*?80vw;s*?}/g) ); </ins> ``` Your `p` tag should have a `width` of 75vmin. ```js <del> assert(code.match(/ps*?{s*?width:s*?75vmin;s*?}/g)); </del> <ins> assert( __helpers .removeCssComments(code) .match(/ps*?{s*?width:s*?75vmin;s*?}/g) ); </ins> ``` # --seed--


e.preventDefault(); if (executeChallenge) executeChallenge(); }, <ins> FOCUS_EDITOR: e => { e.preventDefault(); if (editorRef && editorRef.current) { editorRef.current.getWrappedInstance().focusOnEditor(); } }, </ins> NAVIGATION_MODE: () => setEditorFocusability(false), NAVIGATE_PREV: () => { if (!canFocusEditor) navigate(prevChallengePath);


id: bad87fee1348bd9aede08817 title: Nest an Anchor Element within a Paragraph challengeType: 0 <del> videoUrl: 'https://scrimba.com/p/pVMPUv/cb6k8Cb' </del> forumTopicId: 18244 dashedName: nest-an-anchor-element-within-a-paragraph ---


The `console.log(array[0])` prints `50`, and `data` has the value `60`. <del> **Note:** There shouldn't be any spaces between the array name and the square brackets, like `array [0]`. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code. </del> # --instructions-- Create a variable called `myData` and set it to equal the first value of `myArray` using bracket notation.


```yml tests: <del> - text: <code>resolve</code> should be executed when the <code>if</code> condition is <code>true</code>. </del> <ins> - text: <code>resolve</code> should be called with the expected string when the <code>if</code> condition is <code>true</code>. </ins> testString: assert(removeJSComments(code).match(/ifs*(s*responseFromServers*)s*{s*resolves*(s*('|"|`)We got the data1s*)(s*|s*;s*)}/g)); <del> - text: <code>reject</code> should be executed when the <code>if</code> condition is <code>false</code>. </del> <ins> - text: <code>reject</code> should be called with the expected string when the <code>if</code> condition is <code>false</code>. </ins> testString: assert(removeJSComments(code).match(/}s*elses*{s*rejects*(s*('|"|`)Data not received1s*)(s*|s*;s*)}/g)); ```


Moving on to the final `fieldset`. What if you wanted to allow a user to upload a profile picture? <del> Well, the `input` type `file` allows just that. Add a `label` with the text `Upload a profile picture: `, and add an `input` accepting a file upload. </del> <ins> Well, the `input` type `file` allows just that. Add a `label` with the text `Upload a profile picture: `, and nest an `input` accepting a file upload. </ins> # --hints--


<ins> --- title: Static Site Generators --- ## Static web page Static web pages are often HTML documents stored as files in the file system and made available by the web server over HTTP (nevertheless URLs ending with ".html" are not always static). However, loose interpretations of the term could include web pages stored in a database, and could even include pages formatted using a template and served through an application server, as long as the page served is unchanging and presented essentially as stored. Static web pages are suitable for the contents that never or rarely need to be updated, though modern static site generators are changing. Maintaining large numbers of static pages as files can be impractical without automated tools, such as Static site generators described in the Web template system. Another way to manage static pages include Online compiled source code playgrounds, e.g. GatsbyJS and GitHub may be utilized for migrating a WordPress site into static web pages. Any personalization or interactivity has to run client-side, which is restricting. ## Static Site Generators A Static Site Generator is a program, that generates an HTML website as an output. This HTML website is then served through your web server, just like the olden days. This is usually achieved using template languages and code that separates out the layout of the website from its content and styles. ## How static sites work The proposition of a static site is to shift the heavy load from the moment visitors request the content to the moment content actually changes. Going back to our news kiosk metaphor, think of a scenario where it's the news agencies who call the kiosk whenever something newsworthy happens. The kiosk operators and scribbles will then compile, format and style the stories and produce a finished newspaper right away, even though nobody ordered one yet. They will print out a huge number of copies (infinite, actually) and pile them up by the storefront. When customers arrive, there's no need to wait for an operator to become available, place the phone call, pass the results to the scribble and wait for the final product. The newspaper is already there, waiting in a pile, so the customer can be served instantly. And that is how static site generators work. They take the content, typically stored in flat files rather than databases, apply it against layouts or templates and generate a structure of purely static HTML files that are ready to be delivered to the users. ## Advantages of static 1) Speed Perhaps the most immediately noticeable characteristic of a static site is how fast it is. As mentioned above, there are no database queries to run, no templating and no processing whatsoever on every request. Web servers are really good at delivering static pages quickly, and the entire site consists of static HTML files that are sitting on the server, waiting to be served, so a request is served back to the user pretty much instantly. 2) Version control for content You can't even imagine working on a project without version control anymore, can you? Having a repository where people can collaboratively work on files, control exactly who does what and rollback changes when something goes wrong is essential in any software project, no matter how small. But what about the content? That's the keystone of any site and yet it usually sits in a database somewhere else, completely separated from the codebase and its version control system. In a static site, the content is typically stored in flat files and treated as any other component of the codebase. In a blog, for example, that means being able to have the actual posts stored in a GitHub repository and allowing your readers to file an issue when something is wrong or to add a correction with a pull request — how cool is that? 3) Security Platforms like WordPress are used by millions of people around the world, meaning they're common targets for hackers and malicious attacks — no way around it. Wherever there's user input/authentication or multiple processes running code on every request, there's a potential security hole to exploit. To be on top of the situation, site administrators need to keep patching their systems with security updates, constantly playing cat and mouse with attackers, a routine that may be overlooked by less experienced users. Static sites keep it simple since there's not much to mess up when there's only a web server serving plain HTML pages. 4) Less hassle with the server Installing and maintaining the infrastructure required to run a dynamic site can be quite challenging, especially when multiple servers are involved or when something needs to be migrated. There's packages, libraries, modules and frameworks with different versions and dependencies, there are different web servers and database engines in different operating systems. Sure, a static site generator is a software package with its dependencies as well, but that's only relevant at build time when the site is generated. Ultimately, the end result is a collection of HTML files that can be served anywhere, scaled and migrated as needed regardless of the server-side technologies. As for the site generation process, that can be done from an environment that you control locally and not necessarily on the web server that will run the site — heck, you can build an entire site on your laptop and push the result to the web when it's done. 5) Traffic surges Unexpected traffic peaks on a website can be a problem, especially when it relies intensively on database calls or heavy processing. Introducing caching layers such as Varnish or Memcached surely helps, but that ends up introducing more possible points of failure in the system. A static site is generally better prepared for those situations, as serving static HTML pages consumes a very small amount of server resources. ## Disadvantages of static (and potential solutions) 1) No real-time content With a static site, you lose the ability to have real-time data, such as indication about which stories have been trending for the past hour, or content that dynamically changes for each visitor, like a "recommended articles for you" kind of thing. Static is static and will be the same for everyone. There's not really a solution for this, I'm afraid. It's the ultimate price to pay for using a static site, so it's important that you ask yourself the question "how real-time does my site need to be?" — if its concept is based around delivering real-time information then perhaps a static site isn't the right choice. A dangerous solution: There's an easy exit for whenever you're faced with the challenge of dynamically updating content on a static site: "I can do it with JavaScript". Doing processing on the client-side and appending the results to the page after it's been served can be the right approach for some cases, but must not be seen as the magic solution that turns your static site into a fully dynamic one. It can prevent some users from seeing the injected content, hurt your SEO and introduce other problems, potentially taking away the ease of mind and sense of control that comes with using a static site. 2) No user input Adding user-generated content to a static site is a bit of a challenge. Take a commenting system for a blog, for example — how do you process user comments and append them to a post using just plain HTML pages? You don't. </ins>


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


expect(redirectUrl.pathname).toBe('/authorize'); }); }); <ins> describe('GET /mobile-login', () => { let superGet: ReturnType<typeof createSuperRequest>; beforeAll(() => { superGet = createSuperRequest({ method: 'GET' }); }); beforeEach(async () => { await fastifyTestInstance.prisma.userRateLimit.deleteMany({}); await fastifyTestInstance.prisma.user.deleteMany({ where: { email: newUserEmail } }); }); it('should be rate-limited', async () => { await Promise.all( [...Array(10).keys()].map(() => superGet('/mobile-login')) ); const res = await superGet('/mobile-login'); expect(res.status).toBe(429); }); it('should return 401 if the authorization header is invalid', async () => { mockedFetch.mockResolvedValueOnce(mockAuth0NotOk()); const res = await superGet('/mobile-login').set( 'Authorization', 'Bearer invalid-token' ); expect(res.body).toStrictEqual({ type: 'danger', message: 'We could not log you in, please try again in a moment.' }); expect(res.status).toBe(401); }); it('should return 400 if the email is not valid', async () => { mockedFetch.mockResolvedValueOnce(mockAuth0InvalidEmail()); const res = await superGet('/mobile-login').set( 'Authorization', 'Bearer valid-token' ); expect(res.body).toStrictEqual({ type: 'danger', message: 'The email is incorrectly formatted' }); expect(res.status).toBe(400); }); it('should set the jwt_access_token cookie if the authorization header is valid', async () => { mockedFetch.mockResolvedValueOnce(mockAuth0ValidEmail()); const res = await superGet('/mobile-login').set( 'Authorization', 'Bearer valid-token' ); expect(res.status).toBe(200); expect(res.get('Set-Cookie')).toEqual( expect.arrayContaining([expect.stringMatching(/jwt_access_token=/)]) ); }); it('should create a user if they do not exist', async () => { mockedFetch.mockResolvedValueOnce(mockAuth0ValidEmail()); const existingUserCount = await fastifyTestInstance.prisma.user.count(); const res = await superGet('/mobile-login').set( 'Authorization', 'Bearer valid-token' ); const newUserCount = await fastifyTestInstance.prisma.user.count(); expect(existingUserCount).toBe(0); expect(newUserCount).toBe(1); expect(res.status).toBe(200); }); it('should redirect to returnTo if already logged in', async () => { mockedFetch.mockResolvedValueOnce(mockAuth0ValidEmail()); const firstRes = await superGet('/mobile-login').set( 'Authorization', 'Bearer valid-token' ); expect(firstRes.status).toBe(200); const res = await superRequest('/mobile-login', { method: 'GET', // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment setCookies: firstRes.get('Set-Cookie') }) .set('Authorization', 'Bearer does-not-matter') .set('Referer', 'https://www.freecodecamp.org/back-home'); expect(res.status).toBe(302); expect(res.headers.location).toBe( 'https://www.freecodecamp.org/back-home' ); }); }); </ins> });


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


assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')); ``` <ins> Your text `Total Liabilities` should not include period `.`. ```js assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText !== 'Total Liabilities.'); ``` </ins> Your `th` element should have the text `Total Liabilities`. ```js


"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": {