}); ``` <ins> The `draw` method should behave correctly when the number of balls to extract is bigger than the number of balls in the hat. ```js ({ test: () => { pyodide.FS.writeFile("/home/pyodide/probability_calculator.py", code); pyodide.FS.writeFile( "/home/pyodide/test_module.py", ` import unittest import probability_calculator from importlib import reload reload(probability_calculator) probability_calculator.random.seed(95) class UnitTests(unittest.TestCase): maxDiff = None def test_hat_draw_2(self): hat = probability_calculator.Hat(yellow=5,red=1,green=3,blue=9,test=1) actual = hat.draw(20) expected = ['yellow', 'yellow', 'yellow', 'yellow', 'yellow', 'red', 'green', 'green', 'green', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'blue', 'test'] self.assertEqual(actual, expected, 'Expected hat draw to return all items from hat contents.') actual = len(hat.contents) expected = 0 self.assertEqual(actual, expected, 'Expected hat draw to leave no items in contents.') ` ); const testCode = ` from unittest import main import test_module from importlib import reload reload(test_module) t = main(module='test_module', exit=False) t.result.wasSuccessful() `; const out = __pyodide.runPython(testCode); assert(out); }, }); ``` </ins> The `experiment` method should return a different probability.


</Col> <Col md={7} sm={12}>
  Issued    {t('certification.issued')}   {format(certDate, 'MMMM d, y')}
 </Col>


Puedes optar por contribuir a cualquier área de tu interés: <del> 1. [Contribuir a esta base de código fuente abierto.](#contribute-to-this-open-source-codebase) </del> <ins> 1. [Contribuir a esta base de código fuente abierto.](#contribuye-a-esta-base-de-código-abierto) </ins> Ayúdanos a crear o editar [artículos de guía](https://www.freecodecamp.org/guide), [desafíos de codificación](https://www.freecodecamp.org/learn) o a corregir errores en la plataforma de aprendizaje.


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


"challengeType": 3, "nameEs": "Crea un juego de Tic Tac Toe", "descriptionEs": [  "Objetivo: Crea una aplicación con CodePen.io que reproduzca efectivamente mediante ingeniería inversa este app: http://codepen.io/FreeCodeCamp/full/adBpvw.",   "Objetivo: Construye una aplicación en CodePen.io cuya funcionalidad sea similar a la de esta: http://codepen.io/FreeCodeCamp/full/adBpvw.",  "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",  "Regla #2: Puedes usar cualquier librería o APIs que necesites.", "Regla #3: Usa ingeniería inversa para reproducir la funcionalidad del proyecto de ejemplo, pero también siéntete en la libertad de personalizarlo.", "Las siguientes son las historias de usuario que debes satisfacer, incluyendo las historias opcionales:", "Historia de usuario: Como usuario, puedo iniciar un juego de Tic Tac Toe con la computadora.", "Historia de usuario opcional: Como usuario, nunca puedo ganar contra la computadora - en el mejor de los casos puedo empatar.", "Historia de usuario opcional: Como usuario, mi juego se reiniciará tan pronto como se termine, de tal forma que pueda jugar de nuevo.", "Historia de usuario opcional: Como usuario, puedo elegir si quiero jugar como X o como O.", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un link a tu CodePen. Si programaste en pareja, debes incluir también el nombre de usuario de Free Code Camp de tu compañero.", "Si quieres retroalimentación inmediata de parte de tus compañeros campistas, pulsa este botón y pega el link de tu proyecto en CodePen.

Pulsa aquí y agrega tu link en el texto del tweet"   "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", "Historia de usuario: Puedo jugar un juego de Tic Tac Toe contra el computador.", "Historia de usuario: Mi juego se reiniciará tan pronto como termine para poder jugar de nuevo.", "Historia de usuario: Puedo elegir si quiero jugar como X o como O.", "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un enlace a tu CodePen.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."  ], "isRequired": true },


], "nameEs": "Crea un reloj pomodoro", "descriptionEs": [  "Objetivo: Crea una aplicación con CodePen.io que reproduzca efectivamente mediante ingeniería inversa este app: http://codepen.io/FreeCodeCamp/full/VemPZX.",   "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a la de esta: http://codepen.io/FreeCodeCamp/full/VemPZX.",  "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",  "Regla #2: Puedes usar cualquier librería o APIs que necesites.", "Regla #3: Usa ingeniería inversa para reproducir la funcionalidad del proyecto de ejemplo, pero también siéntete en la libertad de personalizarlo.", "Las siguientes son las historias de usuario que debes satisfacer, incluyendo las historias opcionales:", "Historia de usuario: Como usuario, puedo iniciar un pomodoro de 25 minutos, y el cronómetro terminará cuando pasen 25 minutos.",   "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", "Historia de usuario: Puedo iniciar un pomodoro de 25 minutos, y el cronómetro terminará cuando pasen 25 minutos.",  "Historia de usuario: Como usuario, puedo reiniciar el reloj para comenzar mi siguiente pomodoro.",  "Historia de usuario opcional: Como usuario, puedo personalizar la longitud de cada pomodoro.", "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un link a tu CodePen. Si programaste en pareja, debes incluir también el nombre de usuario de Free Code Camp de tu compañero.", "Si quieres retroalimentación inmediata de parte de tus compañeros campistas, pulsa este botón y pega el link de tu proyecto en CodePen.

Pulsa aquí y agrega tu link en el texto del tweet"   "Historia de usuario: Como usuario, puedo personalizar la longitud de cada pomodoro.", "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un enlace a tu CodePen.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."  ], "isRequired": true, "challengeType": 3


"&#60h2 class="red-text text-center"&#62your text&#60/h2&#62" ], "tests": [  "assert($("h2").hasClass("text-center"), 'Your h2 element should be centered by applying the class text-center')"   "assert($("h2").hasClass("text-center"), 'Your h2 element should be centered by applying the class text-center')", "assert($("h2").hasClass("red-text"), 'Your h2 element should still have the class red-text')"  ], "challengeSeed": [ "<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">",


The Garfield Files: Lasagna as Training Fuel?

The Garfield Files: Lasagna as Training Fuel?

The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...


# --description-- <del> Inside the template literal, create a `div` element with the `id` set to the `index` from the `.forEach()` array method. Remember to use template interpolation to do this. </del> <ins> Inside the template literal, create a `div` element with the `id` set to the `index` from the `.forEach()` array method. Remember to use string interpolation to do this. </ins> Also, add a `class` of `"user-card"` to the `div`.


The content of this repository bound by the following licenses: - The computer software is licensed under the [BSD-3-Clause](./LICENSE.md). <ins> - The [curricular content](https://www.npmjs.com/package/@freecodecamp/curriculum) in the [`/seed`](/seed) and subdirectories are licensed under the [CC-BY-SA-4.0](https://github.com/freeCodeCamp/curriculum/blob/master/LICENSE.md). </ins>


"video": "114591799", "challengeNumber": 13, "steps": [  "Now that we've built a foundation in jQuery, let's go back to Dash and do it's last challenge.",   "Now that we've built a foundation in jQuery, let's go back to Dash and do its last challenge.",  "If you aren't familiar with Mad Libs, they basically involve inserting random nouns, adjectives and verbs in to stories. The stories that result are often hilarious.", "Go to https://dash.generalassemb.ly/projects/mad-libs-1 and complete the fifth project." ]


 --- id: 5a9d7295424fe3d0e10cad14 title: Inherit CSS Variables challengeType: 0 videoUrl: 'https://scrimba.com/c/cyLZZhZ' --- ## Description
 When you create a variable, it is available for you to use inside the selector in which you create it. It also is available in any of that selector's descendants. This happens because CSS variables are inherited, just like ordinary properties. To make use of inheritance, CSS variables are often defined in the <dfn>:root</dfn> element. :root is a <dfn>pseudo-class</dfn> selector that matches the root element of the document, usually the html element. By creating your variables in :root, they will be available globally and can be accessed from any other selector in the style sheet.
 ## Instructions
 Define a variable named --penguin-belly in the :root selector and give it the value of pink. You can then see that the variable is inherited and that all the child elements which use it get pink backgrounds.
 ## Tests
 ```yml tests: - text: Declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>. testString: assert(code.match(/:roots*?{[sS]*--penguin-bellys*?:s*?pinks*?;[sS]*}/gi), 'Declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.'); ```
 ## Challenge Seed

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

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


} href={ dropdownFooter <del> ? `https://freecodecamp.org/news/search/?query=${encodeURIComponent( </del> <ins> ? `https://www.freecodecamp.org/news/search/?query=${encodeURIComponent( </ins> hit.query )}` : hit.url


