"Add them as a new contact in Screen Hero, then click the monitor-looking button to attempt to share your screen with them.", "Once the Screen Hero session starts, your screen's margins will glow orange. You are now sharing your screen.", "Your pair will have their own cursor, and will be able to type text on his or her and keyboard.",  "Now it's time to tackle our Bonfires.", "Go to http://freecodecamp.com/bonfires and start working through our Bonfire challenges.",   "Now it's time to tackle our Bonfires. You can begin them by advancing to the next challenge.",  "Once you you finish pair programming, end the session in Screen Hero session.", "Congratulations! You have completed your first pair programming session.", "Pair program as much as possible with different campers until you've completed all the Bonfire challenges. This is a big time investment, but the JavaScript practice you get will be well worth it!",


"tests": [ "assert($('ul').length > 0, 'You should have an ul element on your webpage.')", "assert($('ol').length > 0, 'You should have an ol element on your webpage.')",  "assert($('li').length > 5, 'You should have three li elements on within your ul element.')", "assert($('li').length > 5, 'You should have three li elements on within your ol element.')"   "assert($('li').length > 5, 'You should have three li elements within your ul element.')", "assert($('li').length > 5, 'You should have three li elements within your ol element.')"  ], "challengeSeed": [ "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",


"For example, if you wanted to make a text input field required, you can just add the word "required" within your input element use: <input type='text' required>" ], "tests": [  "assert($('input').prop('required'), 'Your text field have the property of being required.')", "assert($('[placeholder]').length > 0, 'Your text field should have the placeholder text of "cat photo URL".')"   "assert($('input').prop('required'), 'Your text field should have the property of being required.')", "assert(new RegExp('cat photo URL').test($('input').prop('placeholder')), 'Your text field should have the placeholder text of "cat photo URL".')"  ], "challengeSeed": [ "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",


"Put the "like", "Info" and "Delete" buttons side-by-side by wrapping all three of them within one <div class="row"> element, then each of them within a <div class="col-xs-4"> element.", "Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element.", "Here's a diagram of how Bootstrap's 12-column grid layout works:",  "",   "",  "Note that in this illustration, we use the col-md-* class. Here, "md" means "medium", and "*" is a number specifying how many columns wide the element should be. In this case, we're specifying how many columns wide an element should be on a medium-sized screen, such as a laptop.", "In the Cat Photo App that we're building, we'll use col-xs-*, where "*" is the number of columns wide the element should be, and "xs" means "extra small", like an extra-small mobile phone screen.", "The row class is applied to a div, and the buttons themselves can be wrapped within it."


"name": "Waypoint: Line up Form Elements Responsively with Bootstrap", "difficulty" : 0.062, "description": [ <del> "Wrap both your form's text input field and submit button within a div with the class "row". Wrap your form's text input field within a div with the class of "col-xs-7". Wrap your form's submit button the in a div with the class "col-xs-5".", </del> "Now let's get your form input and your submission button on the same line. We'll do this the same way we have previously: by using a "row" element with "col-xs-*" elements withing it.", <ins> "Wrap both your form's text input field and submit button within a div with the class "row". Wrap your form's text input field within a div with the class of "col-xs-7". Wrap your form's submit button the in a div with the class "col-xs-5".", </ins> "This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!" ], "tests": [ <del> "assert($('.row').length > 4, 'Wrap your all of your checkboxes inside one div with the class "row".')", </del> <ins> "assert($('.row').length > 4, 'Wrap your form submission button and text area in a div with class "row".')", </ins> "assert($('.col-xs-5').length > 0, 'Wrap your form submission button in a div with the class "col-xs-5".')", "assert($('.col-xs-7').length > 0, 'Wrap your form text area in a div with the class "col-xs-7".')" ],


], "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,


"tests": [ "assert($("img").hasClass("smaller-image"), 'Your img element should have the class smaller-image.')", "assert($("img").hasClass("thick-green-border"), 'Your img element should have the class thick-green-border.')",  "assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width")), 'Give your image a border width of 10px.')", "assert(new RegExp("solid", "gi").test(editor), 'Give your image a border style of solid.')",   "assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) === 10, 'Give your image a border width of 10px.')", "assert($("img").css("border-right-style") === "solid", 'Give your image a border style of solid.')",  "assert($("img").css("border-left-color") === "rgb(0, 128, 0)", 'The border around your img element should be green.')" ], "challengeSeed": [


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


