{ <del> "node": true </del> <ins> /* * ENVIRONMENTS * ================= */ // Define globals exposed by Node.js. "node": true, /* * ENFORCING OPTIONS * ================= */ // Force all variable names to use either camelCase style or UPPER_CASE // with underscores. "camelcase": true, // Prohibit use of == and != in favor of === and !==. "eqeqeq": true, // Suppress warnings about == null comparisons. "eqnull": true, // Enforce tab width of 2 spaces. "indent": 2, // Prohibit use of a variable before it is defined. "latedef": true, // Require capitalized names for constructor functions. "newcap": true, // Enforce use of single quotation marks for strings. "quotmark": "single", // Prohibit trailing whitespace. "trailing": true, // Prohibit use of explicitly undeclared variables. "undef": true, // Warn when variables are defined but never used. "unused": true, // Enforce line length to 80 characters "maxlen": 80 </ins> }


<ins> { /* * ENVIRONMENTS * ================= */ // Define globals exposed by modern browsers. "browser": true, // Define globals exposed by jQuery. "jquery": true, /* * ENFORCING OPTIONS * ================= */ // Force all variable names to use either camelCase style or UPPER_CASE // with underscores. "camelcase": true, // Prohibit use of == and != in favor of === and !==. "eqeqeq": true, // Suppress warnings about == null comparisons. "eqnull": true, // Enforce tab width of 2 spaces. "indent": 2, // Prohibit use of a variable before it is defined. "latedef": true, // Require capitalized names for constructor functions. "newcap": true, // Enforce use of single quotation marks for strings. "quotmark": "single", // Prohibit trailing whitespace. "trailing": true, // Prohibit use of explicitly undeclared variables. "undef": true, // Warn when variables are defined but never used. "unused": true, // Enforce line length to 80 characters "maxlen": 80, // Enforce placing 'use strict' at the top function scope "strict": true' } </ins>


وهي مقسمة إلى الفئات التالية: *   الأعداد الصحيحة <del> *   أرقام النقطة العائمة *   الشخصيات *   اكتب منطقي </del> <ins> *   الاعداد العشرية *   الرموز *   القيم المنطقية </ins> تفاصيل كل نوع من أنواع البيانات مذكورة أدناه: ## الأعداد الصحيحة: <del> هذه هي من أربعة أنواع: `byte` ، `short` ، `int` ، `long` . من المهم ملاحظة أن هذه القيم موجبة وسالبة. يتم تخزين الأعداد الصحيحة في جهاز الكمبيوتر باستخدام [مكمل 2](http://www.ele.uri.edu/courses/ele447/proj_pages/divid/twos.html) . ويتكون من قيم سلبية وإيجابية ولكن بصيغ مختلفة مثل `(-1 to -128)` أو `(0 to +127)` . يمكن أن يحتوى عدد صحيح غير موقعة على قيمة موجبة أكبر ، ولا توجد قيمة سالبة مثل `(0 to 255)` . على عكس C ++ لا يوجد عدد صحيح غير موقعة في Java. </del> <ins> هذه هي من أربعة أنواع: `byte` ، `short` ، `int` ، `long` . من المهم ملاحظة أن هذه القيم موجبة وسالبة. يتم تخزين الأعداد الصحيحة في جهاز الكمبيوتر باستخدام [مكمل 2](http://www.ele.uri.edu/courses/ele447/proj_pages/divid/twos.html) . ويتكون من قيم سالبة وموجبة ولكن بصيغ مختلفة مثل `(-1 to -128)` أو `(0 to +127)` . يمكن أن يحتوى عدد صحيح غير موقعة على قيمة موجبة أكبر ، ولا توجد قيمة سالبة مثل `(0 to 255)` . على عكس C ++ لا يوجد عدد صحيح غير موقعة في Java. </ins> <del> ### بايت: </del> <ins> ### بايت (byte): </ins> نوع البيانات بايت هو عدد صحيح مكمل 8 بت موقعة اثنين. <del> `Wrapper Class: Byte </del> <ins> `Wrapper Class (الفئة): Byte </ins> <del> Minimum value: -128 (-2^7) </del> <ins> Minimum value (القيمة الاصغر): -128 (-2^7) </ins> <del> Maximum value: 127 (2^7 -1) </del> <ins> Maximum value (القيمة القصوى): 127 (2^7 -1) </ins> <del> Default value: 0 </del> <ins> Default value (القيمة الافتراضية): 0 </ins> <del> Example: byte a = 10 , byte b = -50; </del> <ins> Example (مثال): byte a = 10 , byte b = -50; </ins> ` <del> ### قصيرة: </del> <ins> ### قصيرة (short): </ins> نوع البيانات القصير هو عدد صحيح مكمل من 16 بت موقعة اثنين. <del> `Wrapper Class: Short </del> <ins> `Wrapper Class (الفئة): Short </ins> <del> Minimum value: -32,768 (-2^15) </del> <ins> Minimum value (القيمة الصغرى): -32,768 (-2^15) </ins> <del> Maximum value: 32,767 (2^15 -1) </del> <ins> Maximum value (القيمة القصوى): 32,767 (2^15 -1) </ins> <del> Default value: 0. </del> <ins> Default value (القيمة الافتراضية): 0. </ins> <del> Example: short s = 10, short r = -1000; </del> <ins> Example (مثال): short s = 10, short r = -1000; </ins> ` <del> ### الباحث: </del> <ins> ### العدد الصحيح (integer): </ins> نوع البيانات IN هو عدد صحيح مكمل 32 بت موقعة اثنين. يتم استخدامه بشكل عام كنوع بيانات افتراضي للقيم المتكاملة إلا إذا كان هناك قلق حول الذاكرة. <del> `Wrapper Class: Integer </del> <ins> `Wrapper Class (الفئة): Integer </ins> <del> Minimum value: (-2^31) </del> <ins> Minimum value (القيمة الصغرى): (-2^31) </ins> <del> Maximum value: (2^31 -1) </del> <ins> Maximum value (القيمة القصوى): (2^31 -1) </ins> <del> The default value: 0. </del> <ins> The default value (القيمة الافتراضية): 0. </ins> <del> Example: int a = 50000, int b = -20 </del> <ins> Example (مثال): int a = 50000, int b = -20 </ins> ` <del> ### طويل: </del> <ins> ###  طويل (long): </ins> نوع بيانات طويل هو عدد صحيح مكمل 64 بت موقعة اثنين. <del> `Wrapper Class: Long </del> <ins> `Wrapper Class (الفئة): Long </ins> <del> Minimum value: (-2^63) </del> <ins> Minimum value (القيمة الصغرى): (-2^63) </ins> <del> Maximum value: (2^63 -1) </del> <ins> Maximum value (القيمة القصوى): (2^63 -1) </ins> <del> Default value: 0L. </del> <ins> Default value (القيمة الافتراضية): 0L. </ins> <del> Example: long a = 100000L, long b = -600000L; </del> <ins> Example (مثال): long a = 100000L, long b = -600000L; </ins> By default all integer type variable is "int". So long num=600851475143  will give an error. But it can be specified as long by appending the suffix L (or l) ` <del> ## نقطة عائمة: </del> <ins> ## اعداد عشرية: </ins> تسمى هذه أيضًا أرقامًا حقيقية وتستخدم للتعبيرات التي تتضمن دقة كسرية. هذه من نوعين: `float` ، `double` . يتم تجنب Float فعليًا في حالة البيانات الدقيقة مثل بيانات العملات أو الأبحاث. <del> ### تطفو: </del> <ins> ### تطفو (float): </ins> نوع بيانات عائم عبارة عن [نقطة عائمة IEEE 754](http://steve.hollasch.net/cgindex/coding/ieeefloat.html) ذات دقة واحدة 32 بت. <del> `Wrapper Class: Float </del> <ins> `Wrapper Class (الفئة): Float </ins> Float is mainly used to save memory in large arrays of floating point numbers. <ins> اساسا تستخدم لحفظ الذاكرة في المصفوفات المكونة من الارقام العشرية ذات دقة واحدة(float) </ins> <del> Default value: 0.0f. </del> <ins> Default value (القيمة الافتراضية): 0.0f. </ins> <del> Example: float f1 = 24.5f; </del> <ins> Example (مثال): float f1 = 24.5f; The default data type of floating-point number is double. So float f = 24.5 will introduce an error. نوع القيمة الافتراضية للارقام العشرية ذات دقة واحدة هو مزدوج. مثال: float f = 24.5 ستظهر خطا للمستخدم However, we can append the suffix F (or f) to designate the data type as float. لكن, بامكاننا استخدام F(or f) لتعيين توع البيانات كرقم عشري ذات دقة واحدة (float) </ins> <del> The default data type of floating-point number is double. So float f = 24.5 will introduce an error. However, we can append the suffix F (or f) to designate the data type as float. ` ### مزدوج: </del> <ins> ### مزدوج (double): </ins> نوع بيانات مزدوج هو [نقطة عائم IEEE 754](http://steve.hollasch.net/cgindex/coding/ieeefloat.html) مزدوجة الدقة 64 بت. عادةً ما يكون نوع البيانات هذا هو الخيار الافتراضي. يجب عدم استخدام نوع البيانات هذا مطلقًا للقيم الدقيقة ، مثل العملة.


``` 10198442 <del> ``` </del>  No newline at end of file <ins> ``` </ins>


## Byzantine Fault Tolerance Imagine the scenario where there is an empire and there are three generals with their respective armies at different positions. All of them must attack in order to win the fight or they can choose to retreat. Their only means of communications are through pigeon posts. But there is a problem, the generals can't trust each other or ensure that the message has not been corrupted along the way. How do they solve this problem? Blockchain essentially does so by listening to information broadcasted by other people, reaching to a consensus of which information is deemed true. As such, this model asssumes that the amount of "traitors" do not exceed more than 1/3 of the entire network. <ins> ## Modern Use Cases of Blockchain - Asset Tokenization : Using blockchain technology, previously illiquid assets can now be converted into its tokenized form and cheaply and efficiently fractionalized, traded and settled on chain (rather than go through the lengthy process of clearing and settlement process through third parties like clearing houses) - Supply Chain Management : Blockchains allow multiple parties to access a database to act as the single source of truth. Recorded transactions are immutable, are append only and provide a time stamped audit trail. - Digital Identity : A self sovereign ID can be used to verify identity without needing an individual to produce numerous documents and paperwork each time they need their identity verified. This could be done with a single key that can be matched against an immutable ledger. The digital ID can also collect other online information about a user’s identity like social security information, medical records and social media credentials and have that stored securely on the blockchain. - Energy Market : Blockchain technology can enable the smart metering of electricity generated through an individual’s solar panels to be recorded, traded and settled on a ledger. - Healthcare : Using blockchain technology to record patient information on a distributed ledger can allow different stakeholders conditional access to a single source of truth where each interaction with a patient’s health data can be recorded on a ledger as a transaction with a time stamped audit trail. </ins> ## Issues Whilst blockchain technology is undoubtedly elegant, there are several problems that its presence brings, the main one being use my malicious third parties. Due to the extremely secure nature of blockchain, its technologies are often used by criminals to carry out transactions, which are impossible for governments to track.


"description": [ "Write a function that splits an array (first argument) into groups the length of size (second argument) and returns them as a multidimensional array." ], <del> "challengeSeed": "function chunk(arr, size) {n  // Break it up.rn  return arr;rn}nnchunk((['a', 'b', 'c', 'd'], 2));", </del> <ins> "challengeSeed": "function chunk(arr, size) {n  // Break it up.rn  return arr;rn}nnchunk(['a', 'b', 'c', 'd'], 2);", </ins> "tests": [ "assert.deepEqual(chunk(['a', 'b', 'c', 'd'], 2), [['a', 'b'], ['c', 'd']], 'should return chunked arrays');", "assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]], 'should return chunked arrays');",


"description": [ "Return the remaining elements of an array after chopping off n elements from the head." ], <del> "challengeSeed": "function slasher(arr) {n  // it doesn't allways pay to be firstrn  return arr;rn}nnslasher([1, 2, 3], 2);", </del> <ins> "challengeSeed": "function slasher(arr, howMany) {n  // it doesn't allways pay to be firstrn  return arr;rn}nnslasher([1, 2, 3], 2);", </ins> "tests": [ "assert.deepEqual(slasher([1, 2, 3], 2), [3], 'should drop the first two elements');", "assert.deepEqual(slasher([1, 2, 3], 0), [1, 2, 3], 'should return all elements when n < 1');",


] }, { <ins> "_id":"a8e512fbe388ac2f9198f0fa", "name":"Where art thou", "difficulty":"1.55", "description":[ "Make a function that looks through a list (first argument) and returns an array of all objects that have equivalent property values (second argument)." ], "challengeEntryPoint":"where([{ first: 'Romeo', last: 'Montague' }, { first: 'Mercutio', last: null }, { first: 'Tybalt', last: 'Capulet' }], { last: 'Capulet' });", "challengeSeed":"function where(collection, source) {n  var arr = [];rn  // What's in a name?rn  return arr;rn}", "tests":[ "assert.deepEqual(where([{ first: 'Romeo', last: 'Montague' }, { first: 'Mercutio', last: null }, { first: 'Tybalt', last: 'Capulet' }], { last: 'Capulet' }), [{ first: 'Tybalt', last: 'Capulet' }], 'should return an array of objects');", "assert.deepEqual(where([{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], { 'a': 1 }), [{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], 'should return with multiples');" ] }, { </ins> "_id":"a39963a4c10bc8b4d4f06d7e", "name":"Seek and Destroy", "difficulty":"1.60",


"name":"Seek and Destroy", "difficulty":"1.60", "description":[ <del> "Remove all values (last argument(s)) from an array (first argument) and return as a new array." </del> <ins> "You will be provided with an initial array (the first argument in the destroyer function), followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments." </ins> ], "challengeSeed": "function destroyer(arr) {n  // Remove all the valuesrn  return arr;rn}nndestroyer([1, 2, 3, 1, 2, 3], 2, 3);", "tests": [ "assert.deepEqual(destroyer([1, 2, 3, 1, 2, 3], 2, 3), [1, 1], 'should remove correct values from an array');", "assert.deepEqual(destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3), [1, 5, 1], 'should remove correct values from an array');" ], <del> "MDNlinks" : ["Array.filter()"] </del> <ins> "MDNlinks" : ["Arguments object","Array.filter()"] </ins> }, { "_id": "a24c1a4622e3c05097f71d67",


_ = require('lodash'), fs = require('fs'), <del> constantStrings = require('constantStrings.json'), </del> <ins> constantStrings = require('./constantStrings.json'), </ins> User = require('../models/User'), Challenge = require('./../models/Challenge'), Story = require('./../models/Story'),


<del> var moment = require('moment'), </del> <ins> /* eslint-disable no-catch-shadow, no-unused-vars */ var R = require('ramda'), debug = require('debug')('freecc:cntr:story'), Story = require('./../models/Story'), Comment = require('./../models/Comment'), User = require('./../models/User'), moment = require('moment'), resources = require('./resources'), </ins> mongodb = require('mongodb'), <del> nodemailer = require('nodemailer'), sanitizeHtml = require('sanitize-html'), </del> MongoClient = mongodb.MongoClient, <del> resources = require('./resources'), </del> secrets = require('../config/secrets'), <del> Story = require('./../models/Story'), Comment = require('./../models/Comment'), User = require('./../models/User'); </del> <ins> nodemailer = require('nodemailer'), sanitizeHtml = require('sanitize-html'); </ins> function hotRank(timeValue, rank) { /*


); story.markModified('rank'); story.save(); <del> User.find({ '_id': story.author.userId }, function(err, user) { </del> <ins> User.findOne({'_id': story.author.userId}, function(err, user) { </ins> if (err) { return next(err); } <del> user = user.pop(); </del> user.progressTimestamps.push(Date.now() || 0); <del> user.save(function (err) { req.user.save(function (err) { </del> <ins> user.save(function (err, user) { req.user.save(function (err, user) { </ins> if (err) { return next(err); }


if (link.search(/^https?:///g) === -1) { link = 'http://' + link; } <del> Story.count( { storyLink: new RegExp('^' + storyLink + '(?: [0-9]+)?$', 'i') }, function (err, storyCount) { if (err) { return res.status(500); } </del> <ins> Story.count({ storyLink: new RegExp('^' + storyLink + '(?: [0-9]+)?$', 'i')}, function (err, storyCount) { if (err) { return res.status(500); } </ins> <del> // if duplicate storyLink add unique number storyLink = (storyCount === 0) ? storyLink : storyLink + ' ' + storyCount; </del> <ins> // if duplicate storyLink add unique number storyLink = (storyCount === 0) ? storyLink : storyLink + ' ' + storyCount; </ins> <del> var link = data.link; if (link.search(/^https?:///g) === -1) { link = 'http://' + link; </del> <ins> var link = data.link; if (link.search(/^https?:///g) === -1) { link = 'http://' + link; } var story = new Story({ headline: sanitizeHtml(data.headline, { allowedTags: [], allowedAttributes: [] }).replace(/"/g, '"'), timePosted: Date.now(), link: link, description: sanitizeHtml(data.description, { allowedTags: [], allowedAttributes: [] }).replace(/"/g, '"'), rank: 1, upVotes: [({ upVotedBy: req.user._id, upVotedByUsername: req.user.profile.username })], author: { picture: req.user.profile.picture, userId: req.user._id, username: req.user.profile.username, email: req.user.email }, comments: [], image: data.image, storyLink: storyLink, metaDescription: data.storyMetaDescription, originalStoryAuthorEmail: req.user.email }); story.save(function (err) { if (err) { return res.status(500); </ins> } <del> var story = new Story({ headline: sanitizeHtml(data.headline, { allowedTags: [], allowedAttributes: [] }).replace(/"/g, '"'), timePosted: Date.now(), link: link, description: sanitizeHtml(data.description, { allowedTags: [], allowedAttributes: [] }).replace(/"/g, '"'), rank: 1, upVotes: [({ upVotedBy: req.user._id, upVotedByUsername: req.user.profile.username })], author: { picture: req.user.profile.picture, userId: req.user._id, username: req.user.profile.username, email: req.user.email }, comments: [], image: data.image, storyLink: storyLink, metaDescription: data.storyMetaDescription, originalStoryAuthorEmail: req.user.email }); story.save(function (err) { </del> <ins> req.user.progressTimestamps.push(Date.now() || 0); req.user.save(function (err, user) { </ins> if (err) { <del> return res.status(500); </del> <ins> return next(err); </ins> } <del> req.user.progressTimestamps.push(Date.now() || 0); req.user.save(function (err) { if (err) { return next(err); } }); res.send(JSON.stringify({ storyLink: story.storyLink.replace(/s/g, '-').toLowerCase() })); </del> }); <del> } ); </del> <ins> res.send(JSON.stringify({ storyLink: story.storyLink.replace(/s/g, '-').toLowerCase() })); }); }); </ins> }; exports.commentSubmit = function(req, res, next) {


try { // Based on the context retrieve the parent // object of the comment (Story/Comment) <del> Context.find( { '_id': data.associatedPost }, function (err, associatedContext) { </del> <ins> Context.find({'_id': data.associatedPost}, function (err, associatedContext) { if (err) { return next(err); } associatedContext = associatedContext.pop(); if (associatedContext) { associatedContext.comments.push(data._id); associatedContext.save(function (err) { if (err) { return next(err); } res.send(true); }); } // Find the author of the parent object User.findOne({'profile.username': associatedContext.author.username}, function(err, recipient) { </ins> if (err) { return next(err); } <del> associatedContext = associatedContext.pop(); if (associatedContext) { associatedContext.comments.push(data._id); associatedContext.save(function (err) { if (err) { return next(err); </del> <ins> // If the emails of both authors differ, // only then proceed with email notification if ( typeof data.author !== 'undefined' && data.author.email && typeof recipient !== 'undefined' && recipient.email && (data.author.email !== recipient.email) ) { var transporter = nodemailer.createTransport({ service: 'Mandrill', auth: { user: secrets.mandrill.user, pass: secrets.mandrill.password </ins> } <del> res.send(true); </del> }); <del> } // Find the author of the parent object User.findOne( { 'profile.username': associatedContext.author.username }, function(err, recipient) { </del> <ins> var mailOptions = { to: recipient.email, from: 'Team@freecodecamp.com', subject: data.author.username + ' replied to your post on Camper News', text: [ 'Just a quick heads-up: ', data.author.username, ' replied to you on Camper News.', 'You can keep this conversation going.', 'Just head back to the discussion here: ', 'http://freecodecamp.com/news/', data.originalStoryLink, '- the Free Code Camp Volunteer Team' ].join('n') }; transporter.sendMail(mailOptions, function (err) { </ins> if (err) { <del> return next(err); </del> <ins> return err; </ins> } <del> // If the emails of both authors differ, // only then proceed with email notification if ( typeof data.author !== 'undefined' && data.author.email && typeof recipient !== 'undefined' && recipient.email && (data.author.email !== recipient.email) ) { var transporter = nodemailer.createTransport({ service: 'Mandrill', auth: { user: secrets.mandrill.user, pass: secrets.mandrill.password } }); var mailOptions = { to: recipient.email, from: 'Team@freecodecamp.com', subject: data.author.username + ' replied to your post on Camper News', text: [ 'Just a quick heads-up: ', data.author.username, ' replied to you on Camper News.', 'You can keep this conversation going.', 'Just head back to the discussion here: ', 'http://freecodecamp.com/news/', data.originalStoryLink, '- the Free Code Camp Volunteer Team' ].join('n') }; transporter.sendMail(mailOptions, function (err) { if (err) { return err; } }); } } ); } ); </del> <ins> }); } }); }); </ins> } catch (e) { <ins> // delete comment </ins> return next(err); } });


return next(err); } req.flash('success', { msg: 'Success! You are logged in.' }); <ins> if (/hotStories/.test(req.session.returnTo)) { return res.redirect('../news'); } </ins> return res.redirect(req.session.returnTo || '/'); }); })(req, res, next);


"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".')" ],


"description": [ "Delete your h2 element's style tag and write the CSS to make all h2 elements blue.", "With CSS, there are hundreds of CSS attributes that you can use to change the way an element looks on a web page.",  "When you entered <h2 style="color: red">CatPhotoApp<h2>, you were giving that individual h2 element an inline style",   "When you entered <h2 style="color: red">CatPhotoApp</h2>, you were giving that individual h2 element an inline style",  "That's one way to add style to an element, but a better way is by using Cascading Style Sheets (CSS).", "At the top of your code, create a style tag like this: <style></style>", "Inside that style element, you can create a css selector for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this: <style>h2 {color: red;}</style>",


"Here's the anatomy of a CSS class:", "", "You can see that we've created a CSS class called "blue-text" within the <style> tag.",  "You can apply a class to an HTML element like this: <h2 class="blue-text">CatPhotoApp<h2>",   "You can apply a class to an HTML element like this: <h2 class="blue-text">CatPhotoApp</h2>",  "Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.", "Instead of creating a new Style tag, try removing the h2 style declaration from the existing style element, and replace it with the class declaration for ".red-text"." ],


"description": [ "Wrap your img element inside an anchor element with a dead link.", "You can make elements into links by wrapping them in an anchor tag.",  "Wrap your image in an anchor tag. Here's an example: <a href='#'><img src='http://bit.ly/fcc-kittens2'></a>",   "Wrap your image in an anchor tag. Here's an example: <a href='#'><img src='http://bit.ly/fcc-kittens2'/></a>",  "Remember to use the hash symbol as your anchor tag's href property in order to turn it into a dead link.", "Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link." ],


"Replace the paragraph elements with an unordered list of three things that cats love.", "HTML has a special element for creating unordered lists, or bullet point-style lists.", "Unordered lists start with a <ul> element. Then they contain some number of <li> elements.",  "For example: <ul><li>milk</li><li>cheese</li><ul> would create a bulleted list of "milk" and "cheese"."   "For example: <ul><li>milk</li><li>cheese</li></ul> would create a bulleted list of "milk" and "cheese"."  ], "tests": [ "assert($('ul').length > 0, 'Create a ul element.')",


"Create an ordered list of the the top 3 things cats hate the most.", "HTML has a special element for creating ordered lists, or numbered-style lists.", "Ordered lists start with a <ol> element. Then they contain some number of <li> elements.",  "For example: <ol><li>hydrogen</li><li>helium</li><ol> would create a numbered list of "hydrogen" and "helium"."   "For example: <ol><li>hydrogen</li><li>helium</li></ol> would create a numbered list of "hydrogen" and "helium"."  ], "tests": [ "assert($('ul').length > 0, 'You should have an ul element on your webpage.')",


"Hint: Here's an example call to Twitch.tv's JSON API: https://api.twitch.tv/kraken/streams/freecodecamp.", "Hint: The relevant documentation about this API call is here: https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel.", "Hint: Here's an array of the Twitch.tv usernames of people who regularly stream coding: ["freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","comster404","brunofin","thomasballinger","noobs2ninjas","beohoff"]",  "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.",   "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.",  "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, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.

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


"Here are the user stories you must enable, and optional bonus user stories:", "User Story: As a user, I can click a button to show me a new random quote.", "Bonus User Story: As a user, I can press a button to tweet out a quote.",  "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.",   "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.",  "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, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.

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


"Bonus User Story: As a user, I can see an icon depending on the temperature..", "Bonus User Story: As a user, I see a different background image depending on the temperature (e.g. snowy mountain, hot desert).", "Bonus User Story: As a user, I can push a button to toggle between Fahrenheit and Celsius.",  "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.",   "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.",  "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, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.

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


"User Story: As a user, I can click a link to go directly to the post's discussion page.", "Bonus User Story: As a user, I can see how many upvotes each story has.", "Hint: Here's the Camper News Hot Stories API endpoint: http://www.freecodecamp.com/stories/hotStories.",  "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.",   "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.",  "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, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.

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


"Bonus User Story:As a user, I can click a button to see a random Wikipedia entry.", "Bonus User Story:As a user, when I type in the search box, I can see a dropdown menu with autocomplete options for matching Wikipedia entries.", "Hint: Here's an entry on using Wikipedia's API: http://www.mediawiki.org/wiki/API:Main_page.",  "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.",   "Remember to use RSAP if you get stuck. Try using jQuery's $.getJSON() to consume APIs.",  "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, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.

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


], "tests": [ "assert((/cat photos/gi).test($("a").text()), 'Your a element should have the anchor text of "cat photos"')",  "assert(/http://catphotoapp.com/gi.test($("a").attr("href")), 'You need an a element that links to http://catphotoapp.com.')",   "assert(/http://catphotoapp.com/gi.test($("a").attr("href")), 'You need an a element that links to http://catphotoapp.com.')",  "assert(editor.match(//g) && editor.match(//g).length === editor.match(/<a/g).length, 'Make sure your a element has a closing tag.')" ], "challengeSeed": [


"Wait for the workspace to finish processing and select it on the left sidebar, below the Create New Workspace button.", "Click the "Start Editing" button.", "In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",  "Run this command: npm install how-to-npm -g", "Now start this tutorial by running npm install how-to-npm@2.0.0.",   "Install how-to-npm with this command: npm install how-to-npm -g", "Now start the tutorial by running how-to-npm.",  "Note that you can resize the c9.io's windows by dragging their borders.", "Make sure that you are always in your project's "workspace" directory. You can always navigate back to this directory by running this command: cd ~/workspace.", "Note that you can only add dist tags to the specific version numbers published in steps 8 and 10. If you receive a 403 or 404 error, run how-to-npm and try again.",


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


], "tests": [ "assert($("body").css("background-color") === "rgb(255, 0, 0)", 'Give your body element the background-color of red.')",  "assert(editor.match(/#FF0000/g) && editor.match(/#FF0000/g).length > 0, 'Use the hex code for the color red instead of the word red. For example body { color: #FF0000; }.')"   "assert(editor.match(/#FF0000/ig) && editor.match(/#FF0000/ig).length > 0, 'Use the hex code for the color red instead of the word red. For example body { color: #FF0000; }.')"  ], "challengeSeed": [ "


], "tests": [ "assert($("body").css("background-color") === "rgb(0, 0, 255)", 'Give your body element the background-color of blue.')",  "assert(editor.match(/#0000FF/g) && editor.match(/#0000FF/g).length > 0, 'Use the hex code for the color blue instead of the word blue. For example body { color: #0000FF; }.')"   "assert(editor.match(/#0000FF/ig) && editor.match(/#0000FF/ig).length > 0, 'Use the hex code for the color blue instead of the word blue. For example body { color: #0000FF; }.')"  ], "challengeSeed": [ "


], "tests": [ "assert($("body").css("background-color") === "rgb(255, 165, 0)", 'Give your body element the background-color of orange.')",  "assert(editor.match(/#FFA500/g) && editor.match(/#FFA500/g).length > 0, 'Use the hex code for the color orange instead of the word orange. For example body { color: #FFA500; }.')"   "assert(editor.match(/#FFA500/ig) && editor.match(/#FFA500/ig).length > 0, 'Use the hex code for the color orange instead of the word orange. For example body { color: #FFA500; }.')"  ], "challengeSeed": [ "


"difficulty":"9.9825", "description":[ "You can run the same code multiple times by using a loop.",  "Another type of JavaScript loop is called a "while loop" because it runs "while" something is true, and stops once that something is no longer true.",   "Another type of JavaScript loop is called a "while loop", because it runs "while" something is true and stops once that something is no longer true.",  "var ourArray = [];", "var i = 0;", "while(i < 5) {",


"g means that we want to search the entire string for this pattern.", "i means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.", "Regular expressions are usually surrounded by / symbols.",  "Let's try selecting all the occurances of the word and in the string George Boole and Alan Turing went to the shop and got some milk. We can do this by replacing the .+ part of our regular expression with the current regular expression with the word and."   "Let's try selecting all the occurrences of the word and in the string George Boole and Alan Turing went to the shop and got some milk. We can do this by replacing the .+ part of our regular expression with the current regular expression with the word and."  ], "tests":[ "assert(test==2, 'Your regular expression should find two occurrences of the word and');",


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


"Choose Node.js in the selection area below the name field.", "Click the Create button. Then click into your new workspace.", "In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",  "Install how-to-npm with this command: npm install -g git-it",   "Install git-it with this command: npm install -g git-it",  "Now start the tutorial by running git-it.", "Note that you can resize the c9.io's windows by dragging their borders.", "Make sure that you are always in your project's "workspace" directory. You can always navigate back to this directory by running this command: cd ~/workspace.",


}, { "id":"cf1111c1c12feddfaeb8bdef",  "title": "Find White Space with Regular Expressions",   "title": "Find Whitespace with Regular Expressions",  "difficulty":"9.986", "description":[  "We can also use selectors like s to find spaces in a string.",   "We can also use selectors like s to find whitespace in a string.", "The whitespace characters are " " (space), r (carriage return), n (newline), t (tab), and f (form feed).",  "It is used like this:", "/s+/g",  "Select all the spaces in the sentence string."   "Select all the whitespace characters in the sentence string."  ], "tests":[ "assert(test === 7, 'message: Your RegEx should have found seven spaces in the testString.');",


"Many HTML elements have children which inherit their properties from their parent HTML elements.", "For example, every HTML element is a child of your body element, and your "jQuery Playground" h3 element is a child of your <div class="container-fluid"&#62 element.", "jQuery has a function called children() that allows you to access the children of whichever element you've selected.",  "Here's an example of how you would use the children() function to give the children of your left-well element the background color of blue: $("#left-well").children().css("color", "blue")",   "Here's an example of how you would use the children() function to give the children of your left-well element the color of blue: $("#left-well").children().css("color", "blue")",  "Give all the children of your #right-well element a color of green." ], "tests": [


"</style>", "", "
CatPhotoApp
",  "",  "", "cat photos", "",  "",  "", "", "
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
",


"Let's delete the "tails" property from myDog." ], "tests": [  "assert(myDog.bark === undefined, 'message: Delete the property "bark" from myDog.');"   "assert(myDog.tails === undefined, 'message: Delete the property "tails" from myDog.');"  ], "challengeSeed": [ "var ourDog = {",


[ "http://i.imgur.com/EoTfOyC.jpg", "An image of some of our campers coding together in Montreal.", <del> "Keep practicing coding every day and hanging out with other people who code, and you will becoming a job-ready coder.", </del> <ins> "Keep practicing coding every day and hanging out with other people who code, and you will become a job-ready coder.", </ins> "" ], [


"challenges": [ { "id": "bb000000000000000000001", <del> "title":  "Trigger Click Events with jQuery", </del> <ins> "title": "Trigger Click Events with jQuery", </ins> "description": [ "In this section, we'll learn how to get data from APIs. APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.", "We'll also learn how to update HTML with the data we get from these APIs using a technology called Ajax.",


"
" ], "challengeType": 0,  "type": "waypoint"   "type": "waypoint", "nameEs": "Activa eventos de pulsación con jQuery", "descriptionEs": [ "En esta sección, vamos a aprender cómo obtener datos de las APIs. Las APIs - o interfaces de programación de aplicaciones - son herramientas que utilizan los computadores para comunicarse entre sí.", "También aprenderemos cómo actualizar HTML con los datos que obtenemos de estas API usando una tecnología llamada Ajax.", "En primer lugar, vamos a revisar lo que hace la función $(document).ready(). Esta función hace que todo el código dentro de ella se ejecute sólo hasta que nuestra página ha sido cargada.", "Hagamos que nuestro botón "Get message" cambie el texto del elemento con clase message.", "Antes de poder hacer esto, tenemos que implementar un evento de pulsación dentro de nuestra función $(document).ready(), añadiendo este código:", "$("#getMessage").on("click", function(){", "", "});" ]  }, { "id": "bc000000000000000000001",  "title":  "Change Text with Click Events",   "title": "Change Text with Click Events",  "description": [ "When our click event happens, we can use Ajax to update an HTML element.", "Let's make it so that when a user clicks the "Get Message" button, we change the text of the element with the class message to say "Here is the message".",


"
" ], "challengeType": 0,  "type": "waypoint"   "type": "waypoint", "nameEs": "Cambia texto con eventos de pulsación", "descriptionEs": [ "Cuando nuestro evento de pulsación ocurre, podemos utilizar Ajax para actualizar un elemento HTML.", "Hagamos que cuando un usuario pulse el botón "Get Message", el texto del elemento con la clase message cambie para decir "Here is the message".", "Podemos hacerlo añadiendo el siguiente código dentro de nuestro evento de pulsación:", "  $(".message").html("Here is the message");" ]  }, { "id": "bb000000000000000000002",


"
" ], "challengeType": 0,  "type": "waypoint"   "type": "waypoint", "nameEs": "Obtén JSON con el método getJSON de jQuery", "descriptionEs": [ "También puedes solicitar los datos de una fuente externa. Aquí es donde entran en juego las API. ", "Recuerda que las API - o interfaces de programación de aplicaciones - son herramientas que utilizan los ordenadores para comunicarse entre sí.", "La mayoría de las API para el web transfieren datos en un formato llamado JSON. JSON significa notación de objeto JavaScript (JavaScript Object Notation).", "Tú ya has usado JSON al crear objetos en JavaScript. JSON no es más que las propiedades del objeto y sus valores actuales, intercalados entre un { y un }. ", "Estas propiedades y sus valores a menudo se denominan " pares llave-valor".", "Vamos a obtener el JSON de la API de fotos de gato de Free Code Camp.", "Aquí está el código que puedes poner en tu evento de pulsación para lograrlo:", "  $.getJSON("/json/cats.json", function(json) {", "    $(".message").html(JSON.stringify(json));", "  });", "Una vez lo añadas, pulsa el botón "Get Message". Su función Ajax sustituirá el texto "The message will go here" con la salida JSON en bruto de la API de fotos de gato de Free Code Camp." ]  }, { "id": "bb000000000000000000003",  "title":  "Convert JSON Data to HTML",   "title": "Convert JSON Data to HTML",  "description": [ "Now that we're getting data from a JSON API, let's display it in our HTML.", "We can use the .forEach() method to loop through our data and modify our HTML elements.",


"
", "
", "
",  "      The message will go here","
",   "      The message will go here", "
",  "
", "
", "
",


"
" ], "challengeType": 0,  "type": "waypoint"   "type": "waypoint", "nameEs": "Convierte datos JSON a datos HTML", "descriptionEs": [ "Ahora que estamos obteniendo datos de una API JSON, mostremóslos en nuestro HTML.", "Podemos usar el método .forEach() para recorrer nuestros datos y modificar nuestros elementos HTML.", "En primer lugar, vamos a declarar una variable llamada html con var html = "";.", "Después, iteremos a traveś de nuestro JSON, añadiendo más HTML a esa variable. Cuando se termina el ciclo, vamos a presentarla. ", "Aquí está el código que hace esto:", "json.forEach(function(val) {", "  var keys = Object.keys(val);", "  html += "<div class = 'cat'>";", "  keys.forEach(function(key) {", "    html += "<b>" + key + "</b>: " + val[key] + "<br>";", "  });", "  html += "</div><br>";", "});" ]  }, { "id": "bb000000000000000000004",  "title":  "Render Images from Data Sources",   "title": "Render Images from Data Sources",  "description": [ "In the JSON that we receive data from Free Code Camp's Cat Photo API.", "We've seen from the last two lessons that each object in our JSON array contains an imageLink key with a value that is the url of a cat's image.",


"
" ], "challengeType": 0,  "type": "waypoint"   "type": "waypoint", "nameEs": "Presentar imágenes de fuentes de datos", "descriptionEs": [ "Tanto en el JSON que recibimos de la API de fotos de gato de Free Code Camp, como en ", "lo que hemos visto en las dos últimas lecciones, cada objeto en nuestro vector JSON contiene una llave imageLink con un valor que corresponde a la url de la imagen de un gato.", "Cuando estamos recorriendo estos objetos, usemos esta propiedad imageLink para visualizar la imagen en un elemento img.", "Aquí está el código que hace esto:", "  html += "<img src = '" + val.imageLink + "'>";" ]  }, { "id": "bb000000000000000000005",  "title":  "Prefilter JSON",   "title": "Prefilter JSON",  "description": [ "If we don't want to render every cat photo we get from our Free Code Camp's Cat Photo JSON API, we can pre-filter the json before we loop through it.", "Let's filter out the cat who's "id" key has a value of 1.",


"
" ], "challengeType": 0,  "type": "waypoint"   "type": "waypoint", "nameEs": "Pre-filtra JSON", "descriptionEs": [ "Si no queremos presentar cada foto de gato que obtengamos de la API JSON de fotos de gato de Free Code Camp, podemos pre-filtrar el json antes de iterar a través de este.", "Vamos a filtrar el gato cuya llave "id" tiene un valor de 1.", "Aquí está el código para hacer esto:", "json = json.filter(function(val) {", "  return(val.id !== 1);", "});" ]  }, { "id": "bb000000000000000000006",  "title":  "Get Geo-location Data",   "title": "Get Geo-location Data",  "description": [ "Another cool thing we can do is access our user's current location. Every browser has a built in navigator that can give us this information.", "The navigator will get our user's current longitude and latitude.",


"
" ], "challengeType": 0,  "type": "waypoint"   "type": "waypoint", "nameEs": "Recibir datos de Geo-localización", "descriptionEs": [ "Otra cosa interesante que podemos hacer es acceder a la ubicación actual de nuestros usuarios. Todos los navegadores han incorporado un geo-localizador que nos puede dar esta información. ", "El navegador puede obtener la longitud y latitud actual de nuestros usuarios.", "Como usuario verás un mensaje para permitir o evitar que el sitio conozca tu ubicación actual. El desafío se puede completar de cualquier manera, siempre y cuando el código sea correcto. ", "Si lo permites, verás que el texto en el teléfono de la derecha cambiará con tu latitud y longitud", "Aquí hay un código que hace esto:", "if (navigator.geolocation) {", "  navigator.geolocation.getCurrentPosition(function(position) {", "    $("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);", "  });", "}" ]  } ] }


"assert(telephoneCheck("(555)555-5555") === true, 'message: telephoneCheck("(555)555-5555") should return true.');", "assert(telephoneCheck("1(555)555-5555") === true, 'message: telephoneCheck("1(555)555-5555") should return true.');", "assert(telephoneCheck("1 555 555 5555") === true, 'message: telephoneCheck("1 555 555 5555") should return true.');",  "assert(telephoneCheck("555-555-5555") === true, 'message: telephoneCheck("555-555-5555") should return true.');",  "assert(telephoneCheck("1 456 789 4444") === true, 'message: telephoneCheck("1 456 789 4444") should return true.');", "assert(telephoneCheck("123**&!!asdf#") === false, 'message: telephoneCheck("123**&!!asdf#") should return false.');", "assert(telephoneCheck("55555555") === false, 'message: telephoneCheck("55555555") should return false.');",


"assert(telephoneCheck("(275)76227382") === false, 'message: telephoneCheck("(275)76227382") should return false.');", "assert(telephoneCheck("2(757)6227382") === false, 'message: telephoneCheck("2(757)6227382") should return false.');", "assert(telephoneCheck("2(757)622-7382") === false, 'message: telephoneCheck("2(757)622-7382") should return false.');",  "assert(telephoneCheck("555)-555-5555") === false, 'message: telephoneCheck("555)555-5555") should return false.');",   "assert(telephoneCheck("555)-555-5555") === false, 'message: telephoneCheck("555)-555-5555") should return false.');",  "assert(telephoneCheck("(555-555-5555") === false, 'message: telephoneCheck("(555-555-5555") should return false.');" ], "challengeSeed": [


"var b = 2;", "", "// Only change code below this line", <del> " " </del> <ins> "" </ins> ], "tail": [ "(function(a,b){return "a = " + a + ", b = " + b;})(a,b);"


"description": [ "In Javascript, String values are <dfn>immutable</dfn>, which means that they cannot be altered once created.", "For example, the following code:",  "
var myStr = "Bob";
myStr[0] = "J";
",   "
var myStr = "Bob";
myStr[0] = "J";
",  "cannot change the value of myStr to "Job", because the contents of myStr cannot be altered. Note that this does not mean that myStr cannot be changed, just that the individual characters of a <dfn>string literal</dfn> cannot be changed. The only way to change myStr would be to assign it with a new string, like this:",  "
var myStr = "Bob";
myStr = "Job";
",   "
var myStr = "Bob";
myStr = "Job";
",  "
Instructions
", "Correct the assignment to myStr to achieve the desired effect." ],


"description": [ "One way to think of a <dfn>multi-dimensional</dfn> array, is as an array of arrays. When you use brackets to access your array, the first set of bracket refers to the entries in the outer-most array, and each subsequent level of brackets refers to the next level of entries inside.", "Example",  "
var arr = [
    [1,2,3],
    [4,5,6],
    [7,8,9],
    [[10,11,12], 13, 14]
];
arr[0]; // equals [1,2,3]
arr[1][2]; // equals 6
arr[3][0][1]; // equals 11
",   "
var arr = [
    [1,2,3],
    [4,5,6],
    [7,8,9],
    [[10,11,12], 13, 14]
];
arr[0]; // equals [1,2,3]
arr[1][2]; // equals 6
arr[3][0][1]; // equals 11
",  "
Instructions
", "Read from myArray using bracket notation so that myData is equal to 8" ],


"tests": [], "type": "waypoint", "challengeType": 3, <del> "nameEs": "Crea una aplicación de votaciones" </del> <ins> "nameEs": "Desafios para aprender D3", "descriptionEs": [] </ins> } ] }


"tests": [], "type": "waypoint", "challengeType": 3, <del> "nameEs": "Crea una aplicación de votaciones" </del> <ins> "nameEs": "Desafios para aprender React", "descriptionEs": [] </ins> } ] }


"tests": [], "type": "waypoint", "challengeType": 3, <del> "nameEs": "Crea una aplicación de votaciones" </del> <ins> "nameEs": "Desafios para aprender Sass", "descriptionEs": [] </ins> } ] }


] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "JavaScript Lingo: MDN y Documentación", "descriptionEs": [ "Esta es una introducción básica a MDN y el concepto de la documentación.", "MDN, Mozilla Developer Network, es una fantástica colaboración de fuentes abiertas que documenta no sólo JavaScript, sino muchos otros lenguajes y temas. Si no has oído hablar de ellos, deberías darles un vistazo ahora. Personalmente obtengo mucha información de developer.mozilla.org/en-US/docs/Web/JavaScript ", "Cuando digo documentación, estoy hablando acerca de la información que se proporciona sobre el producto a sus usuarios. La documentación de MDN no necesariamente está escrita por la gente detrás de JS. Brendan Eich creó JS en 1995, pero hoy en día el proyecto continúa creciendo gracias a un esfuerzo comunitario. ", "A medida que continúes aprendiendo JavaScript, jQuery, y prácticamente cualquier otro lenguaje o servicio para desarrollo o programación, la documentación será tu amiga.", "Cuanto más rápido te sientas cómodo leyendo y referenciando documentación, más rápido crecerás como desarrollador.", "Estos vídeos no van a enseñarte JavaScript - te presentan términos y conceptos que serán valiosos a medida que continúes practicando y aprendiendo." ] </ins> }, { "id": "56b15f15632298c12f31518d",


] ], "type": "hike",  "challengeType": 6   "challengeType": 6, "nameEs": "JavaScript Lingo: Tipos de valores", "descriptionEs": [ "Aprende sobre los tres tipos más básicos de valores: Booleanos, cadenas y números", "Un booleano es un valor true (verdadero) o false (falso). Estas palabras son especiales y reservadas. No puedes nombrar a una variable como "true", porque esa palabra es ya universal como un valor lógico (así como lo es "false"). ", "Una cadena es un conjunto de caracteres que se establecen entre apóstrofes (') o entre comillas ("). Una cadena puede ser "true", siempre y cuando sea con comillas o con apóstrofes. ", "Los números se explican por sí mismos - un número es un valor que se compone sólo de dígitos, aunque también puede contener un decimal o un signo negativo." ]  }, { "id": "56b15f15632298c12f31518b",


] ], "type": "hike",  "challengeType": 6   "challengeType": 6, "nameEs": "JavaScript Lingo: Variables y capitalizaciónCamello", "descriptionEs": [ "Vamos a cubrir lo que constituye una variable, y el razonamiento detrás de la capitalizaciónCamello (camelCase).", "Una variable, también conocida como una 'var', es el nombre o el espacio para un booleano, una cadena, un número, u otra pieza de información estática.", "Puedes usar las Herramientas de desarrollo de Google para inspeccionar la página principal de FreeCodeCamp y buscar algunas variables.", "Tu 'declaras' variables por primera vez con var en frente de ella, pero después puedes referenciarla más adelante en tu programa.", "capitalizaciónCamello es una forma en la que juntas varias palabras y aún así las mantienes legibles. La primera letra de la primera palabra va en minúsculas al igual que el resto de la primera palabra, pero la primera letra de cada palabra que siga se escribe en mayúsculas. No hay espacios. Ejemplos: brianaAmaSusMascotas, laMejorComidaEsElQueso, y valeLaPenaAprenderProgramacion.", "Al asignar un nombre de variable, usa capitalizaciónCamello. Además, trata de mantener los nombres descriptivos y cortos para que los demás (¡e incluso tu!) puedan entender a lo que se refiere la variable simplemente por el nombre." ]  }, { "id": "56b15f15632298c12f31518a",


] ], "type": "hike",  "challengeType": 6   "challengeType": 6, "nameEs": "JavaScript Lingo: Vectores y objetos", "descriptionEs": [ "Si desea almacenar más de una pieza de información en una variable, puedes hacerlo mediante la creación de un vector o de un objeto.", "** Exención de responsabilidad: Los objetos de JS no son exactamente lo mismo que los objetos en otros lenguajes. Vamos a discutir aquí objetos con respecto a JS. ", "Los vectores son conjuntos de valores entre [corchetes]. Los valores se separan con comas. Cada valor puede ser booleano, cadena, número, o incluso otro vector. A esto último le llamamos vector anidado. A un vector compuesto por vectores de la misma longitud le llamamos matriz. ", "Los objetos son un tipo de datos que pueden verse o comportarse como un vector, en la medida que se trata de más valores almacenados en una variable de una manera organizada. Oirás que un objeto se puede representar en JSON, y con frecuencia cuando haces llamadas a la API de algunos sitios (para obtener información que necesitas mostrar en tu propia página) está será devuelta en JSON. ", "Un ejemplo de la notación de objetos es:  var obj = { 'nombre': 'Briana', 'comida': 'queso', 'perro': 'Maurice'};", "Fíjate que un objeto se encierra entre llaves { ... }, que los diferentes atributos se separan por comas, que cada atributo consta de una palabra llave y de un valor. Por ejemplo son llaves 'nombre', 'comida' y 'perro' y sus respectivos valores son 'Briana', 'queso' y 'Maurice'. En este ejmplo todos los valores fueron cadenas, aunque también son válidos booleanos, números y otros tipos de datos." ]  }, { "id": "56b15f15632298c12f315189",


] ], "type": "hike",  "challengeType": 6   "challengeType": 6, "nameEs": "JavaScript Lingo: Encontrando e indexando valores en vectores", "descriptionEs": [ "Hay muchas razones por las que puedes necesitar acceder a una determinada pieza de información al interior de un conjunto más amplio, lo cual haces referenciando su índice.", "No vamos a entrar en la sintaxis, pero debes saber que el primer elemento en un vector tiene en realidad el índice 0.", "Esto también aplica para cadenas y objetos. Todos estos índices comienzan en 0, por lo que si en tu programa usas miVector[2], realmente vas a obtener la tercera pieza de información del vector miVector." ]  }, { "id": "56b15f15632298c12f315188",


] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "JavaScript Lingo: Manipulación de los datos", "descriptionEs": [ "Métodos y funciones son formas con las que puedes modificar variables u otros conjuntos de información.", "Los métodos están integrados en JavaScript, y te familiarizarás con estos cuando realices los desafíos sobre algoritmos.", "Me gustaría sugerirte dar un vistazo a MDN (Mozilla Developer Network que discutimos en el primer video) para que te familiarices con la cantidad y el potencial general de los métodos que existen. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Methods_Index", "Los ejemplos incluyen <code>.split (' ')</code>, que convertirá una cadena en un vector y puede hacerlo de muchas maneras diferentes. Los métodos son de gran alcance - muchas veces cuando quieres que tu programa haga algo, ya habrá un método para eso.", "Las funciones, al igual que las variables, son algo que tu defines y creas.", "Durante tu práctica con algoritmos en FreeCodeCamp, vas a crear funciones que reciben una determinada pieza de información y la manipulan de la forma que elijas.", "Vas a estar más familiarizado con la sintaxis, pero por ahora, sólo recuerda que con los métodos y funciones puedes hacer casi cualquier cosa con tu código." ] </ins> }, { "id": "56b15f15632298c12f315187",


] ], "type": "hike",  "challengeType": 6   "challengeType": 6, "nameEs": "JavaScript Lingo: Matemáticas", "descriptionEs": [ "Hay un objeto estático de nombre 'Math' en JS con muchos propiedades y métodos incluidos.", "Vas a querer investigar más de este cuando manipules números. Consulta la documentación de MDN antes de escribir tus propias funciones, pues ya podrían estar definidas allí. ", "Los ejemplos incluyen Math.random() que devolverá un número aleatorio en un rango y Math.round() que redondeará el número decimal que reciba al entero más cercano.", "Yo utilicé Math.random() cuando construí el generador de citas aleatorias como proyecto de desarrollo de interfaces en FreeCodeCamp.", "Cuando trabajes con números, también debes estar consciente de que JS tiene un atributo interesante llamado 'formato de coma flotante'.", "Dependiendo de la cantidad de números, su tamaño y la cantidad de cálculos, JS puede devolver un número que es inexacto en 0,00004.", "Hay maneras de evitar esto, y en general no plantean problemas, pero es algo que debes tener en cuenta si te encuentras con algunos problemas que parecen no tienen sentido." ]  }, { "id": "56b15f15632298c12f315186",


] ], "type": "hike", <del> "challengeType": 6 </del> <ins> "challengeType": 6, "nameEs": "JavaScript Lingo: Ciclos", "descriptionEs": [ "Si hay un conjunto de valores (vamos a utilizar un vector en este ejemplo, pero no tiene que ser así) y deseas realizar la misma operación a cada valor del conjunto, puedes usar algo llamado ciclo. ", "Los ciclos tienen una sintaxis compleja a la que inicialmente es difícil acostumbrarse, pero una vez que la entiendas, son de gran utilidad. Yo usé ciclos en muchas de mis soluciones. ", "No es necesario que entiendas todo aquí - sólo que sepas que existen ciclos cuando necesitas recorrer un conjunto de datos y que pueden reducir la cantidad de código que debes escribir." ] </ins> }, { "id": "56b15f15632298c12f315185",


] ], "type": "hike",  "challengeType": 6   "challengeType": 6, "id": "56b15f15632298c12f315185", "nameEs": "JavaScript Lingo: expresiones regulares (RegExp)", "descriptionEs": [ "Las RegExp no siguen el formato del resto de JS, y pueden requerir una curva de aprendizaje.", "Las epresiones regulares (abreviado RegExp) también pueden ser una herramienta muy útil y eficiente.", "Usando RegExp, puedes hacer coincidir, reemplazar, buscar y dividir una cadena, uno de los tipos más difíciles de manipular.", "Al igual que con todos los otros videos, no vamos a entrar en detalles, pero quiero mostrar algunos ejemplos donde las RegExp son útiles.", "Si quisieras crear una página de registro que verifique las contraseñas para que contengan al menos un número y una letra mayúscula, puedes usar expresiones regulares.", "Si quieres asegurarte de que las fechas introducidas en una página sean todas fechas válidas en el futuro, puedes usar RegExp.", "Si bien hay infinitas maneras de utilizar RegExp, muchas de estas incluyen validaciones o ediciones automáticas de información." ]  } ] }


"name": "Sorted Union", "difficulty": "2.07", "description": [ <del> "Write a function that takes two or more arrays and returns a new array of unique values sorted in order." </del> <ins> "Write a function that takes two or more arrays and returns a new array of unique values in the order of the original provided arrays.", "The unique numbers should be sorted by their original order, but the final array should not be sorted in numerical order.", "Check the assertion tests for examples." </ins> ], "challengeSeed": "function unite(arr) {n  return arr;rn}nnunite([1, 2, 3], [5, 2, 1, 4], [2, 1]);", "tests": [


"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> ] </del>  No newline at end of file <ins> ] </ins>


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


"The next option for the CSS position property is absolute, which locks the element in place relative to its parent container. Unlike the relative position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.", "One nuance with absolute positioning is that it will be locked relative to its closest positioned ancestor. If you forget to add a position rule to the parent item, (this is typically done using position: relative;), the browser will keep looking up the chain and ultimately default to the body tag.", "
",  "Lock the #searchbar element to the top-right of its section parent by declaring its position as absolute. Give it top and right offsets of 0.5 pixels each."   "Lock the #searchbar element to the top-right of its section parent by declaring its position as absolute. Give it top and right offsets of 50 pixels each."  ], "challengeSeed": [ "


], "tests": [ "assert($('#searchbar').css('position') == 'absolute', 'message: The #searchbar element should have a position set to absolute.');",  "assert($('#searchbar').css('top') == '0.5px', 'message: Your code should use the top CSS offset of 0.5 pixels on the #searchbar element.');", "assert($('#searchbar').css('right') == '0.5px', 'message: Your code should use the right CSS offset of 0.5 pixels on the #searchbar element.');"   "assert($('#searchbar').css('top') == '50px', 'message: Your code should use the top CSS offset of 50 pixels on the #searchbar element.');", "assert($('#searchbar').css('right') == '50px', 'message: Your code should use the right CSS offset of 50 pixels on the #searchbar element.');"  ], "solutions": [], "hints": [],


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


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

Strokes	Return

1	"Hole-in-one!"

<= par - 2	"Eagle"

par - 1	"Birdie"

par	"Par"

par + 1	"Bogey"

par + 2	"Double Bogey"

>= par + 3	"Go Home!"

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


```yml tests: - text: The first <code>div</code> should have a <code>height</code> of 12 pixels. <del> testString: assert($('div').eq(0).css('height') == '12px'); </del> <ins> testString: assert($('div').eq(0)[0].style.height === '12px'); </ins> - text: The second <code>div</code> should have a <code>height</code> of 31 pixels. <del> testString: assert($('div').eq(1).css('height') == '31px'); </del> <ins> testString: assert($('div').eq(1)[0].style.height === '31px'); </ins> - text: The third <code>div</code> should have a <code>height</code> of 22 pixels. <del> testString: assert($('div').eq(2).css('height') == '22px'); </del> <ins> testString: assert($('div').eq(2)[0].style.height === '22px'); </ins> - text: The fourth <code>div</code> should have a <code>height</code> of 17 pixels. <del> testString: assert($('div').eq(3).css('height') == '17px'); </del> <ins> testString: assert($('div').eq(3)[0].style.height === '17px'); </ins> - text: The fifth <code>div</code> should have a <code>height</code> of 25 pixels. <del> testString: assert($('div').eq(4).css('height') == '25px'); </del> <ins> testString: assert($('div').eq(4)[0].style.height === '25px'); </ins> - text: The sixth <code>div</code> should have a <code>height</code> of 18 pixels. <del> testString: assert($('div').eq(5).css('height') == '18px'); </del> <ins> testString: assert($('div').eq(5)[0].style.height === '18px'); </ins> - text: The seventh <code>div</code> should have a <code>height</code> of 29 pixels. <del> testString: assert($('div').eq(6).css('height') == '29px'); </del> <ins> testString: assert($('div').eq(6)[0].style.height === '29px'); </ins> - text: The eighth <code>div</code> should have a <code>height</code> of 14 pixels. <del> testString: assert($('div').eq(7).css('height') == '14px'); </del> <ins> testString: assert($('div').eq(7)[0].style.height === '14px'); </ins> - text: The ninth <code>div</code> should have a <code>height</code> of 9 pixels. <del> testString: assert($('div').eq(8).css('height') == '9px'); </del> <ins> testString: assert($('div').eq(8)[0].style.height === '9px'); </ins> ```


## Solution <section id='solution'> <del> ```js // solution required </del> <ins> ```html <style> .bar { width: 25px; height: 100px; display: inline-block; background-color: blue; } </style> <body> <script> const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9]; d3.select("body").selectAll("div") .data(dataset) .enter() .append("div") .attr("class", "bar") .style('height', d => `${d}px`) </script> </body> </ins> ``` </section>


</tr> </table> <del> # Contribution Guidelines </del> <ins> # Como trabajar con correos salientes localmente (para el flujo de trabajo de correo electrónico) </ins> <del> Hello 👋 ! </del> <ins> > **Nota:** Hay un **Opcional** Paso - Solo es requerido cuando trabajamos con el cuando se trabaja con flujos de trabajo de correo electrónico </ins> <del> These instructions have not been translated yet. Please check this issue for details: [`#18312`](https://github.com/freeCodeCamp/freeCodeCamp/issues/18312) </del>  No newline at end of file <ins> ## Introducción Algunos flujos de trabajo del correo electrónico, como la actualizar el correo electrónico de un usuario, requieren de una API, en el backend para mandar correos electrónicos. mientras desarrollamos podemos usar una herramienta para obtenerlos localmente, en lugar de tener que usar un proveedor de correo electrónico y enviar un correo electrónico real. MailHog es una de las muchas herramientas de email para probar en el entorno de desarrollo para desarrolladores, que capturará los correos electrónicos de su instancia local que freeCodeCamp está enviando. ## Instalando MailHog Como podemons instalar y usar MailHog depende del sistema operativo - [Instalando MailHog en macOS](#installing-mailhog-on-macos) - [Instalando MailHog en Windows](#installing-mailhog-on-windows) - [Instalando MailHog en Linux](#installing-mailhog-on-linux) ### Instalando MailHog en MacOS Aquí podemos ver como instalar MailHog en macOS [Homebrew](https://brew.sh/): ``` bash brew install mailhog brew services start mailhog ``` Esto emepezara un servicio de mailHog en segundo plano. Siguiente, puedes ir a [using MailHog](#using-mailhog). ### Instalar MailHog en Windows Descarga la versión mas reciente de MailHog de [MailHog's official repository](https://github.com/mailhog/MailHog/releases). Click en el link dependiendo de tu versión de Windows (32 ó 64 bit) y el archivo .exe será descargado en tu computadora. Una vez que termine la descarga, haga clic en el archivo. Probablemente recibirá una notificación de firewall de Windows donde tendrá que permitir el acceso a MailHog. Una vez que lo haga, se abrirá una línea de comando estándar de Windows con MailHog ya en ejecución. Para cerrar MailHog, cierre el símbolo del sistema. Para volver a ejecutarlo, haga clic en el mismo archivo .exe. No necesitas descargar uno nuevo. Siguiente, Puedes ir a [using MailHog](#using-mailhog). ### Instalando MailHog en Linux Primero instalar [Go](https://golang.org). Para sistemas basados en Debian como Ubuntu y Linux Mint, en la terminal: ``` bash sudo apt-get install golang ``` Para CentOS, Fedora, Red Hat Linux, y otros sistemas basados en RPM-based, en la terminal: ``` bash sudo dnf install golang ``` O: ``` bash sudo yum install golang ``` Establecer path para Go: ``` bash echo "export GOPATH=$HOME/go" >> ~/.profile echo 'export PATH=$PATH:/usr/local/go/bin:$GOPATH/bin' >> ~/.profile source ~/.profile ``` Despues instalar y correr MailHog: ``` bash go get github.com/mailhog/MailHog sudo cp /home/$(whoami)/go/bin/MailHog /usr/local/bin/mailhog mailhog ``` Siguiente, Puedes ir a [using MailHog](#using-mailhog). ## Using MailHog ## Usando MailHog Una vez que hayas instalado MailHog y lo hayas iniciado, debes abrir tu bandeja de entrada de MailHog en tu navegador, y abre una nueva pestaña o ventana y navegar a [http://localhost:8025] (http://localhost:8025). Ahora debería ver una pantalla como la siguiente: ![MailHog Screenshot 1](images/mailhog/1.jpg) Cuando la instalación de freeCodeCamp envíe un correo electrónico, verás que aparece aquí. Como aquí abajo: ![MailHog Screenshot 2](images/mailhog/2.jpg) Abre el correo y verás dos pestañas donde puedes ver el contenido: texto sin formato y fuente. Asegúrate de que estás en la pestaña de texto sin formato. ![MailHog Screenshot 3](images/mailhog/3.jpg) Cualquier enlace en el correo electrónico debe ser seleccionable. ## Enlaces útiles - Para cualquier otra pregunta relacionada con MailHog o para obtener instrucciones sobre configuraciones personalizadas, consulte el repositorio [MailHog] (https://github.com/mailhog/MailHog). </ins>  No newline at end of file


Puedes realizar los cambios sin tener que ejecutar nada desde tu sistema local. <del> Después de que encuentres el archivo que quieras modificar desde la interfaz de GitHub, haz clic en el icono de lápiz para comenzar a editar el archivo. Esto automáticamente creara una bifurcación del proyecto, si es que no tienes una todavía. </del> <ins> Después de que encuentres el archivo que quieras modificar desde la interfaz de GitHub, hace clic en el icono de lápiz para comenzar a editar el archivo. Esto automáticamente creara una bifurcación del proyecto, si es que no tienes una todavía. </ins> También puedes clonar el proyecto y editarlo de manera local en tu ordenador. Si necesitas ayuda al respecto, dale un vistazo a la [guía principal de contribución](/CONTRIBUTING.md). ### Patrón de los Desafíos. <del> He aquí un patrón de cómo se verán los archivos markdown correspondientes a los desafíos. </del> <ins> He aquí un patrón de cómo se verán los archivos reduccion correspondientes a los desafíos. </ins> ````md ---


## Descripción <section id='description'> <del> Una descripción del desafío y de los requerimientos aprobatorios </del> <ins> Una descripción del desafío y de los requisitos aprobacion </ins> </section> ## Instrucciones


Puedes:  - [Ayudarnos creando y editando artúclos de la Guía](#steps-for-creating-and-editing-guide-articles).   - [Ayudarnos creando y editando articulos de la Guía](#steps-for-creating-and-editing-guide-articles).  - [Ayudarnos a revisar Pull Requests para artículos de la guía]() ## Pasos para crear y editar artículos de la Guía 1. 🍴 [Fork este repositorio](https://github.com/freeCodeCamp/freeCodeCamp#fork-destination-box)  2. 👀 Sgiue las normas de controbución expuestas a continuación. 3. 🔧 Propón cambios asombrosos!   2. 👀 Sigue las normas de contribución expuestas a continuación. 3. 🔧 Propóne cambios asombrosos!  4. 📖 Lee la [guía de buenas prácticas de estilo](/docs/style-guide-for-guide-articles).  5. 👉 [Haz una Pull Request](https://github.com/freeCodeCamp/freeCodeCamp/compare)   5. 👉 [Hace un Pull Request](https://github.com/freeCodeCamp/freeCodeCamp/compare)  6. 🎉 Consigue que aprueben tu Pull request - Éxito!  O siemplement [crea un tema](https://github.com/freeCodeCamp/freeCodeCamp/issues) - toda pequeña ayuda cuenta! 😊   O simplemente [crea un tema](https://github.com/freeCodeCamp/freeCodeCamp/issues) - toda pequeña ayuda cuenta! 😊  ### [Sigue estas recomendaciones de nuestra guía de estilo para crear un artículo atractivo](/docs/style-guide-for-guide-articles.md)  ### Crear Pull Request para propoenr cambios   ### Crear Pull Request para proponer cambios   Hay dos formas de proponer cambios en el repositorio tras editar o añadir un articulo:   Hay dos formas de proponer cambios en el repositorio despues de editar o añadir un articulo:   - [Utilizando la interfaz de GitHub en tu navegador](#using-the-github-web-interface-on-your-browser). - [Trabajando en tu ordenador personal](#working-on-your-local-machine) (_recomendado_ para previsualiar cambios).   - [Utilizando el sistema de comunicacion de GitHub en tu navegador](#using-the-github-web-interface-on-your-browser). - [Trabajando en tu maquina local](#working-on-your-local-machine) (_recomendado_ para pre-visualiar cambios).   #### Utilizar la interaz web de GitHub   #### Utilizar el sistema de comunicacion web de GitHub  Mira este vídeo de demostración o sigue los siguientes pasos:  **[TODO]** Update the GIF recording.   **[TODO]** Actualizar la grabacion GIF.   ![GIF showing the GitHub interface steps](#)   ![GIF mostrando los pasos de la interfaz de GitHub](#)   1. Ve a la carpets **"páginas"** (situado en [`guide`](/guide)) donde encontrarás el artículo raiz que quieras editar.   1. Ve a las carpetas **"páginas"** (situado en [`guide`](/guide)) donde encontrarás el artículo raiz que quieras editar.  > Todas las raíces estarán en un archivo index.md  2. Pincha en Editar este archivo y haz tus cambios al archivo en la consola de edición de GitHub.   2. Pincha en Editar este archivo y hace tus cambios al archivo en la consola de edición de GitHub.  > Si el icono aparece gris y te muestra la alerta "Debes estar en una rama para hacer o proponer cambios a este archivo", significa que probablemente estés en la rama de otra persona. En la parte superior izquierda de la página hay una casilla desplegable que dice: "Árbol: #######". Pincha en el desplegable y cambia la rama a maestra. El icono de edición debería estar disponible ahora.


Documentos: Actualizadas recomendaciones de contribución ``` <del> Se breve, no más de 50 caracteres. Puedes añadir información extra en la descripción del mensaje. </del> <ins> Sea breve, no más de 50 caracteres. Puedes añadir información extra en la descripción del mensaje. </ins> esto no supone ningún esfuerzo adicional respecto a mensajes como 'update file' o 'add index.md'


5. En la siguiente pantalla, puedes añadir más detalles sobre tu PR, luego pincha en <kbd>Crear pull request</kbd>. <del> Enhorabuena 🎉! Acabas de crear una pull request. </del> <ins> Felicidades 🎉! Acabas de crear un pull request. </ins> #### Trabajar desde tu sistema local (_recomendado_ para revisar cambios) <del> No es obligatorio que trabajes en tu sistema personal, salvo que desees previsualizar tus cambios, o trabajar con mejoras y arreglos de UI. También es recomendable si tienes problemas con git como errores de integración, rebase, etc. </del> <ins> No es obligatorio que trabajes en tu sistema personal, salvo que desees pre-visualizar tus cambios, o trabajar con version actualizada y arreglos de UI. También es recomendable si tienes problemas con git como errores de integración, rebase, etc. </ins> <del> ##### Lee sobre esta recomendaciones en [Cómo configurar freeCodeCamp localmente](/docs/how-to-setup-freecodecamp-locally.md) </del> <ins> ##### Lee sobre estas recomendaciones en [Cómo configurar freeCodeCamp localmente](/docs/how-to-setup-freecodecamp-locally.md) </ins> ### Aceptación de la PR <del> Estas son algunos criterios utilizados por los revisores cuando evalúan PRs: </del> <ins> Estos son algunos criterios utilizados por los criticos cuando evalúan PRs: </ins> - Descripción y título relevantes - La PR respeta la [guía de estilo](/docs/style-guide-for-guide-articles) - Consejos generales de QA de las [recomendaciones para Moderadores](https://forum.freecodecamp.org/t/freecodecamp-moderator-guidelines/18295) <del> - Siempre y cuando la PR suponga una mejora o ampliación de la guía, será aceptada aunque tenga errores gramaticales o contenido parcial </del> <ins> - Siempre y cuando el PR suponga una mejora o ampliación de la guía, será aceptado aunque tenga errores gramaticos o contenido parcial </ins> - Las PR más antiguas se revisan primero #### Etiquetas - **contenido** es para Pull Requests que modifican el contenido de artículos en la guía (añaden un nuevo artículo o actualizan uno existente) <del> - **duplicada** es para Pull Request que contienen el mismo contenido que otra PR abierta - **cambios solicitados** es para Pull Requests que necesitan algún cambio antes de ser integradas - **pasada** es para Pull Requests que con etiqueta _"changes requested"_ que no han tenido actividad durante al menos 2 semanas y serán por tanto cerradas - Una  pull request _pasada_ debe cerrarse. </del> <ins> - **duplicada** es para Pull Request que contienen el mismo contenido que otro PR abierto - **cambios solicitados** es para Pull Requests que necesitan algún cambio antes de ser integrados - **pasada** es para Pull Requests que con etiqueta _"changes requested"_ que no han tenido actividad durante al menos 2 semanas y serán por tanto cerrados - Un  pull request _pasado_ debe cerrarse. </ins> - Este es [un ejemplo](https://github.com/freeCodeCamp/freeCodeCamp/pull/235). #### Contenido conflictivo/duplicado <del> Se considera **duplicada** una PR si hace cambios al mismo artículo que otra PR. </del> <ins> Se considera **duplicado** un PR si hace cambios al mismo artículo que otro PR. </ins> En general el revisor: <del> 1. Organizará las PR desde la más antigua </del> <ins> 1. Organizará los PR desde lo más antiguo </ins> 2. Buscará para PRs con contenido similar <del> 3. Integrará desde la más antigua a las más nueva </del> <ins> 3. Integrará desde lo más antiguo a los más nuevos </ins> <del> Muy probablemente aparecerán conflictos al integrar PRs duplicadas. </del> <ins> Muy probablemente aparecerán conflictos al integrar PRs duplicados. </ins> <del> Los revisores harán todos los esfuerzos posibles para resolver estos conflictos e integrar las PRs. </del> <ins> Los revisores harán todos los esfuerzos posibles para resolver estos conflictos e integrar los PRs. </ins> #### Solicitar cambios <del> Si la Pull Request no es perfect el revisor podría: </del> <ins> Si el Pull Request no es perfecto el revisor podría: </ins> - solicitar cambios al contribuidor y añadir la etiqueta *cambios solicitados* <del> - solucionar errores menores y hacer un envío encima de la PR </del> <ins> - solucionar errores menores y hacer un envío encima de el PR </ins> #### Travis CI Build <del> Todas las PRs deben superar los test de Travis CI antes de poder ser integradas. </del> <ins> Todos los PRs deben superar los test de Travis CI antes de poder ser integrados. </ins> <del> Si una PR rompe la ejecución (un test de Travis CI falla y muestra una "X" roja) hay tres cauas probables y tendrás que resolver el problemas antes de que podamos integrar la PR: </del> <ins> Si un PR rompe la ejecución (un test de Travis CI falla y muestra una "X" roja) hay tres causas probables y tendrás que resolver el problema antes de que podamos integrar el PR: </ins> <del> 1. Tu PR crea un nueva artículo pero la falta un archivo `index.md` en algún lugar. </del> <ins> 1. Tu PR crea un nuevo artículo pero le falta un archivo `index.md` en algún lugar. </ins> - Cada directorio en `src/pages` necesita un archivo `index.md` en él (y debe llamarse `index.md`). - Dos escenarios muy probables son - llamaste al archivo de forma distinta a `index.md`, o


<ins> <!-- do not translate this --> | [Read these guidelines in other languages](/docs/i18n-languages) | |-| <!-- do not translate this --> # Как создать Pull Request (Пулл Реквест) ## Как сделать хороший заголовок для Pull Request: Создавая Pull Request (PR), воспользуйтесь данной таблицей, чтобы решить, как правильно озаглавить PR в формате: `fix/feat/chore/refactor/docs/perf (scope): PR Title` Например: `fix(learn): Fixed tests for the do...while loop challenge`. | Область | Описание | |---|---| | `learn`,`curriculum` | Для PR'ов, которые вносят изменения в учебный план. | | `client` | Для PR'ов, которые вносят изменения в логику клиентской платформы или пользовательский интерфейс. | | `guide` | Для PR'ов, которые вносят изменения в инстукции. | | `docs` | Для PR'ов, которые вносят изменения в документацию. | ## Создание Пулл Реквеста (PR) 1. После того, как вы внесёте какие-нибудь изменения в свой форк репозитория, GitHub предложит вам создать PR ![Изображение - Предложение о создании PR](/docs/images/github/compare-pull-request-prompt.png) 2. По умолчанию все PR создаются в ветку `master` основного репозитория freeCodeCamp При создании PR, убедитесь, что в поле "base fork" указан репозиторий freeCodeCamp/freeCodeCamp ![Изображение - Сравнение форков при создании PR](/docs/images/github/comparing-forks-for-pull-request.png) 3. Нажать на кнопку "Create pull request", для создания PR из вашей верки в ветку `master` freeCodeCamp. 4. В поле описания PR добавьте более подробный отчёт сделанных вами изменений и причины по которым появилась такая необходимость - Вам будет предоставлен шаблон, который содержит контрольные список пунктов, которые вам необходимо выполнить, прежде чем вы создадите PR. - Заполните эти пункты. Опираясь на них, будет приниматься решение о рассмотрении и принятии вашего PR - Если PR предназначен для исправления существующей ошибки/проблемы, то в конце описание вашего PR добавьте ключевое слово `closes` и #xxxx (где xxxx это номер выпуска). Например: `closes #1337`. Так GitHub поймёт, что при успешном принятии PR нужно автоматически закрыть Issue с указанным номером 5. Укажите, тестировали ли вы локальную копию сайта или нет. Тестирование необходимо, когда вы не просто меняете какой-то текст (например, статью руководства), а изменяете JavaScript, HTML или CSS файлы, которые могут изменить функциональность или макет страницы. </ins>


--- title: Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset --- ## Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset This is a stub. Help our community expand it. This quick style guide will help ensure your pull request gets accepted.


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


- text: No global myVar variable testString: assert(typeof myVar === 'undefined', 'No global myVar variable'); - text: Add a local myVar variable  testString: assert(/vars+myVar/.test(code), 'Add a local myVar variable');   testString: assert(/functions+myLocalScopes*(s*)s*{s[sS]+s*vars*myVars*(s*|=[sS]+)s*;[sS]+}/.test(code), 'Add a local myVar variable');  ```


import React from 'react'; import { Link as GatsbyLink } from 'gatsby'; import { Grid, Row, Col } from '@freecodecamp/react-bootstrap'; <del> import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'; </del> import './footer.css';


return ( <a href={to} {...other} rel='noopener noreferrer' target='_blank'> {children} <del> <FontAwesomeIcon className='external-link-icon' icon={faExternalLinkAlt} size='xs' /> </del> </a> ); };


import { userSelector, isSignedInSelector, <del> openDonationModal, showDonationSelector, </del> submitComplete, updateComplete, updateFailed


'project.backEnd': submitProject }; <del> function shouldShowDonate(state) { return showDonationSelector(state) ? of(openDonationModal()) : empty(); } </del> export default function completionEpic(action$, state$) { return action$.pipe( ofType(types.submitChallenge), switchMap(({ type }) => { const state = state$.value; const meta = challengeMetaSelector(state); <del> const { isDonating } = userSelector(state); </del> const { nextChallengePath, introPath, challengeType } = meta; <del> const showDonate = isDonating ? empty() : shouldShowDonate(state); </del> const closeChallengeModal = of(closeModal('completion')); let submitter = () => of({ type: 'no-user-signed-in' }); if (


return submitter(type, state).pipe( tap(() => navigate(introPath ? introPath : nextChallengePath)), concat(closeChallengeModal), <del> concat(showDonate), </del> filter(Boolean) ); })


import { isSignedInSelector, currentChallengeIdSelector, <ins> openDonationModal, showDonationSelector, </ins> updateComplete, <del> updateFailed </del> <ins> updateFailed, userSelector </ins> } from '../../../redux'; import { post } from '../../../utils/ajax';


yield put(updateSuccessMessage(randomCompliment())); } <ins> function* showDonateModalSaga() { let { isDonating } = yield select(userSelector); let shouldShowDonate = yield select(showDonationSelector); if (!isDonating && shouldShowDonate) { yield put(openDonationModal()); } } </ins> export function createCurrentChallengeSaga(types) { return [ takeEvery(types.challengeMounted, currentChallengeSaga), <del> takeEvery(types.challengeMounted, updateSuccessMessageSaga) </del> <ins> takeEvery(types.challengeMounted, updateSuccessMessageSaga), takeEvery(types.challengeMounted, showDonateModalSaga) </ins> ]; }


Вы можете внести свой вклад в интересующую вас область: <del> 1. [Внести вклад в этот открытый репозиторий.](#contribute-to-this-open-source-codebase) </del> <ins> 1. [Внести вклад в этот открытый репозиторий.](#внести-свой-вклад-в-этот-open-source-проект) </ins> Помогите нам в создании или редактировании [обучающих статей](https://www.freecodecamp.org/guide), [задач по программированию](https://www.freecodecamp.org/learn) или исправлении ошибок на нашей обучающей платформе.


Вы можете помочь нам: <del> - [📝 В исследовании, написании и обновлении статей нашего руководства.](#research-write-and-update-our-guide-articles) </del> <ins> - [📝 В исследовании, написании и обновлении статей нашего руководства.](#изучение-написание-и-обновление-статей-нашего-руководства) </ins> <del> - [💻 В создании, обновлении и исправлении ошибок в наших задачах по программированию.](#create-update-and-fix-bugs-in-our-curriculum-challenges) </del> <ins> - [💻 В создании, обновлении и исправлении ошибок в наших задачах по программированию.](#создание-обновление-и-исправление-ошибок-в-наших-задачах-на-кодирование) </ins> <del> - [🌐 В переводе обучающих статей и задач по программированию.](#translate-guide-articles-and-curriculum-challenges) </del> <ins> - [🌐 В переводе обучающих статей и задач по программированию.](#перевод-статей-руководства-и-задач-на-кодирование) </ins> <del> - [🛠 В исправлении ошибок на обучающей платформе freeCodeCamp.org](#help-us-fix-bugs-in-freecodecamporgs-learning-platform) </del> <ins> - [🛠 В исправлении ошибок на обучающей платформе freeCodeCamp.org](#помогите-нам-исправить-ошибки-в-обучающей-платформе-freecodecamporg) </ins> ### Изучение, написание и обновление статей нашего руководства


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