"Vamos a filtrar el gato cuya llave "id" tiene un valor de 1.", "Aquí está el código para hacer esto:", "
json = json.filter(function(val) {
  return (val.id !== 1);
});
"  ], "namePt": "Pré-filtro JSON", "descriptionPt": [ "Se não queremos apresentar cada foto de gato que obtemos da API JSON de fotos de gatos do Free Code Camp, podemos realizar um pré-filtro o JSON  antes de iterar através dele.", "Vamos filtrar o gato cuja a chave "id" tenha o valor 1.", "Aqui está o código para fazer isso:", "
json = json.filter(function(val) {
  return (val.id !== 1);
});
"  ] }, {


--- <del> The conference room </del> <ins> Desk </ins> --- <del> The elevator </del> <ins> Elevator </ins> ### --feedback--


 Sometimes you won't (or don't need to) know the exact characters in your patterns. Thinking of all words that match, say, a misspelling would take a long time. Luckily, you can save time using the wildcard character: . The wildcard character . will match any one character. The wildcard is also called dot and period. You can use the wildcard character just like any other character in the regex. For example, if you wanted to match "hug", "huh", "hut", and "hum", you can use the regex /hu./ to match all four words.
let humStr = "I'll hum a song";
let hugStr = "Bear hug";
let huRegex = /hu./;
humStr.match(huRegex); // Returns ["hum"]
hugStr.match(huRegex); // Returns ["hug"]

