From 73b913f651eae36da6e637576cd58e15e8e35e5f Mon Sep 17 00:00:00 2001 From: camperbot Date: Thu, 21 Oct 2021 06:31:07 -0700 Subject: [PATCH] chore(i18n,curriculum): update translations (#43957) --- ...l-balance-using-the-text-align-property.md | 2 +- .../access-the-json-data-from-an-api.md | 2 +- .../convert-json-data-to-html.md | 24 +++++++------- ...on-data-to-find-a-users-gps-coordinates.md | 24 +++++++------- ...t-json-with-the-javascript-fetch-method.md | 26 +++++++-------- ...th-the-javascript-xmlhttprequest-method.md | 32 +++++++++---------- ...h-javascript-using-the-onclick-property.md | 12 +++---- ...th-the-javascript-xmlhttprequest-method.md | 22 ++++++------- ...re-filter-json-to-get-the-data-you-need.md | 12 +++---- .../render-images-from-data-sources.md | 14 ++++---- 10 files changed, 85 insertions(+), 85 deletions(-) diff --git a/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md b/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md index 2272c294a1..0878364ae1 100644 --- a/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md +++ b/curriculum/challenges/espanol/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md @@ -13,7 +13,7 @@ Esta sección del currículo se enfoca en el Diseño Visual Aplicado. El primer El texto es frecuentemente una gran parte del contenido web. CSS tiene múltiples opciones para alinearlo con la propiedad `text-align`. -`text-align: justify;` hace que todas las líneas de texto, excepto la última línea, se encuentren con los lados izquierdo y derecho de la caja. +`text-align: justify;` espacia el texto para que cada línea tenga el mismo ancho. `text-align: center;` centra el texto diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md index 828799b5ce..3b7b87ea63 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md @@ -8,7 +8,7 @@ dashedName: access-the-json-data-from-an-api # --description-- -En el desafío anterior, vimos cómo obtener datos JSON de la API de Cat Photo de freeCodeCamp. +En el desafío anterior, vimos cómo obtener datos JSON de la API de foto del gato de freeCodeCamp. Ahora examinarás más de cerca los datos devueltos para comprender mejor el formato JSON. Recuerda algunas nociones en JavaScript: diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md index 8678469f29..47b9eb476d 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md @@ -1,6 +1,6 @@ --- id: 587d7fae367417b2b2512be5 -title: Convert JSON Data to HTML +title: Convierte datos JSON a HTML challengeType: 6 forumTopicId: 16807 dashedName: convert-json-data-to-html @@ -8,15 +8,15 @@ dashedName: convert-json-data-to-html # --description-- -Now that you're getting data from a JSON API, you can display it in the HTML. +Ahora que estás obteniendo datos de una API JSON, puedes mostrarlos en el HTML. -You can use a `forEach` method to loop through the data since the cat photo objects are held in an array. As you get to each item, you can modify the HTML elements. +Puedes utilizar un método `forEach` para hacer un bucle a través de los datos, ya que los objetos de foto del gato se mantienen en un arreglo. A medida que llegas a cada elemento, puedes modificar los elementos HTML. -First, declare an html variable with `let html = "";`. +Primero, declara una variable html con `let html = "";`. -Then, loop through the JSON, adding HTML to the variable that wraps the key names in `strong` tags, followed by the value. When the loop is finished, you render it. +Luego, itera a través del JSON, agregando HTML a la variable que envuelve los nombres claves con una etiqueta `strong`, seguidas por el valor. Cuando el bucle termine, lo renderizas. -Here's the code that does this: +Este es el código que hace esto: ```js let html = ""; @@ -30,13 +30,13 @@ json.forEach(function(val) { }); ``` -**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to cross-site scripting attacks. +**Nota:** Para este desafío, necesitas añadir nuevos elementos HTML a la página, por lo que no puedes confiar en `textContent`. En su lugar, necesitas usar `innerHTML`, lo que puede hacer que un sitio sea vulnerable a ataques de cross-site scripting. # --instructions-- -Add a `forEach` method to loop over the JSON data and create the HTML elements to display it. +Añade un método `forEach` para pasar en bucle sobre los datos JSON y crea los elementos HTML para mostrarlos. -Here is some example JSON: +Aquí hay algunos ejemplos de JSON: ```json [ @@ -52,19 +52,19 @@ Here is some example JSON: # --hints-- -Your code should store the data in the `html` variable +Tu código debe almacenar los datos en la variable `html` ```js assert(__helpers.removeWhiteSpace(code).match(/html(\+=|=html\+)/g)) ``` -Your code should use a `forEach` method to loop over the JSON data from the API. +Tu código debe usar un método `forEach` para pasar un bucle sobre los datos JSON de la API. ```js assert(code.match(/json\.forEach/g)); ``` -Your code should wrap the key names in `strong` tags. +Tu código debe envolver los nombres de las claves en etiquetas `strong`. ```js assert(code.match(/.+<\/strong>/g)); diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md index bed1c43e98..2a3e28cba5 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md @@ -1,6 +1,6 @@ --- id: 587d7faf367417b2b2512be8 -title: Get Geolocation Data to Find A User's GPS Coordinates +title: Obtén datos de geolocalización para encontrar las coordenadas GPS de un usuario challengeType: 6 forumTopicId: 18188 dashedName: get-geolocation-data-to-find-a-users-gps-coordinates @@ -8,15 +8,15 @@ dashedName: get-geolocation-data-to-find-a-users-gps-coordinates # --description-- -Another cool thing you can do is access your user's current location. Every browser has a built in navigator that can give you this information. +Otra cosa interesante que puedes hacer es acceder a la ubicación actual de tu usuario. Cada navegador tiene un componente incorporado que puede darte esta información. -The navigator will get the user's current longitude and latitude. +El navegador obtendrá la longitud y la latitud actuales del usuario. -You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct. +Verás un mensaje para permitir o impedir que este sitio conozca tu ubicación actual. El desafío se puede completar de cualquier manera, siempre y cuando el código sea correcto. -By selecting allow, you will see the text on the output phone change to your latitude and longitude. +Al seleccionar permitir, verás el texto en el teléfono de salida cambiar a tu latitud y longitud. -Here's code that does this: +Este es el código que hace esto: ```js if (navigator.geolocation){ @@ -26,33 +26,33 @@ if (navigator.geolocation){ } ``` -First, it checks if the `navigator.geolocation` object exists. If it does, the `getCurrentPosition` method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the `position` object's values for latitude and longitude using dot notation and updates the HTML. +Primero, verifica si el objeto `navigator.geolocation` existe. Si lo hace, se llama al método `getCurrentPosition` en ese objeto, que inicia una solicitud asíncrona para la posición del usuario. Si la solicitud se realiza con éxito, se ejecuta la función callback del método. Esta función accede los valores de latitud y longitud del objeto `position` usando notación de puntos y actualiza el HTML. # --instructions-- -Add the example code inside the `script` tags to check a user's current location and insert it into the HTML. +Añade el código de ejemplo dentro de las etiquetas `script` para comprobar la ubicación actual de un usuario e insertarlo en el HTML. # --hints-- -Your code should use `navigator.geolocation` to access the user's current location. +Tu código debe usar `navigator.geolocation` para acceder a la ubicación actual del usuario. ```js assert(code.match(/navigator\.geolocation\.getCurrentPosition/g)); ``` -Your code should use `position.coords.latitude` to display the user's latitudinal location. +Tu código debe usar `position.coords.latitude` para acceder a la ubicación actual del usuario. ```js assert(code.match(/position\.coords\.latitude/g)); ``` -Your code should use `position.coords.longitude` to display the user's longitudinal location. +Tu código debe usar `position.coords.longitude` para acceder a la ubicación actual del usuario. ```js assert(code.match(/position\.coords\.longitude/g)); ``` -You should display the user's position within the `div` element with `id="data"`. +Debes mostrar la posición del usuario dentro del elemento `div` con `id="data"`. ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md index 36b522ce91..d8d8555069 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md @@ -1,6 +1,6 @@ --- id: 5ccfad82bb2dc6c965a848e5 -title: Get JSON with the JavaScript fetch method +title: Obtén JSON con el método fetch de JavaScript challengeType: 6 forumTopicId: 301501 dashedName: get-json-with-the-javascript-fetch-method @@ -8,9 +8,9 @@ dashedName: get-json-with-the-javascript-fetch-method # --description-- -Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to `XMLHttpRequest`, but the syntax is considered easier to understand. +Otra manera de solicitar datos externos es utilizar el método `fetch()` de JavaScript. Es equivalente a `XMLHttpRequest`, pero la sintaxis se considera más fácil de entender. -Here is the code for making a GET request to `/json/cats.json` +Aquí está el código para hacer una solicitud GET a `/json/cats.json` ```js @@ -22,29 +22,29 @@ fetch('/json/cats.json') ``` -Take a look at each piece of this code. +Echa un vistazo a cada parte de este código. -The first line is the one that makes the request. So, `fetch(URL)` makes a `GET` request to the URL specified. The method returns a Promise. +En la primera línea es la que realiza la petición. Entonces, `fetch(URL)` realiza una petición `GET` a la URL especificada. Este método devuelve una Promesa. -After a Promise is returned, if the request was successful, the `then` method is executed, which takes the response and converts it to JSON format. +Después de la devolución de la promesa, si la petición fue satisfactoria, se ejecuta el método `then`, el cual toma la respuesta y la convierte a formato JSON. -The `then` method also returns a Promise, which is handled by the next `then` method. The argument in the second `then` is the JSON object you are looking for! +El método `then` también devuelve una promesa, la cual es manejada por el siguiente método `then`. ¡El argumento en el segundo `then` es el objeto JSON que estás buscando! -Now, it selects the element that will receive the data by using `document.getElementById()`. Then it modifies the HTML code of the element by inserting a string created from the JSON object returned from the request. +Ahora, selecciona el elemento que recibirá los datos usando `document.getElementById()`. Luego modifica el código HTML del elemento insertando una cadena creada a partir del objeto JSON devuelto de la solicitud. # --instructions-- -Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`. +Actualiza el código para crear y enviar una solicitud `GET` a la API de foto del gato de freeCodeCamp. Pero esta vez, usando el método `fetch` en lugar de `XMLHttpRequest`. # --hints-- -Your code should make a `GET` request with `fetch`. +Tu código debe hacer una solicitud `GET` con `fetch`. ```js assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g)); ``` -Your code should use `then` to convert the response to JSON. +Tu código debe usar `then` para convertir la respuesta a JSON. ```js assert( @@ -54,13 +54,13 @@ assert( ); ``` -Your code should use `then` to handle the data converted to JSON by the other `then`. +Tu código debe usar `then` para manejar los datos convertidos a JSON por el otro `then`. ```js assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g)); ``` -Your code should get the element with id `message` and change its inner HTML to the string of JSON data. +Tu código debe obtener el elemento con id `message` y cambiar su HTML interno a la cadena de datos JSON. ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md index 0136675396..7d9cb00e06 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md @@ -1,6 +1,6 @@ --- id: 587d7fae367417b2b2512be3 -title: Get JSON with the JavaScript XMLHttpRequest Method +title: Obtén JSON con el método XMLHttpRequest JavaScript challengeType: 6 forumTopicId: 301502 dashedName: get-json-with-the-javascript-xmlhttprequest-method @@ -8,19 +8,19 @@ dashedName: get-json-with-the-javascript-xmlhttprequest-method # --description-- -You can also request data from an external source. This is where APIs come into play. +También puedes solicitar datos de una fuente externa. Aquí es donde entran en juego las API. -Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another. You'll learn how to update HTML with the data we get from APIs using a technology called AJAX. +Recuerda que las APIs - o Interfaces de Programación de Aplicaciones - son herramientas que las computadoras utilizan para comunicarse entre sí. Aprenderás cómo actualizar HTML con los datos que obtenemos de las APIs usando una tecnología llamada AJAX. -Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation. +La mayoría de las API web transfieren datos en un formato llamado JSON. JSON significa Notación de Objetos JavaScript. -JSON syntax looks very similar to JavaScript object literal notation. JSON has object properties and their current values, sandwiched between a `{` and a `}`. +La sintaxis JSON se ve muy similar a un objeto de JavaScript. JSON tiene propiedades de objetos y sus valores actuales, enrollados entre un `{` y un `}`. -These properties and their values are often referred to as "key-value pairs". +Estas propiedades y sus valores a menudo son referidos como "pares clave-valor". -However, JSON transmitted by APIs are sent as `bytes`, and your application receives it as a `string`. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The `JSON.parse` method parses the string and constructs the JavaScript object described by it. +Sin embargo, JSON transmitido por APIs se envía como `bytes`, y tu aplicación lo recibe como `string`. Estos pueden ser convertidos en objetos de JavaScript, pero no son objetos de JavaScript por defecto. El método `JSON.parse` analiza la cadena y construye el objeto JavaScript descrito por ella. -You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this: +Tú puedes solicitar el JSON desde la API de foto del gato de freeCodeCamp. Este es el código que puedes poner en tu evento de clic para hacer esto: ```js const req = new XMLHttpRequest(); @@ -32,21 +32,21 @@ req.onload = function(){ }; ``` -Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a `GET` request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text. +Aquí hay una revisión de lo que cada pieza está haciendo. El objeto `XMLHttpRequest` de JavaScript tiene un número de propiedades y métodos que se utilizan para transferir datos. Primero, se crea y guarda una instancia del objeto `XMLHttpRequest` en la variable `req`. A continuación, el método `open` inicializa una solicitud - este ejemplo está solicitando datos de una API, por lo tanto es una solicitud `GET`. El segundo argumento para `open` es la URL de la API de la que estás solicitando datos. El tercer argumento es un valor booleano donde `true` lo hace una solicitud asincrónica. El método `send` envía la solicitud. Finalmente, el manejador de eventos `onload` analiza los datos devueltos y aplica `JSON.stringify` para convertir el objeto de JavaScript en una cadena. Esta cadena es luego insertada como el texto del mensaje. # --instructions-- -Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. Then click the `Get Message` button. Your AJAX function will replace the `The message will go here` text with the raw JSON output from the API. +Actualiza el código para crear y enviar una solicitud `GET` a la API de foto del gato de freeCodeCamp. Luego haz clic en el botón `Get Message`. Tu función AJAX reemplazará el texto `The message will go here` con la salida JSON de la API. # --hints-- -Your code should create a new `XMLHttpRequest`. +Tu código debe crear un nuevo `XMLHttpRequest`. ```js assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g)); ``` -Your code should use the `open` method to initialize a `GET` request to the freeCodeCamp Cat Photo API. +Tu código debe utilizar el método `open` para inicializar una solicitud `GET` a la API de foto del gato de freeCodeCamp. ```js assert( @@ -56,13 +56,13 @@ assert( ); ``` -Your code should use the `send` method to send the request. +Tu código debe utilizar el método `send` para enviar la solicitud. ```js assert(code.match(/\.send\(\s*\)/g)); ``` -Your code should have an `onload` event handler set to a function. +Tu código debe tener un manejador de eventos `onload` establecido a una función. ```js assert( @@ -70,13 +70,13 @@ assert( ); ``` -Your code should use the `JSON.parse` method to parse the `responseText`. +Tu código debe utilizar el método `JSON.parse` para analizar el `responseText`. ```js assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g)); ``` -Your code should get the element with class `message` and change its inner HTML to the string of JSON data. +Tu código debe obtener el elemento con id `message` y cambiar su HTML interno a la cadena de datos JSON. ```js assert( diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md index 5d57a07236..6fd4d41dd1 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md @@ -1,6 +1,6 @@ --- id: 587d7fad367417b2b2512be1 -title: Handle Click Events with JavaScript using the onclick property +title: Maneja los eventos de clic con JavaScript usando la propiedad onclick challengeType: 6 forumTopicId: 301503 dashedName: handle-click-events-with-javascript-using-the-onclick-property @@ -8,7 +8,7 @@ dashedName: handle-click-events-with-javascript-using-the-onclick-property # --description-- -You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called `DOMContentLoaded`. Here's the code that does this: +Quieres que tu código se ejecute solo una vez que la página haya terminado de cargar. Para eso, puedes adjuntar un evento JavaScript al documento llamado `DOMContentLoaded`. Este es el código que hace esto: ```js document.addEventListener('DOMContentLoaded', function() { @@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', function() { }); ``` -You can implement event handlers that go inside of the `DOMContentLoaded` function. You can implement an `onclick` event handler which triggers when the user clicks on the element with id `getMessage`, by adding the following code: +Puedes implementar manejadores de eventos que van dentro de la función `DOMContentLoaded`. Puedes implementar un manejador de eventos `onclick` que se activa cuando el usuario hace clic en el elemento con id `getMessage`, agregando el siguiente código: ```js document.getElementById('getMessage').onclick = function(){}; @@ -24,17 +24,17 @@ document.getElementById('getMessage').onclick = function(){}; # --instructions-- -Add a click event handler inside of the `DOMContentLoaded` function for the element with id of `getMessage`. +Agrega un manejador de eventos de clic dentro de la función `DOMContentLoaded` para el elemento con id `getMessage`. # --hints-- -Your code should use the `document.getElementById` method to select the `getMessage` element. +Tu código debe utilizar el método `document.getElementById` para seleccionar el elemento `getMessage`. ```js assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g)); ``` -Your code should add an `onclick` event handler. +Tu código debe agregar un manegador de eventos `onclick`. ```js assert(typeof document.getElementById('getMessage').onclick === 'function'); diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md index b1a807c2be..ae158ed295 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md @@ -1,6 +1,6 @@ --- id: 587d7faf367417b2b2512be9 -title: Post Data with the JavaScript XMLHttpRequest Method +title: Envía datos con el metodo XMLHttpRequest de JavaScript challengeType: 6 forumTopicId: 301504 dashedName: post-data-with-the-javascript-xmlhttprequest-method @@ -8,9 +8,9 @@ dashedName: post-data-with-the-javascript-xmlhttprequest-method # --description-- -In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL. +En los ejemplos anteriores, recibiste datos de un recurso externo. También puedes enviar datos a un recurso externo, siempre y cuando ese recurso sea compatible con solicitudes AJAX y conozca la URL. -JavaScript's `XMLHttpRequest` method is also used to post data to a server. Here's an example: +El método `XMLHttpRequest` de JavaScript también se utiliza para enviar datos a un servidor. He aquí un ejemplo: ```js const xhr = new XMLHttpRequest(); @@ -26,27 +26,27 @@ const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' }); xhr.send(body); ``` -You've seen several of these methods before. Here the `open` method initializes the request as a `POST` to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of `4` means the operation is complete, and a `status` of `201` means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field. +Ya has visto varios de estos métodos anteriormente. Aquí el método `open` inicializa la solicitud como un `POST` a la URL dada del recurso externo, y utiliza el `true` booleano para hacerlo asincrónico. El método `setRequestHeader` establece el valor de un encabezado de solicitud HTTP, que contiene información sobre el remitente y la solicitud. Debe ser llamado después del método `open`, pero antes del método `send`. Los dos parámetros son el nombre de encabezado y el valor a establecer como el cuerpo de ese encabezado. A continuación, el detector de eventos `onreadystatechange` maneja un cambio en el estado de la solicitud. Un `readyState` de `4` significa que la operación está completa, y un `status` de `201` significa que fue una solicitud exitosa. El HTML del documento puede ser actualizado. Finalmente, el método `send` envía la solicitud con el valor `body`. que la clave `userName` fue dada por el usuario en el campo `input`. # --instructions-- -Update the code so it makes a `POST` request to the API endpoint. Then type your name in the input field and click `Send Message`. Your AJAX function should replace `Reply from Server will be here.` with data from the server. Format the response to display your name appended with the text `loves cats`. +Actualiza el código para que hagas una solicitud `POST` al endpoint de la API. Luego escribe tu nombre en el campo de entrada y haz clic en `Send Message`. Tu función AJAX debe reemplazar `Reply from Server will be here.` con los datos del servidor. Formatea la respuesta para mostrar tu nombre adjuntado con el texto `loves cats`. # --hints-- -Your code should create a new `XMLHttpRequest`. +Tu código debe crear un nuevo `XMLHttpRequest`. ```js assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g)); ``` -Your code should use the `open` method to initialize a `POST` request to the server. +Tu código debe utilizar el método `open` para inicializar una solicitud `POST` a la API de foto del gato de freeCodeCamp. ```js assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g)); ``` -Your code should use the `setRequestHeader` method. +Tu código debe utilizar el método `setRequestHeader`. ```js assert( @@ -56,13 +56,13 @@ assert( ); ``` -Your code should have an `onreadystatechange` event handler set to a function. +Tu código debe tener un manejador de eventos `onreadystatechange` establecido a una función. ```js assert(code.match(/\.onreadystatechange\s*?=/g)); ``` -Your code should get the element with class `message` and change its `textContent` to `userName loves cats` +Tu código debe obtener el elemento con la clase `message` y cambiar su `textContent` a `userName loves cats` ```js assert( @@ -72,7 +72,7 @@ assert( ); ``` -Your code should use the `send` method. +Tu código debe usar el método `send`. ```js assert(code.match(/\.send\(\s*?body\s*?\)/g)); diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md index 749e3e3589..87f3e2e699 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md @@ -1,6 +1,6 @@ --- id: 587d7fae367417b2b2512be7 -title: Pre-filter JSON to Get the Data You Need +title: Pre-filtra JSON para obtener los datos que necesitas challengeType: 6 forumTopicId: 18257 dashedName: pre-filter-json-to-get-the-data-you-need @@ -8,11 +8,11 @@ dashedName: pre-filter-json-to-get-the-data-you-need # --description-- -If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it. +Si no quieres renderizar cada foto del gato que obtienes de la API de foto del gato de freeCodeCamp, tú puedes pre-filtrar el JSON antes de hacer un bucle a través de él. -Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose `id` key has a value of `1`. +Dado que los datos JSON se almacenan en un arreglo, puedes utilizar el método `filter` para filtrar el gato cuya clave `id` tiene un valor de `1`. -Here's the code to do this: +Este es el código que hace esto: ```js json = json.filter(function(val) { @@ -22,11 +22,11 @@ json = json.filter(function(val) { # --instructions-- -Add code to `filter` the json data to remove the cat with the `id` value of `1`. +Agrega código a `filter` los datos json para eliminar el gato con el valor `id` de `1`. # --hints-- -Your code should use the `filter` method. +Tu código debe usar el método `filter`. ```js assert(code.match(/json\.filter/g)); diff --git a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md index 2091e71567..4a6c74292a 100644 --- a/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md +++ b/curriculum/challenges/espanol/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md @@ -1,6 +1,6 @@ --- id: 587d7fae367417b2b2512be6 -title: Render Images from Data Sources +title: Procesa imágenes desde fuentes de datos challengeType: 6 forumTopicId: 18265 dashedName: render-images-from-data-sources @@ -8,11 +8,11 @@ dashedName: render-images-from-data-sources # --description-- -The last few challenges showed that each object in the JSON array contains an `imageLink` key with a value that is the URL of a cat's image. +Los últimos desafíos mostraron que cada objeto en el arreglo JSON contiene una clave `imageLink` con un valor que es la URL de la imagen de un gato. -When you're looping through these objects, you can use this `imageLink` property to display this image in an `img` element. +Cuando estás iterando a través de estos objetos, puedes usar esta propiedad `imageLink` para mostrar esta imagen en un elemento `img`. -Here's the code that does this: +Este es el código que hace esto: ```js html += ""; @@ -20,17 +20,17 @@ html += ""; # --instructions-- -Add code to use the `imageLink` and `altText` properties in an `img` tag. +Agrega código para usar las propiedades `imageLink` y `altText` en una etiqueta `img`. # --hints-- -You should use the `imageLink` property to display the images. +Debes usar la propiedad `imageLink` para mostrar las imágenes. ```js assert(code.match(/val\.imageLink/g)); ``` -You should use the `altText` for the `alt` attribute values of the images. +Debes utilizar el `altText` para los valores de atributo `alt` de las imágenes. ```js assert(code.match(/val\.altText/g));