"dashedName": "waypoint-add-two-numbers-with-javascript", "difficulty": "9.98141", "description": [  "In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions", "Let's try a few of the most commonly used ones now", "We use +for addition",   "In JavaScript whole numbers (called integers) can be easily used to perform mathematical functions.", "Let's try a few of the most commonly used ones now.", "We use +for addition.",  "Replace the 0with correct number to achieve the result in the comment." ], "tests": [


"dashedName": "waypoint-subtract-one-number-from-another-with-javascript", "difficulty": "9.98142", "description": [  "In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions", "Let's try a few of the most commonly used ones now", "We use -for subtraction",   "In JavaScript whole numbers (called integers) can be easily used to perform mathematical functions.", "Let's try a few of the most commonly used ones now.", "We use -for subtraction.",  "Replace the 0with correct number to achieve the result in the comment." ], "tests": [


"dashedName": "waypoint-multiply-two-numbers-with-javascript", "difficulty": "9.98143", "description": [  "In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions", "Let's try a few of the most commonly used ones now", "We use *for multiplication",   "In JavaScript whole numbers (called integers) can be easily used to perform mathematical functions.", "Let's try a few of the most commonly used ones now.", "We use *for multiplication.",  "Replace the 0with correct number to achieve the result in the comment." ], "tests": [


"dashedName": "waypoint-divide-one-number-by-another-with-javascript", "difficulty": "9.9814", "description": [  "In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions", "Let's try a few of the most commonly used ones now", "We use /for division",   "In JavaScript whole numbers (called integers) can be easily used to perform mathematical functions.", "Let's try a few of the most commonly used ones now.", "We use /for division.",  "Replace the 0with correct number to achieve the result in the comment." ], "tests": [


"dashedName": "waypoint-create-decimal-numbers-with-javascript", "difficulty": "9.9815", "description": [  "in JavaScript we can can work with decimal numbers",   "In JavaScript we can can work with decimal numbers.",  "Let's create a variable myDecimal and give it a decimal value." ], "tests": [


"function functionName (a, b) {", "  return(a + b);", "}",  "We can "call" our function like this: functionName();, and it will run and return it's return value to us.", "Create and call a function called myFunction."   "We can "call" our function like this: functionName();, and it will run and return its return value to us.", "Create and call a function called myFunction that returns the sum of a and b."  ], "tests":[ "assert((function(){if(typeof(f) !== "undefined" && typeof(f) === "number" && f === a + b  && editor.getValue().match(/return/gi).length >= 1 && editor.getValue().match(/a/gi).length >= 1 && editor.getValue().match(/b/gi).length >= 1 && editor.getValue().match(/+/gi).length >= 1){return(true);}else{return(false);}})(), 'Your function should return the value of a + b');"


"  return a - b;", "};", "", <del> "//Don't modify above this line", "//Create a function called myFunction that returns the value of a plus b.", "  // Only change code below this line.", </del> <ins> "// Don't modify above this line", "// Create a function called myFunction that returns the value of a plus b.", "// Only change code below this line.", </ins> "", "", "",


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


"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":[ ],


"title": "Use Spans for Inline Elements", "difficulty": 2.105, "description": [  "You can use use spans to create inline elements. Remember when we used the btn-block class to make the button fill the entire row?",   "You can use spans to create inline elements. Remember when we used the btn-block class to make the button fill the entire row?",  "This image illustrates the difference between inline elements and block-level elements:", "", "By using the span element, you can put several elements together, and even style different parts of the same element differently.",


"description": [ "Compare and update inventory stored in a 2d array against a second 2d array of a fresh delivery. Update current inventory item quantity, and if an item cannot be found, add the new item and quantity into the inventory array in alphabetical order." ], <del> "challengeSeed": "function inventory(arr1, arr2) {n    // All inventory must be accounted for or you're fired!rn    return arr1;rn}nn// Example inventory listsrnvar curInv = [rn    [21, 'Bowling Ball'],rn    [2, 'Dirty Sock'],rn    [1, 'Hair pin'],rn    [5, 'Microphone']rn];rnrnvar newInv = [rn    [2, 'Hair Pin'],rn    [3, 'Half-Eaten Apple'],rn    [67, 'Bowling Ball'],rn    [7, 'Toothpaste']rn];rnrninventory(curInv, newInv);", "tests": [ "expect(inventory([[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair pin'], [5, 'Microphone']], [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']])).to.be.a('array');", "assert.equal(inventory([[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair pin'], [5, 'Microphone']], [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']]).length, 6);", "assert.deepEqual(inventory([[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair pin'], [5, 'Microphone']], [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']]), [[88, 'Bowling Ball'], [2, 'Dirty Sock'], [3, 'Hair pin'], [3, 'Half-Eaten Apple'], [5, 'Microphone'], [7, 'Toothpaste']]);", "assert.deepEqual(inventory([[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair pin'], [5, 'Microphone']], []), [[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair pin'], [5, 'Microphone']]);", "assert.deepEqual(inventory([], [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']]), [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']]);", "assert.deepEqual(inventory([[0, 'Bowling Ball'], [0, 'Dirty Sock'], [0, 'Hair pin'], [0, 'Microphone']], [[1, 'Hair Pin'], [1, 'Half-Eaten Apple'], [1, 'Bowling Ball'], [1, 'Toothpaste']]), [[1, 'Bowling Ball'], [1, 'Dirty Sock'], [1, 'Hair pin'], [1, 'Half-Eaten Apple'], [1, 'Microphone'], [1, 'Toothpaste']]);" </del> <ins> "challengeSeed": "function inventory(arr1, arr2) {n    // All inventory must be accounted for or you're fired!rn    return arr1;rn}nn// Example inventory listsrnvar curInv = [rn    [21, 'Bowling Ball'],rn    [2, 'Dirty Sock'],rn    [1, 'Hair Pin'],rn    [5, 'Microphone']rn];rnrnvar newInv = [rn    [2, 'Hair Pin'],rn    [3, 'Half-Eaten Apple'],rn    [67, 'Bowling Ball'],rn    [7, 'Toothpaste']rn];rnrninventory(curInv, newInv);", "tests": [ "expect(inventory([[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair Pin'], [5, 'Microphone']], [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']])).to.be.a('array');", "assert.equal(inventory([[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair Pin'], [5, 'Microphone']], [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']]).length, 6);", "assert.deepEqual(inventory([[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair Pin'], [5, 'Microphone']], [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']]), [[88, 'Bowling Ball'], [2, 'Dirty Sock'], [3, 'Hair Pin'], [3, 'Half-Eaten Apple'], [5, 'Microphone'], [7, 'Toothpaste']]);", "assert.deepEqual(inventory([[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair Pin'], [5, 'Microphone']], []), [[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair Pin'], [5, 'Microphone']]);", "assert.deepEqual(inventory([], [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']]), [[67, 'Bowling Ball'], [2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [7, 'Toothpaste']]);", "assert.deepEqual(inventory([[0, 'Bowling Ball'], [0, 'Dirty Sock'], [0, 'Hair Pin'], [0, 'Microphone']], [[1, 'Hair Pin'], [1, 'Half-Eaten Apple'], [1, 'Bowling Ball'], [1, 'Toothpaste']]), [[1, 'Bowling Ball'], [0, 'Dirty Sock'], [1, 'Hair Pin'], [1, 'Half-Eaten Apple'], [0, 'Microphone'], [1, 'Toothpaste']]);" </ins> ] } ]


"});" ], "tests":[  "assert.deepEqual(array, [1,2,3,4], 'message: You should have removed all the values from the array that are greater than 4.');",   "assert.deepEqual(array, [1,2,3,4,5], 'message: You should have removed all the values from the array that are greater than 5.');",  "assert(editor.getValue().match(/array.filters*(/gi), 'message: You should be using the filter method to remove the values from the array.');", "assert(editor.getValue().match(/[1,2,3,4,5,6,7,8,9,10]/gi), 'message: You should only be using .filter to modify the contents of the array.');" ],


"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.",


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


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


"Bonus User Story: As a user, I navigate to different sections of the webpage by clicking buttons in the navigation.", "Don't worry if you don't have anything to showcase on your portfolio yet - you will build several apps on the next few CodePen challenges, and can come back and update your portfolio later.", "There are many great portfolio templates out there, but for this challenge, you'll need to build a portfolio page yourself. Using Bootstrap will make this much easier for you.",  "Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jquery, you will need to target invisible anchor elements like this one: <a target='_blank'>.",   "Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jQuery, you will need to target invisible anchor elements like this one: <a target='_blank'>.",  "Remember to use Read-Search-Ask if you get stuck.", "When you are finished, click the "I've completed this challenge" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.", "If you'd like immediate feedback on your project from fellow campers, click this button and paste in a link to your CodePen project.

Click here then add your link to your tweet's text"


"description": [ "We're done playing with our jQuery playground. Let's tear it down!", "jQuery can target the body element as well.",  "Here's how we would make the entire body fade out:  $("body").addClass("animated fadeOut")",   "Here's how we would make the entire body fade out:  $("body").addClass("animated fadeOut");",  "But let's do something more dramatic. Add the classes animated and hinge to your body element." ], "tests": [


"descriptionEs": [ "Hemos terminado de jugar en nuestro patio de recreo jQuery. ¡Vamos a derribarlo!", "jQuery también puede elegir el elemento body.",  "Así es como haríamos que el cuerpo entero desapareciera: $("body").addClass('animated fadeOut')",   "Así es como haríamos que el cuerpo entero desapareciera: $("body").addClass('animated fadeOut');",  "Pero vamos a hacer algo más dramático. Añade las clases animated y hinge a tu elemento body." ] }


"id": "cf1391c1c11feddfaeb4bdef", "title": "Create Decimal Numbers with JavaScript", "description": [  "We can store decimal numbers in variables too. Decimal numbers are sometimes refered to as <dfn>floating point</dfn> numbers or <dfn>floats</dfn>.",   "We can store decimal numbers in variables too. Decimal numbers are sometimes referred to as <dfn>floating point</dfn> numbers or <dfn>floats</dfn>.",  "Note
Not all real numbers can accurately be represented in <dfn>floating point</dfn>. This can lead to rounding errors. Details Here.", "
Instructions
", "Create a variable myDecimal and give it a decimal value."


"
5 % 2 = 1 because
Math.floor(5 / 2) = 2 (Quotient)
2 * 2 = 4
5 - 4 = 1 (Remainder)
", "Usage
In mathematics, a number can be checked even or odd by checking the remainder of the division of the number by 2.", "
17 % 2 = 1 (17 is Odd)
48 % 2 = 0 (48 is Even)
",  "Note
The <dfn>remainder</dfn> operator is sometimes incorrectly refered to as  the "modulus" operator. It is very similar to modulus, but does not work properly with negative numbers.",   "Note
The <dfn>remainder</dfn> operator is sometimes incorrectly referred to as  the "modulus" operator. It is very similar to modulus, but does not work properly with negative numbers.",  "
Instructions
", "Set remainder equal to the remainder of 11 divided by 3 using the <dfn>remainder</dfn> (%) operator." ],


"title": "Use Bracket Notation to Find the First Character in a String", "description": [ "Bracket notation is a way to get a character at a specific index within a string.",  "Most modern programming languages, like JavaScript, don't start counting at 1 like humans do. They start at 0. This is refered to as <dfn>Zero-based</dfn> indexing.",   "Most modern programming languages, like JavaScript, don't start counting at 1 like humans do. They start at 0. This is referred to as <dfn>Zero-based</dfn> indexing.",  "For example, the character at index 0 in the word "Charles" is "C". So if var firstName = "Charles", you can get the value of the first letter of the string by using firstName[0].", "
Instructions
", "Use <dfn>bracket notation</dfn> to find the first character in the lastName variable and assign it to firstLetterOfLastName.",


"id": "56533eb9ac21ba0edf2244d4", "title": "Comparison with the Greater Than Operator", "description": [  "The greater than operator (>) compares the values of two numbers. If the number to the left is greater than the number to the right, it returns true. Otherwise, it returns false.
Like the equality operator, greater than operator will convert data types of values while comparing.",   "The greater than operator (>) compares the values of two numbers. If the number to the left is greater than the number to the right, it returns true. Otherwise, it returns false.", "Like the equality operator, greater than operator will convert data types of values while comparing.",  "Examples", "
 5 > 3   // true
 7 > '3' // true
 2 > 3   // false
'1' > 9  // false
", "
Instructions
",


"id": "56533eb9ac21ba0edf2244d5", "title": "Comparison with the Greater Than Or Equal To Operator", "description": [  "The greater than or equal to operator (>=) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns true. Otherwise, it returns false.
Like the equality operator, greater than or equal to operator will convert data types while comparing.",   "The greater than or equal to operator (>=) compares the values of two numbers. If the number to the left is greater than or equal to the number to the right, it returns true. Otherwise, it returns false.", "Like the equality operator, greater than or equal to operator will convert data types while comparing.",  "Examples", "
 6  >=  6  // true
 7  >= '3' // true
 2  >=  3  // false
'7' >=  9  // false
", "
Instructions
",


"Al usar el elemento span, puedes poner varios elementos juntos, e incluso darle diferentes estilos a partes diferentes del mismo elemento.", "Anida la palabra "love" en tu elemento "Things cats love" dentro de un elemento span. Luego, asigna a ese elemento span la clase text-danger para hacer que el texto sea rojo.", "Así es como lo harías con el elemento "Top 3 things cats hate":",  "<p>Top 3 things cats <span class = "text-danger">hate</span></p>"   "<p>Top 3 things cats <span class = "text-danger">hate:</span></p>"  ] }, {


"challengeType": 0, "nameEs": "Crea un encabezado personalizado", "descriptionEs": [  "Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniéndolos en la misma línea.",   "Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniendo el título y la relajante imagen del gato en la misma línea.",  "Recuerda, Bootstrap usa un sistema de cuadrícula adaptativo, el cual facilita poner elementos en filas y especificar el ancho relativo de cada elemento. La mayoría de las clases de Bootstrap pueden aplicarse a un elemento div.", "Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:", "",


"nameEs": "Agrega iconos de Font Awesome a los botones", "descriptionEs": [ "Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato .svg, y son tratados como si fueran fuentes. Puedes especificar su tamaño usando pixeles, y tomarán el tamaño de fuente de su elemento HTML padre.",  "Puedes añadir Font Awesome a cualquier aplicación sólo incluyendo y agregando el siguiente código al comienzo de tu HTML:", "<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>", "En este caso, ya lo hemos agregado por tí a esta página tras bambalinas.", "El elemento i originalmente era usado para hacer textos en itálicas, pero ahora comunmente se usa para iconos.  Le agregas clases de Font Awesome al elemento i para convertirlo en un ícono, por ejemplo:", "<i class="fa fa-info-circle"></i>",  "Usa Font Awesome para agregar un icono de "pulgar arriba" thumbs-up a tu botón de like dándole un elemento i con las clases fa y fa-thumbs-up." ] },


"Vamos a darle un id único a cada uno de nuestros elementos div que tienen la clase well.", "Recuerda que puedes darle a un elemento un id como el siguiente:", "<div class="well" id="center-well">",  "Dale al pozo de la izquireda el id left-well. Al pozo de la derecha, dale un id de right-well."   "Dale al pozo de la izquireda el id left-well. Al pozo de la derecha, dale un id right-well."  ] }, {


"nameEs": "Dale a cada elemento un ID único", "descriptionEs": [ "También quisiéramos referirnos a cada botón por su id utilizando jQuery.",  "Dale a cada uno de tus botones un id único, comenzando con target1 y terminando con target6."   "Dale a cada uno de tus botones un id único, comenzando con target1 y terminando con target6.", "Asegúrate que target1 a target3 queden en #left-well, mientras que target4 a target6 queden en #right-well."  ] }, {


"tests": [ "assert($("#left-well").css("background-color") === 'red' || $("#left-well").css("background-color") === 'rgb(255, 0, 0)' || $("#left-well").css("background-color").toLowerCase() === '#ff0000' || $("#left-well").css("background-color").toLowerCase() === '#f00', 'message: Your left-well element should have a red background.');", "assert(code.match(/.parents*()s*.css/g), 'message: You should use the .parent() function to modify this element.');",  "assert(code.match(/$s*?(s*?(?:'|")s*?#target1s*?(?:'|")s*?).parent/gi), 'message: The .parent() method should be called on the #target1 element.');",   "assert(code.match(/$s*?(s*?(?:'|")s*?#target1s*?(?:'|")s*?)s*?.parent/gi), 'message: The .parent() method should be called on the #target1 element.');",  "assert(code.match(/
/g), 'message: Only use jQuery to add these classes to the element.');" ], "type": "waypoint",


] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: Elementos", "descriptionEs": [ "Esta es información básica y una mini-lección sobre la pestaña Elements en las herramientas de desarrollo de Chrome. Echa un vistazo a la documentación más detallada aquí: developers.google.com/web/tools/iterate/inspect-styles/basics ", "Vamos a utilizar la página web mckellen.com/ por sugerencia del usuario de FreeCodeCamp kmiasko.", "Si pulsas con el botón derecho y seleccionas 'Inspeccionar elemento', tendrás acceso a la pestaña elements. ¡Puedes cambiar el texto, el color de fondo, el color de texto y cualquier otra propiedad CSS o elemento HTML que desees!", "Estos cambios no se establecen de forma automática, por lo que no debes usar el inspector como un IDE o como un lugar para crear o editar cualquier cosa que desees guardar. Puedes configurar algo que se llama 'autoría persistente' para salvar.", "Las reglas de CSS como cascada, herencia y otras se aplican, así que tenlo en cuenta a medida que juegas. Además, los estilos anulados se muestran con un tachado sobre ellos. ", "También hay que señalar que todo el código que veas en ese 'árbol' es código HTML actual, no el original que había cuando se cargó la página. Si utilizas jQuery o JavaScript para cambiar algo, esté árbol se actualizará.", "El relleno, los bordes y los márgenes se inspeccionan fácilmente y puedes editarlos usando la caja con colores que encontrarás al lado derecho o en la parte de abajo.", "Por favor, echa un vistazo a la documentación de las herramientas de desarrollo de Chrome en developers.google.com/web/tools/chrome-devtools/" ] </ins> }, { "id": "56b15f15632298c12f315183",


] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: red", "descriptionEs": [ "La pestaña network (red) ayuda a responder preguntas como '¿Qué elemento o parte de la página fue el más demorado?' o '¿Qué inició una petición?'", "El panel de red registra información detallada sobre cuánto tarda en cargar cada elemento de su página o aplicación.", "Cada solicitud se registra en la bitácora, que se puede encontrar en la parte inferior del panel de red.", "Si te fijas en la línea al lado derecho, te darás cuenta de un patrón de colores. Cada color representa un tipo diferente de contenido en la solicitud. ", "Cuanto más larga sea la línea de un color determinado, tanto más tiempo tomó ese tipo de contenido en la solicitud. En últimas quieres líneas cortas, y si cualquier solicitud tiene largas líneas, sabes que puede estar ralentizando la página web.", "Si pulsas sobre una solicitud en la bitácora, podrás obtener información más detallada.", "Consulta más documentación detallada aquí: developers.google.com/web/tools/profile-performance/network-performance/resource-loading" ] </ins> }, { "id": "56b15f15632298c12f315182",


] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: Fuentes", "descriptionEs": [ "La pestaña 'fuentes' es más útil para la depuración de JavaScript. Cuanto más grande sea tu proyecto, tanto más difícil resulta encontrar exactamente dónde se produce un problema. ", "Puedes seleccionar diferentes partes del código para ser 'puntos de interrupción', puestos de control que detendrán la ejecución del código en ese preciso momento. ", "Hay diferentes puntos de interrupción que puedes establecer, por ejemplo una línea de código específica, un evento del DOM, una petición del servidor llamada solicitud XMLHTTP, o un evento de JavaScript.", "Cuando estableces un punto de interrupción, el navegador detiene todo cuando llega a interpretar esa línea de código o evento.", "Al reducir la velocidad de todo y darte la oportunidad de examinar lo que está sucediendo en cada punto que hayas configurado, podrás controlar exactamente lo que está sucediendo en la página o aplicación.", "Una vez has establecido todos los puntos de interrupción, puedes recorrer el código y examinar el estado de tu página o aplicación en cada punto de interrupción.", "Al igual que con los elementos, puedes editar en vivo mediante las herramientas de desarrollo, pero recuerda que debes guardar esos cambios para que no pierdas tu progreso.", "Revisa documentación más detallada aquí: developers.google.com/web/tools/javascript/breakpoints/" ] </ins> }, { "id": "56b15f15632298c12f315181",


] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: Línea de tiempo", "descriptionEs": [ "El panel Línea de tiempo te permite grabar y analizar toda la actividad en tu aplicación mientras se ejecuta. Es el mejor lugar para comenzar a investigar los problemas de rendimiento que percibas en tu aplicación. ", "Al igual que usas el panel de red para averiguar cuánto tiempo toman las partes de la página para comunicarse con el Internet y utilizas fuentes para averiguar dónde algo se daña, puedes utilizar la línea de tiempo para averiguar con más detalle lo que está pasando y el tiempo que tarda.", "En el panel línea de tiempo grabas acontecimientos con el pequeño botón circular. Puedes grabar (o capturar) pilas, perfiles js, la memoria y la presentación (CSS). ", "Al grabarlos (capturalos), quedan en pequeños y detallados registros que puedes organizar de muchas maneras para que se adapten a tus necesidades.", "Todo esto te ayudará a entender mejor lo que está pasando en el navegador, en particular cuáles eventos requieren más memoria del navegador.", "Cuando uses la línea de tiempo, recuerda que debes utilizar el botón 'limpiar' (clear) para iniciar la grabación y antes de cargar la página, dependiendo de lo que desees capturar.", "Te darás cuenta de que cuando grabas eventos JS, al pulsar en el título o en una 'llamada a una función' al lado izquierdo, te llevará al documento y a la línea de esa función en el panel de recursos. ", "Revisa documentación más detallada aquí: developers.google.com/web/tools/profile-performance/evaluate-performance/timeline-tool" ] </ins> }, { "id": "56b15f15632298c12f315180",


] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: Perfiles", "descriptionEs": [ "El panel Perfiles te permite perfilar el tiempo de ejecución y el uso de memoria de una aplicación web o de una página. Esto se aplica principalmente a la ejecución de JavaScript en su página o aplicación. ", "Hay tres tipos de perfiles que se pueden recolectar: el perfil de la CPU, instantáneas de la memoria con estructura montón (Heap), y el perfil de la memoria con estructura montón. Los perfiles de memoria en estructura montón tienen más que ver con el uso de memoria, mientras que un perfil de la CPU tiene más que ver con el rendimiento de JavaScript. ", "Un perfilador llamado V8 se usa mientras se ejecuta el código para identificar lo que en el JavaScript toma mucho tiempo, facilitándote de esta forma optimizar tu código.", "Cada uno de estos perfiles se puede ver a la izquierda, y se puede tomar múltiples perfiles de cada uno. En general, la pestaña de perfiles es muy útil cuando deseas optimizar tu código. ", "Revisa documentación más detallada aquí: developers.google.com/web/tools/profile-performance/rendering-tools/js-execution" ] </ins> }, { "id": "56b15f15632298c12f31517f",


] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: Recursos", "descriptionEs": [ "El panel de Recursos te permite inspeccionar los recursos que se cargan en la página, incluyendo IndexedDB o bases de datos SQL Web, almacenamiento local y de sesión, las galletas (cookies), memoria caché de aplicaciones, imágenes, fuentes y hojas de estilo.", "Puedes ver y editar toda esta información dentro del navegador.", "A medida que vayas construyendo aplicaciones web más avanzadas, juega con el panel de recursos y verás cómo te ayudará a entender los requisitos de tu aplicación y de tu página en tiempo real.", "Revisa documentación más detallada aquí: developers.google.com/web/tools/iterate/manage-data/index" ] </ins> }, { "id": "56b15f15632298c12f31517e",


] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: Las auditorías", "descriptionEs": [ "La herramienta de auditoría te guía para mejorar tu página paso a paso.", "En este vídeo, se utiliza esta herramienta con un generador de citas aleatorias desarrollado como uno de los proyectos de desarrollo de interfaces.", "Las sugerencias que se ven, se generan automáticamente con la función de auditoría.", "Es importante tenerlas en cuenta para contextualizarlos con el resto de conocimiento que tienes de tu sitio.", "A veces, puede ser que sea lo acertado, pero en ocasiones, por tu situación las sugerencias que da son equivocadas.", "Usa esta herramienta cuando desees mejorar tu sitio o aplicación, pero no sepas por dónde empezar." ] </ins> }, { "id": "56b15f15632298c12f31517d",


] ], "type": "hike",  "challengeType": 6   "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: Consola", "descriptionEs": [ "El panel de la consola ofrece dos funciones principales: registro de datos de diagnóstico en el proceso de desarrollo y proporcionar un intérprete de órdenes que puedes utilizar para interactuar con el documento y las Herramientas de desarrollo", "Al utilizar la consola, puedes ver los datos en bruto o estructurados mediante instrucciones estándar JS y órdenes específicas para la consola.", "Un ejemplo de datos estructurados sería la información JSON que devuelva una API. Muy útil cuando se construyen las primeras aplicaciones de desarrollo de interfaces para FreeCodeCamp.", "Debes saber que los mensajes se apilan y que puedes limpiarlos escribiendo clear(). También puedes guardar la bitácora seleccionando 'Preserve Log'. ", "Hay diferentes órdenes que registrarán en bitácoras de manera diferente, como console.log() para registrar información básica, console.error() y console.warn() para registrar en bitácoras 'información llamativa'.", "La consola puede realizar un seguimiento de excepciones, que básicamente registra cuando algo sale mal. Puede incluso hacer una pausa en el código durante esas excepciones, función que posiblemente recuerdes de la pestaña 'Fuente'. ", "Revisa documentación más detallada aquí: developers.google.com/web/tools/javascript/console/" ]  }, { "id": "56b15f15632298c12f31517c",


] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "Herramientas de desarrollo de Chrome: Resumen", "descriptionEs": [ ", Las herramientas de desarrollo de Chrome son impresionantes, y cuanto más te puedas sumergir y tratar de utilizarlas, más rápido aumentará tu nivel. ", ", Utiliza la documentación, incluso si nunca has leído documentación antes: developers.google.com/web/tools/chrome-devtools/ ", ", Una vez que comiences a sentirte cómodo en una pestaña, rétate aprendiendo a usar una diferente. Trabajar eficazmente con todas las pestañas te servirá exponencialmente más que pegarte en tu zona de confort." ] </ins> } ] }


"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 },


], "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


"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 },


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


"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." ]


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


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;


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


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


"challengeSeed": "function sumPrimes(num) {n  return num;rn}", "tests": [ "expect(sumPrimes(10)).to.be.a('number');", <del> "expect(sumPrimes(10)).to.equal(27);", </del> <ins> "expect(sumPrimes(10)).to.equal(17);", </ins> "expect(sumPrimes(977)).to.equal(73156);" ] },


], "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">",


var isCompletedDate =  Math.round(+new Date() / 1000); var bonfireHash = req.body.bonfireInfo.bonfireHash; var isSolution = req.body.bonfireInfo.solution; <del> // TODO debug(isCompletedWith, 'Is completed with'); </del> if (isCompletedWith) { var paired = User.find({"profile.username": isCompletedWith}).limit(1);


throw err; } if (user && paired) { <del> res.redirect('/bonfires'); </del> <ins> res.send(true); </ins> } }) }); } }) } else { req.user.completedBonfires.push({ _id: bonfireHash, completedWith: null,


}) var index = req.user.uncompletedBonfires.indexOf(bonfireHash); if (index > -1) { req.user.uncompletedBonfires.splice(index,1) } req.user.save(function(err, user) { if (err) { throw err; } if (user) { <del> res.redirect('/bonfires'); </del> <ins> debug('Saving user'); res.send(true) </ins> } }); } }); // Unique Check API route


return res.redirect('bonfires/meet-bonfire'); } var currentTime = parseInt(+new Date() / 1000); <del> if (currentTime - req.user.lastContentSync > 86400) { </del> <ins> if (currentTime - req.user.lastContentSync > 10) { </ins> req.user.lastContentSync = currentTime; var completed = req.user.completedBonfires.map(function (elem) { return elem._id;


} } }); <del> } if (allTestsPassed) { allTestsPassed = false; showCompletion(); </del> <ins> if (allTestsPassed) { allTestsPassed = false; showCompletion(); } </ins> } };


$('#complete-bonfire-dialog').modal('show'); // Only post to server if there is an authenticated user if ($('.signup-btn-nav').length < 1) { <del> $.ajax({ type: 'POST', data: { </del> <ins> $.post( '/completed-bonfire', { </ins> bonfireInfo: { completedWith : didCompleteWith, solution: bonfireSolution, bonfireHash: thisBonfireHash } }, <del> url: '/completed-bonfire/' }); </del> <ins> function(res) { if (res) { window.location.href = 'http://localhost:3001/bonfires' } }) </ins> } } <ins> $('.next-bonfire-button').on('click', function() { var bonfireSolution = myCodeMirror.getValue(); var thisBonfireHash = passedBonfireHash || null; var didCompleteWith = $('#completed-with').val() || null; completedBonfire(didCompleteWith, bonfireSolution, thisBonfireHash); }); </ins> $('.all-challenges').on('click', function() { $('#all-challenges-dialog').modal('show'); });


}); <del> $('.next-bonfire-button').on('click', function() { var bonfireSolution = myCodeMirror.getValue(); var thisBonfireHash = passedBonfireHash || null; var didCompleteWith = $('#completed-with').val() || null; completedBonfire(didCompleteWith, bonfireSolution, thisBonfireHash); window.setTimeout(function() { // TODO window.location = '/bonfires'; }, 100); }); </del> // Bonfire instructions functions $('#more-info').on('click', function() {


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


"difficulty": "1.06", "description": [ "Return an array consisting of the largest numbers in the provided array. The array will contain 4 sub-arrays.", <del> "Remember, you an iterate through an array with a simple for loop, and access each member with array syntax arr[i] .", </del> <ins> "Remember, you can iterate through an array with a simple for loop, and access each member with array syntax arr[i] .", </ins> "If you are writing your own Chai.js tests, be sure to use a deep equal statement instead of an equal statement when comparing arrays." ], "challengeEntryPoint": "largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);",


"name": "Sum All Odd Fibonacci Numbers", "difficulty": "2.09", "description": [ <del> "Return the sum of all odd fibonacci numbers up to and including the passed number if it is a fibonacci number.", </del> <ins> "Return the sum of all odd Fibonacci numbers up to and including the passed number if it is a Fibonacci number.", </ins> "The first few numbers of the Fibonacci sequence are 1, 1, 2, 3, 5 and 8, and each subsequent number is the sum of the previous two numbers.", <del> "As an example, passing 4 to the function should return 5 because all the odd fibonacci numbers under 4 are 1, 1, and 3." </del> <ins> "As an example, passing 4 to the function should return 5 because all the odd Fibonacci numbers under 4 are 1, 1, and 3." </ins> ], "challengeEntryPoint": "sumFibs(4);", "challengeSeed": "function sumFibs(num) {n  return num;rn}",


"difficulty": "2.10", "description": [ "Sum all the prime numbers up to and including the provided number.", <del> "A prime number is defined as having only two divisors, 1 and itself. For example, 2 is a prime number because it's only divisible by 1 and 2. 1 isn't a prime number, because it's only divisible  by itself.", </del> <ins> "A prime number is defined as having only two divisors, 1 and itself. For example, 2 is a prime number because it's only divisible by 1 and 2. 1 isn't a prime number, because it's only divisible by itself.", </ins> "The provided number may not be a prime." ], "challengeEntryPoint": "sumPrimes(10);",


"Fill in the object constructor with the methods specified in the tests.", "Those methods are getFirstName(), getLastName(), getFullName(), setFirstName(), setLastName(), and setFullName().", "These methods must be the only available means for interacting with the object.", <del> "There will be some linting errors on the tests, you may safely ignore them. You should see undefined in the console output." </del> <ins> "There will be some linting errors on the tests. You may safely ignore them. You should see undefined in the console output." </ins> ], "challengeEntryPoint": "var bob = new Person('Bob Ross');", "challengeSeed": "var Person = function(firstAndLast) {n    return firstAndLast;rn};",


"Return true if the passed string is a valid US phone number", "The user may fill out the form field any way they choose as long as it is a valid US number. The following are all valid formats for US numbers:", "555-555-5555, (555)555-5555, (555) 555-5555, 555 555 5555, 5555555555, 1 555 555 5555", <del> "For this challenge you will be presented with a string such as "800-692-7753" or "8oo-six427676;laskdjf". Your job is to validate or reject the US phone number based on any combination of the formats provided above. The area code is required. If the country code code is provided, you must confirm that the country code is "1". Return true if the string is a valid US phone number; otherwise false." </del> <ins> "For this challenge you will be presented with a string such as "800-692-7753" or "8oo-six427676;laskdjf". Your job is to validate or reject the US phone number based on any combination of the formats provided above. The area code is required. If the country code is provided, you must confirm that the country code is "1". Return true if the string is a valid US phone number; otherwise false." </ins> ], "tests": [ "expect(telephoneCheck("555-555-5555")).to.be.a("boolean");",


"id": "bd7158d8c443eddfaeb5bdee", "title": "Build a Pinterest Clone", "description": [  "Objective: Build a full stack JavaScript app that is functionally similar to this: https://midnight-dust.hyperdev.space and deploy it to Heroku.",   "Objective: Build a full stack JavaScript app that is functionally similar to this: https://midnight-dust.glitch.me and deploy it to Heroku.",  "Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects.", "Here are the specific user stories you should implement for this project:", "User Story: As an unauthenticated user, I can login with Twitter.",


"type": "basejump", "challengeType": 4, "descriptionEs": [  "Objetivo: Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: https://midnight-dust.hyperdev.space/ y despliégalo en Heroku.",   "Objetivo: Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: https://midnight-dust.glitch.me/ y despliégalo en Heroku.",  "Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects.", "Estas son las Historias de usuario que debes satisfacer para este Basejump:", "Historia de usuario: Como usuario autenticado, puedo acceder a mi cuenta con Twitter.",


] }, {  "_id": "5900f3831000cf542c50fe95", "challengeType": 5, "type": "bonfire", "title": "Problem 22: Names scores", "tests": [ "assert.strictEqual(euler22(), 871198282, 'message: euler22() should return 871198282.');" ], "solutions": [], "translations": {}, "challengeSeed": [ "function euler22() {", "  // Good luck!", "  return true;", "}", "", "euler22();" ], "description": [ "Using names.txt (right click and 'Save Link/Target As...'), a 46K text file containing over five-thousand first names, begin by sorting it into alphabetical order. Then working out the alphabetical value for each name, multiply this value by its alphabetical position in the list to obtain a name score.", "For example, when the list is sorted into alphabetical order, COLIN, which is worth 3 + 15 + 12 + 9 + 14 = 53, is the 938th name in the list. So, COLIN would obtain a score of 938 × 53 = 49714.", "What is the total of all the name scores in the file?" ] }, {  "_id": "5900f3831000cf542c50fe96", "challengeType": 5, "type": "bonfire",


], "tests": [ "assert(code.match(/@each /g), 'message: Your code should use the @each directive.');",  "assert($('blue-bg').css('background-color') == 'rgb(0, 0, 255)', 'message: Your .blue-bg class should have a background-color of blue.');", "assert($('black-bg').css('background-color') == 'rgb(0, 0, 0)', 'message: Your .black-bg class should have a background-color of black.');", "assert($('red-bg').css('background-color') == 'rgb(255, 0, 0)', 'message: Your .red-bg class should have a background-color of red.');"   "assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)', 'message: Your .blue-bg class should have a background-color of blue.');", "assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)', 'message: Your .black-bg class should have a background-color of black.');", "assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)', 'message: Your .red-bg class should have a background-color of red.');"  ], "solutions": [], "hints": [],


"
let catStr = "cat";
let batStr = "bat";
let matStr = "mat";
let bgRegex = /[a-e]at/;
catStr.match(bgRegex); // Returns ["cat"]
batStr.match(bgRegex); // Returns ["bat"]
matStr.match(bgRegex); // Returns null
", "
", "Match all the letters in the string quoteSample.",  "Note
Be sure to match both upper- and lowercase vowels."   "Note
Be sure to match both upper- and lowercase letters."  ], "challengeSeed": [ "let quoteSample = "The quick brown fox jumps over the lazy dog.";",


import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; <ins> import { Button } from 'react-bootstrap'; </ins> import { updateMyProfileUI } from '../redux'; import { userSelector } from '../../../redux'; <del> import { FullWidthRow } from '../../../helperComponents'; </del> <ins> import { FullWidthRow, Spacer } from '../../../helperComponents'; </ins> import SectionHeader from './SectionHeader.jsx'; import ToggleSetting from './ToggleSetting.jsx'; const mapStateToProps = createSelector( userSelector, <del> ({ profileUI = {} }) => ({ ...profileUI </del> <ins> user => ({ ...user.profileUI, user </ins> }) );


showPoints: PropTypes.bool, showPortfolio: PropTypes.bool, showTimeLine: PropTypes.bool, <del> updateMyProfileUI: PropTypes.func.isRequired </del> <ins> updateMyProfileUI: PropTypes.func.isRequired, user: PropTypes.object </ins> }; function PrivacySettings(props) {


showPoints, showPortfolio, showTimeLine, <del> updateMyProfileUI </del> <ins> updateMyProfileUI, user </ins> } = props; const toggleFlag = flag => () => updateMyProfileUI({ profileUI: { [flag]: !props[flag] } });


<SectionHeader>Privacy Settings</SectionHeader> <FullWidthRow>
  The settings in this section enable you to control what is show on{' '}   The settings in this section enable you to control what is shown on{' '}  your freeCodeCamp public portfolio.

There is also a button to see what data we hold on your account
  <ToggleSetting action='Make my profile completely private' explain={


toggleFlag={ toggleFlag('showTimeLine') } /> </FullWidthRow> <ins> <FullWidthRow> <Spacer /> <Button block={true} bsSize='lg' bsStyle='primary' download={`${user.username}.json`} href={ `data:text/json;charset=utf-8,${ encodeURIComponent(JSON.stringify(user)) }` } > Download all your data </Button> </FullWidthRow> </ins> </div> ); }


"contents": [ "// Example", "var ourArray = ["Stimpson", "J", ["cat"]];", <del> "removedFromOurArray = ourArray.shift();", </del> <ins> "var removedFromOurArray = ourArray.shift();", </ins> "// removedFromOurArray now equals "Stimpson" and ourArray now equals ["J", ["cat"]].", "", "// Setup",


} } ] <del> } </del>  No newline at end of file <ins> } </ins>


if (user[certType]) { const { completedChallenges = [] } = user; <del> const { completedDate = new Date() } = _.find(completedChallenges, ({ id }) => certId === id) || {}; </del> <ins> const certChallenge = _.find( completedChallenges, ({ id }) => certId === id ); let { completedDate = new Date() } = certChallenge || {}; // the challange id has been rotated for isDataVisCert // so we need to check for id 561add10cb82ac38a17513b3 if (certType === 'isDataVisCert' && !certChallenge) { console.log('olderId'); let oldDataVisIdChall = _.find( completedChallenges, ({ id }) => '561add10cb82ac38a17513b3' === id ); if (oldDataVisIdChall) { completedDate = oldDataVisIdChall.completedDate || completedDate; } } </ins> const { username, name } = user; return res.json({


} pairedWith = pairedWith.pop(); <del> //debug('This is paired with', Object.keys(pairedWith)); debug('This is paired with's uncompleted bonfires array', pairedWith.uncompletedBonfires); </del> index = pairedWith.uncompletedBonfires.indexOf(bonfireHash); if (index > -1) { pairedWith.uncompletedBonfires.splice(index,1)


}; exports.returnNextBonfire = function(req, res, next) { <del> // TODO //var tempUser = false; </del> if (!req.user) { <del> res.redirect('bonfires/meet-bonfire'); //tempUser = true; //req.user = new User(); </del> <ins> return res.redirect('bonfires/meet-bonfire'); </ins> } <del> var currentTime = parseInt(+new Date() / 1000) </del> <ins> var currentTime = parseInt(+new Date() / 1000); </ins> if (currentTime - req.user.lastContentSync > 86400) { req.user.lastContentSync = currentTime; <del> var completed = req.user.completedBonfires.map(function(elem) { </del> <ins> var completed = req.user.completedBonfires.map(function (elem) { </ins> return elem._id; }); <del> req.user.uncompletedBonfires = resources.allBonfireIds().filter(function(elem) { if (completed.indexOf(elem) === -1) { return elem; } </del> <ins> req.user.uncompletedBonfires = resources.allBonfireIds().filter(function (elem) { if (completed.indexOf(elem) === -1) { return elem; } </ins> }); req.user.save(); }


completedWith: null, title: bonfire[bonfireNumber].name, name: bonfire[bonfireNumber].name, <del> difficulty: +bonfire[bonfireNumber].difficulty, </del> <ins> difficulty: Math.floor(+bonfire[bonfireNumber].difficulty), </ins> brief: bonfire[bonfireNumber].description[0], details: bonfire[bonfireNumber].description.slice(1), tests: bonfire[bonfireNumber].tests,


res.render('bonfire/show', { completedWith: null, title: bonfireName, <ins> name: bonfireName, </ins> difficulty: +bonfireDifficulty, brief: bonfireDescription[0], details: bonfireDescription.slice(1),


"challengeEntryPoint": "meetBonfire("You can do this!");" }, { <ins> "_id": "a202eed8fc186c8434cb6d61", "name": "Reverse a String", "difficulty": "1.01", "tests": [ "expect(reverseString('hello')).to.be.a('String');", "expect(reverseString('hello')).to.equal('olleh');", "expect(reverseString('Howdy')).to.equal('ydwoH');", "expect(reverseString('Greetings from Earth')).to.equal('htraE morf sgniteerG');" ], "description": [ "Reverse the provided string.", "You may need to turn the string into an array before you can reverse it.", "Your result must be a string." ], "challengeEntryPoint": "reverseString('hello');", "challengeSeed": "function reverseString(str) {n  return str;rn}" }, { "_id": "a302f7aae1aa3152a5b413bc", "name": "Factorialize a Number", "tests": [ "expect(factorialize(5)).to.be.a("Number");", "expect(factorialize(5)).to.equal(120);", "expect(factorialize(10)).to.equal(3628800);", "expect(factorialize(20)).to.equal(2432902008176640000);" ], "difficulty": "1.02", "description": [ "Return the factorial of the provided integer.", "If the integer is represented with the letter n, a factorial is the product of all positive integers less than or equal to n.", "Factorials are often represented with the shorthand notation n!", "For example: 5! = 1 * 2 * 3 * 4 * 5 = 120f" ], "challengeSeed": "function factorialize(num) {n  return  num;rn}", "challengeEntryPoint": "factorialize(5);" }, { </ins> "_id" : "aaa48de84e1ecc7c742e1124", "name": "Check for Palindromes", <del> "difficulty": "1", </del> <ins> "difficulty": "1.03", </ins> "description": [ "Return 'true' if a given string is a palindrome.", "A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation and case.",


"challengeEntryPoint": "palindrome("eye");" }, { <ins> "_id": "a26cbbe9ad8655a977e1ceb5", "name": "Find the Longest Word in a String", "difficulty": "1.04", "description": [ "Return the length of the longest word in the provided sentence.", "Your response should be a number." ], "challengeEntryPoint": "findLongestWord('The quick brown fox jumped over the lazy dog');", "challengeSeed": "function findLongestWord(str) {n  return str.length;rn}", "tests": [ "expect(findLongestWord('The quick brown fox jumped over the lazy dog')).to.be.a('Number');", "expect(findLongestWord('The quick brown fox jumped over the lazy dog')).to.equal(6);", "expect(findLongestWord('May the force be with you')).to.equal(5);", "expect(findLongestWord('Google do a barrel roll')).to.equal(6);", "expect(findLongestWord('What is the average airspeed velocity of an unladen swallow')).to.equal(8);" ] }, { "_id": "ab6137d4e35944e21037b769", "name": "Title Case a Sentence", "difficulty": "1.05", "description": [ "Return the provided string with the first letter of each word capitalized.", "For the purpose of this exercise, you should also capitalize connecting words like 'the' and 'of'." ], "challengeEntryPoint": "titleCase("I'm a little tea pot")", "challengeSeed": "function titleCase(str) {n  return str;rn}", "tests": [ "expect(titleCase("I'm a little tea pot")).to.be.a('String');", "expect(titleCase("I'm a little tea pot")).to.equal("I'm A Little Tea Pot");", "expect(titleCase("sHoRt AnD sToUt")).to.equal("Short And Stout");", "expect(titleCase("HERE IS MY  HANDLE HERE IS MY SPOUT")).to.equal("Here Is My  Handle Here Is My Spout");" ] }, { "_id": "a789b3483989747d63b0e427", "name": "Return Largest Numbers in Arrays", "difficulty": "1.06", "description": [ "Return an array consisting of the largest numbers in the provided array. The array will contain 4 sub-arrays.", "Remember, you an iterate through an array with a simple for loop, and access each member with array syntax arr[i] .", "If you are writing your own Chai.js tests, be sure to use a deep equal statement instead of an equal statement when comparing arrays." ], "challengeEntryPoint": "largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);", "challengeSeed": "function largestOfFour(arr) {n  // You can do this!rn  return arr;rn}", "tests": [ "expect(largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])).to.be.a('array');", "(largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])).should.equals([5,27,39,1001]);", "assert(largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]]) === [9,35,97,1000000]);" ] }, { "_id": "a3566b1109230028080c9345", "name": "Sum All Numbers in a Range", "difficulty": "2.00", "description": [ "We'll pass you an array of two numbers. Return the sum those two numbers and all numbers between them.", "The lowest number will not always come first." ], "challengeEntryPoint": "sumAll([1, 4]);", "challengeSeed": "function sumAll(arr) {n  return(1);rn}", "tests": [ "expect(sumAll([1, 4])).to.be.a('Number');", "expect(sumAll([1, 4])).to.equal(10);", "expect(sumAll([4, 1])).to.equal(10);", "expect(sumAll([5, 10])).to.equal(45);", "expect(sumAll([10, 5])).to.equal(45);" ] }, { "_id": "a5229172f011153519423690", "name": "Sum All Odd Fibonacci Numbers", "difficulty": "2.01", "description": [ "Return the sum of all odd fibonacci numbers up to and including the passed number.", "Starting from 1, the first few numbers of a Fibonacci sequence are 1, 2, 3, 5 and 8, and each subsequent number is the sum of the previous two numbers." ], "challengeEntryPoint": "sumFibs(1000);", "challengeSeed": "function sumFibs(num) {n  return num;rn}", "tests": [ "expect(sumFibs(1)).to.be.a('number');", "expect(sumFibs(1000)).to.equal(3382);", "expect(sumFibs(4000000)).to.equal(10316619);", "expect(sumFibs(4)).to.equal(10);" ] }, { "_id": "a3bfc1673c0526e06d3ac698", "name": "Sum All Primes", "difficulty": "2.10", "description": [ "Sum all the prime numbers up to and including the provided number.", "A prime number is defined as having only two divisors, 1 and itself. For example, 2 is a prime number because it's only divisible by 1 and 2. 1 isn't a prime number, because it's only divisible  by itself.", "The provided number may not be a prime." ], "challengeEntryPoint": "sumPrimes(10);", "challengeSeed": "function sumPrimes(num) {n  return num;rn}", "tests": [ "expect(sumPrimes(10)).to.be.a('number');", "expect(sumPrimes(10)).to.equal(27);", "expect(sumPrimes(977)).to.equal(73156);" ] }, { "_id": "ae9defd7acaf69703ab432ea", "name": "Smallest Common Multiple", "difficulty": "2.11", "description": [ "Find the smallest number that evenly divides all numbers in the provided range.", "The range will be an array of two numbers that will not necessarily be in numerical order." ], "challengeEntryPoint": "smallestCommons([1,5]);", "challengeSeed": "function smallestCommons(arr) {n  return arr;rn}rn", "tests": [ "expect(smallestCommons([1,5])).to.be.a('number');", "expect(smallestCommons([1,5])).to.equal(60);", "expect(smallestCommons([5,1])).to.equal(60);", "(smallestCommons([1,13])).should.equal(360360);" ] }, { </ins> "_id" : "aff0395860f5d3034dc0bfc9", "name": "Validate US Telephone Numbers", <del> "difficulty": "3", </del> <ins> "difficulty": "3.10", </ins> "description": [ "Return true if the passed string is a valid US phone number", "The user may fill out the form field any way they choose as long as it is a valid US number. The following are all valid formats for US numbers:",


"challengeEntryPoint": "telephoneCheck("555-555-5555");" }, { <del> "_id": "a202eed8fc186c8434cb6d61", "name": "Reverse a String", "difficulty": "1", "tests": [ "expect(reverseString('hello')).to.be.a('String');", "expect(reverseString('hello')).to.equal('olleh');", "expect(reverseString('Howdy')).to.equal('ydwoH');", "expect(reverseString('Greetings from Earth')).to.equal('htraE morf sgniteerG');" ], </del> <ins> "_id": "556138aff60341a09ed6c480", "name": "Inventory Update", "difficulty": "3.11", </ins> "description": [ <del> "Reverse the provided string.", "You may need to turn the string into an array before you can reverse it.", "Your result must be a string." </del> <ins> "Compare and update inventory stored in a 2d array against a second 2d array of a fresh delivery. Update current inventory item quantity, and if an item cannot be found, add the new item and quantity into the inventory array in alphabetical order." </ins> ], <del> "challengeEntryPoint": "reverseString('hello');", "challengeSeed": "function reverseString(str) {n  return str;rn}" }, { "_id": "a302f7aae1aa3152a5b413bc", "name": "Factorialize a Number", </del> <ins> "challengeEntryPoint": "// Example inventory listsrnvar curInv = [rn    [21, 'Bowling Ball'],rn    [2, 'Dirty Sock'],rn    [1, 'Hair pin'],rn    [5, 'Microphone']rn];rnrnvar newInv = [rn    [2, 'Hair Pin'],rn    [3, 'Half-Eaten Apple'],rn    [67, 'Bowling Ball'],rn    [7, 'Toothpaste']rn];rnrninventory(curInv, newInv);", "challengeSeed": "function inventory(arr1, arr2) {n    // All inventory must be accounted for or you're fired!rn    return arr1;rn}", </ins> "tests": [ <del> "expect(factorialize(5)).to.be.a("Number");", "expect(factorialize(5)).to.equal(120);", "expect(factorialize(10)).to.equal(3628800);", "expect(factorialize(20)).to.equal(2432902008176640000);" ], "difficulty": "1", "description": [ "Return the factorial of the provided integer.", "If the integer is represented with the letter n, a factorial is the product of all positive integers less than or equal to n.", "Factorials are often represented with the shorthand notation n!", "For example: 5! = 1 * 2 * 3 * 4 * 5 = 120f" ], "challengeSeed": "function factorialize(num) {n  return  num;rn}", "challengeEntryPoint": "factorialize(5);" }, { "_id": "a26cbbe9ad8655a977e1ceb5", "name": "Find the Longest Word in a String", "difficulty": "1", "description": [ "Return the length of the longest word in the provided sentence.", "Your response should be a number." ], "challengeEntryPoint": "findLongestWord('The quick brown fox jumped over the lazy dog');", "challengeSeed": "function findLongestWord(str) {n  return str.length;rn}", "tests": [ "expect(findLongestWord('The quick brown fox jumped over the lazy dog')).to.be.a('Number');", "expect(findLongestWord('The quick brown fox jumped over the lazy dog')).to.equal(6);", "expect(findLongestWord('May the force be with you')).to.equal(5);", "expect(findLongestWord('Google do a barrel roll')).to.equal(6);", "expect(findLongestWord('What is the average airspeed velocity of an unladen swallow')).to.equal(8);" ] }, { "_id": "a3566b1109230028080c9345", "name": "Sum All Numbers in a Range", "difficulty": "2", "description": [ "We'll pass you an array of two numbers. Return the sum those two numbers and all numbers between them.", "The lowest number will not always come first." ], "challengeEntryPoint": "sumAll([1, 4]);", "challengeSeed": "function sumAll(arr) {n  return(1);rn}", "tests": [ "expect(sumAll([1, 4])).to.be.a('Number');", "expect(sumAll([1, 4])).to.equal(10);", "expect(sumAll([4, 1])).to.equal(10);", "expect(sumAll([5, 10])).to.equal(45);", "expect(sumAll([10, 5])).to.equal(45);" ] }, { "_id": "ab6137d4e35944e21037b769", "name": "Title Case a Sentence", "difficulty": "1", "description": [ "Return the provided string with the first letter of each word capitalized.", "For the purpose of this exercise, you should also capitalize connecting words like 'the' and 'of'." ], "challengeEntryPoint": "titleCase("I'm a little tea pot")", "challengeSeed": "function titleCase(str) {n  return str;rn}", "tests": [ "expect(titleCase("I'm a little tea pot")).to.be.a('String');", "expect(titleCase("I'm a little tea pot")).to.equal("I'm A Little Tea Pot");", "expect(titleCase("sHoRt AnD sToUt")).to.equal("Short And Stout");", "expect(titleCase("HERE IS MY  HANDLE HERE IS MY SPOUT")).to.equal("Here Is My  Handle Here Is My Spout");" </del> <ins> "expect(inventory([[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair pin'], [5, 'Microphone']], [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']])).to.be.a('array');", "assert.equal(inventory([[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair pin'], [5, 'Microphone']], [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']]).length, 6);", "assert.deepEqual(inventory([[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair pin'], [5, 'Microphone']], [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']]), [[88, 'Bowling Ball'], [2, 'Dirty Sock'], [3, 'Hair pin'], [3, 'Half-Eaten Apple'], [5, 'Microphone'], [7, 'Toothpaste']]);", "assert.deepEqual(inventory([[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair pin'], [5, 'Microphone']], []), [[21, 'Bowling Ball'], [2, 'Dirty Sock'], [1, 'Hair pin'], [5, 'Microphone']]);", "assert.deepEqual(inventory([], [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']]), [[2, 'Hair Pin'], [3, 'Half-Eaten Apple'], [67, 'Bowling Ball'], [7, 'Toothpaste']]);", "assert.deepEqual(inventory([[0, 'Bowling Ball'], [0, 'Dirty Sock'], [0, 'Hair pin'], [0, 'Microphone']], [[1, 'Hair Pin'], [1, 'Half-Eaten Apple'], [1, 'Bowling Ball'], [1, 'Toothpaste']]), [[1, 'Bowling Ball'], [1, 'Dirty Sock'], [1, 'Hair pin'], [1, 'Half-Eaten Apple'], [1, 'Microphone'], [1, 'Toothpaste']]);" </ins> ] } ]


.form-group label.col-sm-2.control-label.wrappable(for='description') description: .col-sm-10 <del> textarea#description.form-control(name="description", placeholder="Separate sentences by exactly one space only. Do not add in line breaks.") </del> <ins> textarea#description.form-control(name="description", rows=5, placeholder="Separate sentences by exactly one space only. Do not add in line breaks.") </ins> .form-group label.col-sm-2.control-label.wrappable(for='challengeSeed') challengeSeed: .col-sm-10


## Description
  In Computer Science a <dfn>queue</dfn> is an abstract <dfn>Data Structure</dfn> where items are kept in order. New items can be added at the back of the queue and old items are taken off from the front of the queue.   In Computer Science a <dfn>queue</dfn> is an abstract <dfn>Data Structure</dfn> where items are kept in order. New items can be added at the back of the queue and old items are taken off from the front of the queue.  Write a function nextInLine which takes an array (arr) and a number (item) as arguments. Add the number to the end of the array, then remove the first element of the array. The nextInLine function should then return the element that was removed.


User Story #4: When I enter GitHub flavored markdown into the #editor element, the text is rendered as HTML in the #preview element as I type (HINT: You don't need to parse Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked). User Story #5: When my markdown previewer first loads, the default text in the #editor field should contain valid markdown that represents at least one of each of the following elements: a header (H1 size), a sub header (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text. User Story #6: When my markdown previewer first loads, the default markdown in the #editor field should be rendered as HTML in the #preview element.  Optional Bonus (you do not need to make this test pass): When I click a link rendered by my markdown previewer, the link is opened up in a new tab (HINT: read the Marked.js docs for this one!).  Optional Bonus (you do not need to make this test pass): My markdown previewer interprets carriage returns and renders them as br (line break) elements. You can build your project by forking this CodePen pen. Or you can use this CDN link to run the tests in any environment you like: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Once you're done, submit the URL to your working project with all its tests passing.


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


```yml tests: - text: Traditional function expression should not be used.  testString: getUserInput => assert(!getUserInput('index').match(/function/));   testString: getUserInput => assert(!removeJSComments(code).match(/function/));  - text: setGear should be a declarative function.  testString: getUserInput => assert(typeof bicycle.setGear === 'function' && getUserInput('index').match(/setGears*(.+)s*{/));   testString: assert(typeof bicycle.setGear === 'function' && code.match(/setGears*(.+)s*{/));  - text: bicycle.setGear(48) should change the gear value to 48. testString: assert((new bicycle.setGear(48)).gear === 48);


</div> <ins> ### After Test <div id='js-teardown'> ```js const removeJSComments = str => str.replace(//*[sS]*?*/|//.*$/gm, ''); ``` </div> </ins> </section> ## Solution


## ![:rotating_light:](https://forum.freecodecamp.com/images/emoji/emoji_one/rotating_light.png?v=3 ":rotating_light:") Intermediate Code Solution: ```javascript <del> rating = watchList.map( (item) => ({"title":item["Title"], "rating":item["imdbRating"]}) ); </del> <ins> const rating = watchList.map(item => ({title: item["Title"], rating: item["imdbRating"]})); </ins> ``` ### Code Explanation: Using ES6 notation, each item in array is processed to extract title and rating.


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


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


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


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


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


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
  To create a CSS Variable, you just need to give it a name with two dashes in front of it and assign it a value like this:   To create a CSS variable, you just need to give it a name with two dashes in front of it and assign it a value like this:  ```css --penguin-skin: gray;


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


--- title: Caesars Cipher ---  ![:triangular_flag_on_post:](https://forum.freecodecamp.com/images/emoji/emoji_one/triangular_flag_on_post.png?v=3 ":triangular_flag_on_post:") Remember to use **`Read-Search-Ask`** if you get stuck. Try to pair program ![:busts_in_silhouette:](https://forum.freecodecamp.com/images/emoji/emoji_one/busts_in_silhouette.png?v=3 ":busts_in_silhouette:") and write your own code ![:pencil:](https://forum.freecodecamp.com/images/emoji/emoji_one/pencil.png?v=3 ":pencil:") ### ![:checkered_flag:](https://forum.freecodecamp.com/images/emoji/emoji_one/checkered_flag.png?v=3 ":checkered_flag:") Problem Explanation: *   You need to write a function, which will take a string encoded with _Caesar cipher_ as a parameter and decode it. *   The one used here is ROT13 where the value of the letter is shifted by 13 places. e.g. 'A' ![:left_right_arrow:](https://forum.freecodecamp.com/images/emoji/emoji_one/left_right_arrow.png?v=3 ":left_right_arrow:") 'N', 'T' ![:left_right_arrow:](https://forum.freecodecamp.com/images/emoji/emoji_one/left_right_arrow.png?v=3 ":left_right_arrow:") 'G'. *   You have to shift it back 13 positions, such that 'N' ![:left_right_arrow:](https://forum.freecodecamp.com/images/emoji/emoji_one/left_right_arrow.png?v=3 ":left_right_arrow:") 'A'. #### Relevant Links *   String.prototype.charCodeAt *   String.fromCharCode  ## ![:speech_balloon:](https://forum.freecodecamp.com/images/emoji/emoji_one/speech_balloon.png?v=3 ":speech_balloon:") Hint: 1


## ![:beginner:](https://forum.freecodecamp.com/images/emoji/emoji_one/beginner.png?v=3 ":beginner:") Basic Code Solution: ```javascript <del> function rot13(str) { // Split str into a character array return str.split('') // Iterate over each character in the array .map.call(str, function(char) { // Convert char to a character code x = char.charCodeAt(0); // Checks if character lies between A-Z if (x < 65 || x > 90) { return String.fromCharCode(x);  // Return un-converted character } //N = ASCII 78, if the character code is less than 78, shift forward 13 places else if (x < 78) { return String.fromCharCode(x + 13); } // Otherwise shift the character 13 places backward return String.fromCharCode(x - 13); }).join('');  // Rejoin the array into a string } </del> <ins> function rot13(str) { // Split str into a character array return str.split('') // Iterate over each character in the array .map.call(str, function(char) { // Convert char to a character code var x = char.charCodeAt(0); // Checks if character lies between A-Z if (x < 65 || x > 90) { return String.fromCharCode(x);  // Return un-converted character } //N = ASCII 78, if the character code is less than 78, shift forward 13 places else if (x < 78) { return String.fromCharCode(x + 13); } // Otherwise shift the character 13 places backward return String.fromCharCode(x - 13); }).join('');  // Rejoin the array into a string } </ins> ```  ![:rocket:](https://forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=3 ":rocket:") Run Code  ### Code Explanation:


#### Relevant Links  *   Array.prototype.map *   String.prototype.split *   Array.prototype.join   *   Array.prototype.map *   String.prototype.split *   Array.prototype.join  ## ![:sunflower:](https://forum.freecodecamp.com/images/emoji/emoji_one/sunflower.png?v=3 ":sunflower:") Intermediate Code Solution: ```javascript <del> // Solution with Regular expression and Array of ASCII character codes function rot13(str) { var rotCharArray = []; var regEx = /[A-Z]/ ; str = str.split(""); for (var x in str) { if (regEx.test(str[x])) { // A more general approach // possible because of modular arithmetic // and cyclic nature of rot13 transform rotCharArray.push((str[x].charCodeAt() - 65 + 13) % 26 + 65); } else { rotCharArray.push(str[x].charCodeAt()); } } str = String.fromCharCode.apply(String, rotCharArray); return str; </del> <ins> // Solution with Regular expression and Array of ASCII character codes function rot13(str) { var rotCharArray = []; var regEx = /[A-Z]/; str = str.split(""); for (var x in str) { if (regEx.test(str[x])) { // A more general approach // possible because of modular arithmetic // and cyclic nature of rot13 transform rotCharArray.push((str[x].charCodeAt() - 65 + 13) % 26 + 65); } else { rotCharArray.push(str[x].charCodeAt()); </ins> } <ins> } str = String.fromCharCode.apply(String, rotCharArray); return str; } </ins> <del> // Change the inputs below to test rot13("LBH QVQ VG!"); </del> <ins> // Change the inputs below to test rot13("LBH QVQ VG!"); </ins> ``` ### Code Explanation:


*   Regex *   Regex.test  ![:rocket:](https://forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=3 ":rocket:") Run Code  ## ![:rotating_light:](https://forum.freecodecamp.com/images/emoji/emoji_one/rotating_light.png?v=3 ":rotating_light:") Advanced Code Solution: function rot13(str) { // LBH QVQ VG!