let humStr = "I'll hum a song";
let hugStr = "Bear hug";
let huRegex = /hu./;
humStr.test(huRegex); // Returns true
hugStr.test(huRegex); // Returns true

 ## Instructions


 --- id: 561add10cb82ac38a17213bd title: Full Stack Certificate challengeType: 7 isHidden: false isPrivate: true --- ## Description

 ## Instructions

 ## Tests
 ```yml tests: - id: 561add10cb82ac38a17513bc title: Responsive Web Design Certificate - id: 561abd10cb81ac38a17513bc title: JavaScript Algorithms and Data Structures Certificate - id: 561acd10cb82ac38a17513bc title: Front End Libraries Certificate - id: 5a553ca864b52e1d8bceea14 title: Data Visualization Certificate - id: 561add10cb82ac38a17523bc title: API's and Microservices Certificate - id: 561add10cb82ac38a17213bc title: Legacy Information Security and Quality Assurance Certificate ```
 ## Challenge Seed

 ## Solution
 ```js // solution required ```


Now navigate to your browser and open http://localhost:3001 If the app loads, congratulations - you're all set. Otherwise, let us know by opening a GitHub issue and with your error. <ins> ## Linting Setup You should have [ESLint running in your editor](http://eslint.org/docs/user-guide/integrations.html), and it will highlight anything doesn't conform to [Free Code Camp's JavaScript Style Guide](https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Free-Code-Camp-JavaScript-Style-Guide) (you can find a summary of those rules [here](https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/.eslintrc). Please do not ignore any linting errors, as they are meant to **help** you and to ensure a clean and simple code base. Make sure none of your JavaScript is longer than 80 characters per line.  The reason we enforce this is because one of our dependent NPM modules, [jsonlint](https://github.com/zaach/jsonlint), does not fully support wildcard paths in Windows. </ins> ## Found a bug? Do not file an issue until you have followed these steps:


## Instructions
  Use multiple conditional operators in the checkSign function to check if a number is positive, negative or zero. The function should return "positive", "negative" or "zero".   In the checkSign function, use multiple conditional operators - following the recommended format used in findGreaterOrEqual - to check if a number is positive, negative or zero. The function should return "positive", "negative" or "zero".
 ## Tests


<ins> { "name": "Full Stack Certificate", "dashedName": "full-stack-certificate", "order": 5, "time": "", "template": "", "required": [], "superBlock": "certificates", "superOrder": 12, "challengeOrder": [ [ "561add10cb82ac38a17213bd", "Full Stack Certificate" ] ], "isPrivate": true, "fileName": "12-certificates/full-stack-certificate.json" } </ins>


"assert(typeof(myBike.addUnit) === 'undefined', 'message: myBike.addUnit should remain undefined.');" ], "challengeSeed":[  "//Let's create an object with a two functions. One attached as a property and one not.",   "//Let's create an object with two functions. One attached as a property and one not.",  "var Car = function() {", "  this.gear = 1;", "  function addStyle(styleMe){",


If the `bio` text is greater than `50` characters, you should extract the first 50 characters with `slice()` and replace the rest with `...`. Don't forget that indexes are zero-based. ```js <del> assert.match(code, /<ps*class=("|')bio1>${s*bio.lengths*>s*50s*?s*bio.slice(s*0,s*49s*)s*+s*("|')...2s*:/) </del> <ins> assert.match(code, /<ps*class=("|')bio1>${s*bio.lengths*>s*50s*?s*bio.slice(s*0,s*50s*)s*+s*("|')...2s*:/) </ins> ``` If the `bio` text is less than 50 characters, use the `bio` text directly. ```js <del> assert.match(code, /<ps*class=("|')bio1>${s*bio.lengths*>s*50s*?s*bio.slice(s*0,s*49s*)s*+s*("|')...2s*:s*bios*}</p>/) </del> <ins> assert.match(code, /<ps*class=("|')bio1>${s*bio.lengths*>s*50s*?s*bio.slice(s*0,s*50s*)s*+s*("|')...2s*:s*bios*}</p>/) </ins> ```


"description": [ "So we've proven that id declarations override class declarations, regardless of where they are declared in your style element CSS.", "There are other ways that you can override CSS. Do you remember inline styles?",  "Use an in-line style to try to make our h1 element white. Remember, in line styles look like this:",   "Use an inline style to try to make our h1 element white. Remember, in line styles look like this:",  "<h1 style="color: green">", "Leave the blue-text and pink-text classes on your h1 element." ],


smOffset={ 1 } xs={ 12 } > <del> <p </del> <ins> <div </ins> className={ `${ns}-description` } dangerouslySetInnerHTML={{ __html: info }} />


: '/' + clientLocale; module.exports = { <ins> flags: { DEV_SSR: false }, </ins> siteMetadata: { title: 'freeCodeCamp', siteUrl: homeLocation


"id": "bg9997c9c69feddfaeb9bdef", "title": "Manipulate Arrays With unshift()", "description": [  "Now that we've learned how to shiftthings from the start of the array, we need to learn how to unshiftstuff back to the start.", "Let's take the code we had last time and unshiftthis value to the start: "Paul"."   "Now that we've learned how to shift things from the start of the array, we need to learn how to unshift stuff back to the start.", "Let's take the code we had last time and unshift this value to the start: "Paul"."  ], "tests": [ "assert((function(d){if(typeof(d[0]) === "string" && d[0].toLowerCase() == 'paul' && d[1] == 23 && d[2][0] != undefined && d[2][0] == 'dog' && d[2][1] != undefined && d[2][1] == 3){return true;}else{return false;}})(myArray), 'message: myArray should now have ["Paul", 23, ["dog", 3]]).');"


testString: assert(confirmEnding("He has to give me a new name", "name") === true); - text: confirmEnding("Open sesame", "same") should return true. testString: assert(confirmEnding("Open sesame", "same") === true);  - text: confirmEnding("Open sesame", "pen") should return false. testString: assert(confirmEnding("Open sesame", "pen") === false);   - text: confirmEnding("Open sesame", "sage") should return false. testString: assert(confirmEnding("Open sesame", "sage") === false);  - text: confirmEnding("Open sesame", "game") should return false. testString: assert(confirmEnding("Open sesame", "game") === false); - text: confirmEnding("If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing", "mountain") should return false.


[certType]: true }; <del> if (challenge) { const { id, tests, challengeType } = challenge; if ( !user[certType] && !isCertified(tests, user.completedChallenges) ) { return Observable.just(notCertifiedMessage(certName)); } updateData = { ...updateData, completedChallenges: [ ...user.completedChallenges, { id, completedDate: new Date(), challengeType } ] }; </del> <ins> // certificate doesn't exist or // connection error if (!challenge) { reportError(`Error claiming ${certName}`); return Observable.just(failureMessage(certName)); } const { id, tests, challengeType } = challenge; if (!user[certType] && !isCertified(tests, user.completedChallenges)) { return Observable.just(notCertifiedMessage(certName)); </ins> } <ins> updateData = { ...updateData, completedChallenges: [ ...user.completedChallenges, { id, completedDate: new Date(), challengeType } ] }; </ins> if (!user.name) { return Observable.just(noNameMessage);


background-position: center; } <ins> .testimonial-image { border-radius: 5px; height: 200px; width: 200px; } .testimonial-copy { font-size: 20px; text-align: center; @media (min-width: 991px) and (max-width: 1199px) { height: 120px; } @media (min-width: 1200px) { height: 90px; } } </ins> //uncomment this to see the dimensions of all elements outlined in red //* { //  border-color: red;


is2018DataVisCert, isApisMicroservicesCert, isFrontEndLibsCert, <del> is2020QaCert, is2020InfosecCert, </del> <ins> isInfosecQaCert, </ins> isJsAlgoDataStructCert, isRespWebDesignCert } = this.props;


"Hagamos que nuestro botón "Get message" cambie el texto del elemento con clase message.", "Antes de poder hacer esto, tenemos que implementar un evento de pulsación dentro de nuestra función $(document).ready(), añadiendo este código:", "
$("#getMessage").on("click", function(){

});
"  ], "namePt": "Ativando eventos de clique com jQuery", "descriptionPt": [ "Nesta sessão, vamos aprender como obter dados de uma API. As APIS - Interface de Programação de Aplicativos - são ferramentas usadas pelos computadores  para se comunicarem entre si.", "Também aprenderemos como utilizar o HTML com os dados obtidos de uma API usando uma tecnologia chamada Ajax", "Em primeiro lugar, vamos revir o que faz a função $(document).ready(). Esta função faz com que todo o codigo que esteja dentro de seu escopo execute somente quando a nossa página tenha sido carregada.", "Vamos fazer nosso butão "Get message" mudar o texto do elemento com a classe message.", "Antes de poder fazer isso, temos que implementar um evento de clique dentro da nossa função $(document).ready(), adicionando este código:", "
$("#getMessage").on("click", function(){

});
"  ] }, {


${author}

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

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


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


<ins> import request from 'supertest'; import { build } from '../app'; import { endpoints } from './deprecated-endpoints'; describe('Deprecated endpoints', () => { let fastify: undefined | Awaited<ReturnType<typeof build>>; beforeAll(async () => { fastify = await build(); await fastify.ready(); }, 20000); afterAll(async () => { await fastify?.close(); }); endpoints.forEach(([endpoint, method]) => { test(`${method} ${endpoint} returns 410 status code with "info" message`, async () => { const response = await request(fastify?.server)[ method.toLowerCase() as 'get' | 'post' ](endpoint); expect(response.status).toBe(410); expect(response.body).toStrictEqual({ message: { type: 'info', message: 'Please reload the app, this feature is no longer available.' } }); }); }); }); </ins>


Pass in only the first element of the `locations` array by adding `[0]` at the end of the variable. For example: `myFunction(arg[0]);`. <del> This is called <dfn>bracket notation</dfn>. Values in an array are accessed by index. Indices are numerical values and start at 0 - this is called zero-based indexing. `arg[0]` would be the first element in the `arg` array. </del> <ins> This is called <dfn>bracket notation</dfn>. Values in an array are accessed by index. Indices are numerical values and start at `0` - this is called zero-based indexing. `arg[0]` would be the first element in the `arg` array. </ins> # --hints--


```js // doubles input value and returns it const doubler = (item) => item * 2; <ins> doubler(4); // returns 8 </ins> ``` <del> If an arrow function has a single argument, the parentheses enclosing the argument may be omitted. </del> <ins> If an arrow function has a single parameter, the parentheses enclosing the parameter may be omitted. </ins> ```js <del> // the same function, without the argument parentheses </del> <ins> // the same function, without the parameter parentheses </ins> const doubler = item => item * 2; ```


"challengeType": 3, "nameEs": "Crea una calculadora JavaScript", "descriptionEs": [  "Objetivo: Crea una aplicación con CodePen.io que reproduzca efectivamente mediante ingeniería inversa este app: http://codepen.io/FreeCodeCamp/full/zrRzMR.",   "Objetivo: Crea una aplicación con CodePen.io cuya funcionalidad sea similar a esta: http://codepen.io/FreeCodeCamp/full/zrRzMR.",  "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",  "Regla #2: Puedes usar cualquier librería o APIs que necesites.", "Regla #3: Usa ingeniería inversa para reproducir la funcionalidad del proyecto de ejemplo, pero también siéntete en la libertad de personalizarlo.", "Las siguientes son las historias de usuario que debes satisfacer, incluyendo las historias opcionales:", "Historia de usuario: Como usuario, puedo sumar, restar, multiplicar y dividir dos números.",   "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o API que necesites. Dale tu estilo personal.", "Historia de usuario: Puedo sumar, restar, multiplicar y dividir dos números.",  "Historia de usuario opcional: Puedo limpiar la pantalla con un botón de borrar.", "Historia de usuario opcional: Puedo concatenar continuamente varias operaciones hasta que pulse el botón de igual, y la calculadora me mostrará la respuesta correcta.",  "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un link a tu CodePen. Si programaste en pareja, debes incluir también el nombre de usuario de Free Code Camp de tu compañero.", "Si quieres retroalimentación inmediata de parte de tus compañeros campistas, pulsa este botón y pega el link de tu proyecto en CodePen.

Pulsa aquí y agrega tu link en el texto del tweet"   "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un enlace a tu CodePen. ", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."  ], "isRequired": true },


const allowedSocialsAndDomains = { githubProfile: 'github.com', linkedin: 'linkedin.com', <del> twitter: 'twitter.com', </del> <ins> twitter: ['twitter.com', 'x.com'], </ins> website: '' };


"challengeType": 3, "nameEs": "Construye un juego de Simon", "descriptionEs": [  "Objetivo: Crea una aplicación con CodePen.io que reproduzca efectivamente mediante ingeniería inversa este app: http://codepen.io/FreeCodeCamp/full/obYBjE.",   "Objetivo: Construye una aplicación en CodePen.io cuya funcionalidad sea similar a la de esta: http://codepen.io/Em-Ant/full/QbRyqq/.",  "Regla #1: No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",  "Regla #2: Puedes usar cualquier librería o APIs que necesites.", "Regla #3: Usa ingeniería inversa para reproducir la funcionalidad del proyecto de ejemplo, pero también siéntete en la libertad de personalizarlo.", "Las siguientes son las historias de usuario que debes satisfacer, incluyendo las historias opcionales:", "Historia de usuario: Como usuario, se me presenta una serie de colores aleatoria.", "Historia de usuario: Como usuario, cada vez que presiono una secuencia de colores correctamente, veo la misma serie de colores con un paso adicional.", "Historia de usuario: Como usuario, escucho un sonido que corresponde a cada botón cuando una sequencia se me presenta, así como cuando yo presiono un botón.", "Historia de usuario: Como usuario, si presiono el botón equivocado, se me notifica sobre mi error, y la serie correcta de colores se muestra de nuevo para recordarme cuál es la secuencia correcta, tras lo cual puedo probar de nuevo.", "Historia de usuario: Como usuario, puedo ver cuántos pasos hay en la serie de botones actual.", "Historia de usuario opcional: Como usuario, si deseo reiniciar, puedo pulsar un botón para hacerlo, y el juego comenzará desde una secuencia con un solo paso.", "Historia de usuario opcional: Como usuario, puedo jugar en modo estricto donde si presiono el botón equivocado, se me notifica de mi error, y el juego vuelve a comenzar con una nueva serie aleatoria de colores.", "Historia de usuario opcional: Como usuario, la velocidad del juego se incrementa en el quinto, noveno y decimotercer paso.", "Historia de usuario opcional: Como usuario, puedo ganar el juego si completo 20 pasos correctos. Se me notifica sobre mi victoria, tras lo cual el juego se reinicia.",   "Regla #2: Satisface las siguientes historias de usuario. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.", "Historia de usuario: Se me presenta una serie aleatoria de pulsaciones a botones.", "Historia de usuario: Cada vez que presiono una secuencia de pulsaciones correctamente, veo que vuelve a ejecutarse la misma serie de pulsaciones con un paso adicional.", "Historia de usuario: Escucho un sonido que corresponde a cada botón cuando se ejecuta una secuencia de pulsaciones, así como cuando yo presiono un botón.", "Historia de usuario: Si presiono el botón equivocado, se me notifica sobre mi error, y se ejecuta de nuevo la serie correcta de pulsaciones para recordarme cuál es la secuencia correcta, tras lo cual puedo intentar de nuevo.", "Historia de usuario: Puedo ver cuántos pasos hay en la serie de pulsaciones actual.", "Historia de usuario: Si deseo reiniciar, puedo pulsar un botón para hacerlo, y el juego comenzará desde una secuencia con un solo paso.", "Historia de usuario: Puedo jugar en modo estricto donde si presiono el botón equivocado, se me notifica de mi error, y el juego vuelve a comenzar con una nueva serie aleatoria de colores.", "Historia de usuario: Puedo ganar el juego si completo 20 pasos correctos. Se me notifica sobre mi victoria, tras lo cual el juego se reinicia.",  "Pista: Aquí hay algunos mp3s que puedes utilizar para tus botones: https://s3.amazonaws.com/freecodecamp/simonSound1.mp3, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3.",  "Recuerda utilizar Read-Search-Ask si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un link a tu CodePen. Si programaste en pareja, debes incluir también el nombre de usuario de Free Code Camp de tu compañero.", "Si quieres retroalimentación inmediata de parte de tus compañeros campistas, pulsa este botón y pega el link de tu proyecto en CodePen.

Pulsa aquí y agrega tu link en el texto del tweet"   "Recuerda utilizar Leer-Buscar-Preguntar si te sientes atascado.", "Cuando hayas terminado, pulsa el botón de "I've completed this challenge" e incluye un enlace a tu CodePen.", "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra Sala de chat para revisión de código. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."  ], "isRequired": true } ]  }   No newline at end of file  }


Congratulations on behalf of the freeCodeCamp.org team! `; <ins> const failureMessage = name => dedent` Something went wrong with the verification of ${name}, please try again. If you continue to receive this error, you can send a message to support@freeCodeCamp.org to get help. `; </ins> function ifNoSuperBlock404(req, res, next) { const { superBlock } = req.body; if (superBlock && superBlocks.includes(superBlock)) {


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


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


], [ "5a9d7295424fe3d0e10cad14", <del> "Cascading CSS variables" </del> <ins> "Inherit CSS Variables" </ins> ], [ "5a9d72a1424fe3d0e10cad15",


}; ``` <ins> If `value` submitted to `/api/check` is already placed in `puzzle` on that `coordinate`, the returned value will be an object containing a `valid` property with `true` if `value` is not conflicting. ```js async (getUserInput) => { const input = '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..'; const coordinate = 'C3'; const value = '2'; const data = await fetch(getUserInput('url') + '/api/check', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ puzzle: input, coordinate, value }) }); const parsed = await data.json(); assert.property(parsed, 'valid'); assert.isTrue(parsed.valid); }; ``` </ins> If the puzzle submitted to `/api/check` contains values which are not numbers or periods, the returned value will be `{ error: 'Invalid characters in puzzle' }` ```js


function* validateUsernameSaga({ payload }) { try { <del> yield delay(500); </del> const { exists } = yield call(getUsernameExists, payload); yield put(validateUsernameComplete(exists)); } catch (e) {


# --description-- <del> Changing the `bottom-margin` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffee` heading. </del> <ins> Changing the `margin-bottom` to `5px` looks great. However, now the space between the `Cinnamon Roll` menu item and the second `hr` element does not match the space between the top `hr` element and the `Coffee` heading. </ins> Add some more space by creating a class named `bottom-line` using `25px` for the `margin-top` property.


], "tests": [ "assert($("body").css("background-color") === "rgb(0, 0, 0)", 'Your body element should have a black background.')",  "assert(editor.match(/rgbs*(s*0s*,s*0s*,s*0s*)/ig), 'Use rgb to give your body element the background-color of black. For example body { color: rgb(0, 0, 0); }.')"   "assert(editor.match(/rgbs*(s*0s*,s*0s*,s*0s*)/ig), 'Use rgb to give your body element the background-color of black. For example body { background-color: rgb(0, 0, 0); }.')"  ], "challengeSeed": [ "


## Instructions
  Change the while loop in the code to a do...while loop so that the loop will push the number 10 to myArray, and i will be equal to 11 when your code finishes running.   Change the while loop in the code to a do...while loop so that the loop will only push the number 10 to myArray, and i will be equal to 11 when your code finishes running.
 ## Tests


import security from './plugins/security'; import sessionAuth from './plugins/session-auth'; import { settingRoutes } from './routes/settings'; <ins> import { deprecatedEndpoints } from './routes/deprecated-endpoints'; </ins> import { auth0Routes, devLoginCallback } from './routes/auth'; import { testMiddleware } from './middleware'; import prismaPlugin from './db/prisma';


"We can use if statements in JavaScript to only execute code if a certain condition is met.", "if statements require some sort of boolean condition to evaluate.", "Example:",  " if (1 == 2) {",   " if (1 === 2) {",  "  return(true);", "}", "else {",


## Description
  You may recall from Comparison with the Equality Operator that all comparison operators return a boolean true or false value.   You may recall from Comparison with the Equality Operator that all comparison operators return a boolean true or false value.  Sometimes people use an if/else statement to do a comparison, like this:
function isEqual(a,b) {
  if (a === b) {
    return true;
  } else {
    return false;
  }
}
 But there's a better way to do this. Since === returns true or false, we can return the result of the comparison: