fix(guide): simplify directory structure

guide/spanish/javascript/tutorials/add-new-properties-to-a-javascript-object/index.md

@@ -0,0 +1,26 @@
+---
+title: Add New Properties to a JavaScript Object
+localeTitle: Agregar nuevas propiedades a un objeto de JavaScript
+---
+Puede agregar nuevas propiedades a los objetos JavaScript existentes de la misma manera que los modificaría.
+
+Hay dos sintaxis diferentes, notación de puntos y notación de corchetes. La notación de puntos generalmente se prefiere por legibilidad, pero las propiedades deben ser un identificador válido.
+
+Aquí es cómo usar la notación de puntos:
+```
+myDog.bark = "woof-woof"; 
+```
+
+Aquí es cómo usar la notación de soporte:
+
+```javascript
+myObject['bark'] = "woof-woof"; 
+```
+
+Usando la notación de corchetes, podemos utilizar variables como nombres de propiedades:
+
+```javascript
+var dynamicProperty = "bark"; 
+ myObject[dynamicProperty] = "woof-woof"; 
+
+```

guide/spanish/javascript/tutorials/add-two-numbers-with-javascript/index.md

@@ -0,0 +1,9 @@
+---
+title: Add Two Numbers with JavaScript
+localeTitle: Añadir dos números con JavaScript
+---
+JavaScript usa el símbolo `+` para la suma. También se puede usar en lugar de `parseInt()` pero eso está más allá de esto.
+```
+var sum = 10 + 10; 
+
+```

guide/spanish/javascript/tutorials/build-javascript-objects/index.md

@@ -0,0 +1,28 @@
+---
+title: Build JavaScript Objects
+localeTitle: Construir objetos de JavaScript
+---
+Los objetos son útiles para almacenar datos de una manera estructurada y se pueden usar para representar objetos del mundo real, como un automóvil o un hotel en una computadora.
+
+Los objetos son similares a las matrices, excepto que, en lugar de utilizar índices para acceder y modificar sus datos, puede acceder a los datos de los objetos a través de lo que se denomina propiedades. Hay dos formas principales para crear objetos: el Objeto Literal y el Constructor.
+
+Usando la forma Literal de objetos, aquí es cómo crearíamos un objeto de muestra:
+```
+var cat = { 
+    name: "Whiskers", 
+    legs: 4, 
+    tails: 1, 
+    enemies: ["Water", "Dogs"] 
+ }; 
+```
+
+Usando el modo Constructor, aquí se muestra cómo crearíamos un objeto de muestra:
+```
+var cat = new Object(); 
+ cat.name = "Whiskers"; 
+ cat.legs = 4; 
+ cat.tails = 1; 
+ cat.enemies = ["Water", "Dogs"]; 
+```
+
+En la forma de Constructor, usamos la `new` palabra clave junto con `Object` (con mayúscula 'O') para crear una nueva instancia de objeto. Luego, usamos la notación de puntos para asignar los nombres de propiedad y los valores del objeto.

guide/spanish/javascript/tutorials/comment-your-javascript-code/index.md

@@ -0,0 +1,22 @@
+---
+title: Comment Your JavaScript Code
+localeTitle: Comenta tu código JavaScript
+---
+Los comentarios son una excelente manera de dejar notas para usted y para otras personas que más tarde necesitarán descubrir qué hace. Cualquier código en él será ignorado.
+
+Echemos un vistazo a las dos formas en que puede escribir comentarios en JavaScript.
+
+*   El comentario de doble barra comentará el resto del texto en la línea actual:
+
+`// This is a single line comment.`
+
+*   El comentario de slash-star-star-slash comentará todo entre los caracteres `/*` y `*/` :
+
+```javascript
+/* 
+ This is 
+ a multi-line comment 
+ (comment block) 
+ */ 
+
+```

guide/spanish/javascript/tutorials/construct-javascript-objects-with-functions/index.md

@@ -0,0 +1,17 @@
+---
+title: Construct JavaScript Objects with Functions
+localeTitle: Construir objetos de JavaScript con funciones
+---
+Usando constructores es fácil crear nuevos objetos usando un plano o constructor. La sintaxis de la declaración es un poco diferente pero aún así fácil de recordar.
+```
+// Let's add the properties engines and seats to the car in the same way that the property wheels has been added below. They should both be numbers. 
+ var Car = function() { 
+  this.wheels = 4; 
+  this.engines = 1; 
+  this.seats = 1; 
+ }; 
+ 
+ var myCar = new Car(); 
+```
+
+El nombre de una función constructora generalmente comienza con una letra mayúscula (a diferencia de otras funciones, que tienden a comenzar con un carácter en minúscula). Se supone que la letra mayúscula ayuda a recordar a los desarrolladores que utilicen la nueva palabra clave cuando crean un objeto con esa función.

guide/spanish/javascript/tutorials/create-a-javascript-slot-machine/index.md

@@ -0,0 +1,11 @@
+---
+title: Create a JavaScript Slot Machine
+localeTitle: Crear una máquina tragamonedas JavaScript
+---
+Para esto tenemos que generar tres números aleatorios usando la fórmula que nos dan y no la general. `Math.floor(Math.random() * (3 - 1 + 1)) + 1;`
+```
+slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1; 
+ slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1; 
+ slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1; 
+
+```

guide/spanish/javascript/tutorials/create-decimal-numbers-with-javascript/index.md

@@ -0,0 +1,9 @@
+---
+title: Create Decimal Numbers with JavaScript
+localeTitle: Crea números decimales con JavaScript
+---
+Las variables de número de JavaScript pueden tener decimales.
+```
+var myDecimal = 2.8; 
+
+```

guide/spanish/javascript/tutorials/debugging-javascript-with-browser-devtools/index.md

@@ -0,0 +1,90 @@
+---
+title: Debugging JavaScript with Browser Devtools
+localeTitle: Depuración de JavaScript con Devtools del navegador
+---
+Como desarrollador, a menudo querrás depurar el código. Es posible que ya haya usado `console.log` en algunos de los desafíos, que es la forma más sencilla de depurar.
+
+En este artículo, te contaremos algunos de los trucos más interesantes para depurar utilizando las herramientas de depuración nativas de los navegadores.
+
+## Una breve descripción del editor de código de FreeCodeCamp:
+
+Antes de saltar a la depuración, podemos filtrar algunos datos secretos sobre ese _increíble motor de verificación de códigos_ en FCC.
+
+Usamos un [CodeMirror](http://codemirror.net/mode/javascript/index.html) personalizado, como el editor de código. Se utiliza una [función `eval()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval) para evaluar el código JavaScript representado como una cadena desde el editor. Cuando se llama a `eval()` , los navegadores ejecutarán su código de forma nativa. Aprenderemos más por qué este secreto es importante en las secciones posteriores de este artículo.
+
+## Ahora pasamos a los trucos:
+
+## Google Chrome DevTools
+
+Google Chrome es uno de los navegadores más populares con un motor de JavaScript incorporado llamado [V8](https://developers.google.com/v8/) , y ofrece un gran conjunto de herramientas para desarrolladores llamados [Chrome DevTools](https://developer.chrome.com/devtools) . Se recomienda visitar su [guía completa de depuración de JavaScript](https://developer.chrome.com/devtools/docs/javascript-debugging) .
+
+### 1: Fundamentos de DevTools
+
+#### Lanzamiento de Chrome DevTools
+
+Pulsa `F12`
+
+. Alternativamente puede presionar
+
+`Ctrl` + `Shift` + `I`
+
+en Windows y Linux o
+
+`Cmd` + `Shift` + `I`
+
+en Mac, o si le encanta su mouse, vaya a `Menu > More Tools > Developer Tools` .
+
+#### Conocer las `Sources` y las pestañas de la `console` .
+
+Estas dos pestañas son las que quizás sean tus mejores amigas al depurar. La pestaña `Sources` se puede usar para visualizar todos los scripts que se encuentran en la página web que está visitando. Esta pestaña tiene secciones para la ventana de código, árbol de archivos, pila de llamadas y ventanas de visualización, etc.
+
+La pestaña de la `console` es donde va toda la salida del registro. Además, puede utilizar el indicador de la pestaña de la consola para ejecutar el código JavaScript. Es una especie de símbolo del sistema en Windows, o terminal en Linux.
+
+_Consejo: Alterne la consola en cualquier momento en DevTools utilizando la `Esc` ._
+
+### 2: Atajos y características comunes
+
+Si bien puede visitar la [lista completa de accesos directos](https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts) , a continuación se enumeran algunos de los más utilizados:
+
+Característica de Windows, Linux Mac  
+Buscar una palabra clave, regex es compatible. `Ctrl` + `F``Cmd` + `F`  
+Buscar y abrir un archivo `Ctrl` + `P``Cmd` + `P`  
+Saltar a la línea `Ctrl` + `G` + `:line_no``Cmd` + `G` + `:line_no`  
+Agregue un punto de interrupción `Ctrl` + `B` , o haga clic en la línea no. `Cmd` + `B` , o haga clic en la línea no.  
+Pausar / reanudar la ejecución del script `F8` `F8`  
+Paso sobre la siguiente función llamada `F10` `F10`  
+Paso a la siguiente función llamada `F11` `F11`
+
+### 3: Usando un Mapa de Origen para nuestro Código
+
+Una de las características más interesantes que te encantará es la [depuración de secuencias de comandos dinámicas](https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript) , sobre la marcha, a través de los [mapas de origen](https://developer.chrome.com/devtools/docs/javascript-debugging#source-maps) .
+
+Cada script se puede visualizar en la pestaña Fuente de DevTools. La pestaña fuente tiene todos los archivos fuente de JavaScript. Pero el código del editor de códigos se ejecuta a través de `eval()` en un contenedor llamado máquina virtual (VM) dentro del proceso del navegador.
+
+Como ya habrá adivinado, nuestro código es en realidad un script que no tiene un nombre de archivo. Así que no vemos eso en la pestaña Fuente.
+
+> ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": destellos") **_¡Aquí viene el hack!_** ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": destellos")
+
+Debemos aprovechar `Source Maps` para asignar un nombre al JavaScript de nuestro editor. Es bastante simple:
+
+Digamos que estamos en el desafío de [factorializar](https://www.freecodecamp.com/challenges/factorialize-a-number) , y nuestro código se ve así:
+```
+function factorialize(num) { 
+  if(num <= 1){ 
+  ... 
+ } 
+ factorialize(5); 
+```
+
+Todo lo que necesitamos hacer es agregar `//# sourceURL=factorialize.js` en la parte superior del código, es decir, la primera línea:
+```
+//# sourceURL=factorialize.js 
+ 
+ function factorialize(num) { 
+  if(num <= 1){ 
+  ... 
+```
+
+> ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": destellos") **_Y Eureka eso es todo!_** ![:sparkles:](//forum.freecodecamp.com/images/emoji/emoji_one/sparkles.png?v=2 ": destellos")
+
+Ahora abre DevTools y busca el nombre del archivo. ¡Añade puntos de quiebre, depura y disfruta!

guide/spanish/javascript/tutorials/debugging-node-files-using-cli-commands/index.md

@@ -0,0 +1,48 @@
+---
+title: Debugging Node files using CLI commands
+localeTitle: Depuración de archivos de nodo mediante comandos CLI
+---
+## Depuración de archivos de nodo mediante comandos CLI
+
+En este tutorial, aprenderá cómo puede depurar su código Node.js en la línea de comandos. Su simple código de JavaScript puede ser fácilmente depurado utilizando los DevTools de un navegador. Para Node, puede depurar su código sin salir de su interfaz de línea de comandos (CLI).
+
+Digamos que tienes un archivo nombrado como `contents.js` . Ejecutaría el archivo usando el comando de `node` .
+
+```bash
+node contents.js 
+```
+
+Esto ya debe saberlo ya que estás escribiendo el código Node.js. Ahora cualquier error que aparezca debe ser depurado. Para ejecutar el archivo en modo de depuración, agregue la palabra clave `inspect` mientras ejecuta el archivo.
+
+```bash
+node inspect contents.js 
+```
+
+Ahora este comando abrirá su archivo en modo de depuración. De aquí en adelante, puede recorrer su código una línea a la vez presionando la tecla **N** en su teclado.
+
+El depurador se iniciará en la primera línea. Al presionar **N** , puede mover el depurador a la siguiente línea. Si hubiera un error en la primera línea, mostraría un error en lugar de moverse a la segunda línea. Esto es muy útil. Si, por ejemplo, hay un error en la línea 17, le mostrará el error antes de seguir adelante.
+
+Puede haber un error en su lógica, lo que significa que desea que se muestre un cierto valor, pero en su lugar muestra un valor diferente. En ese caso, agregar `console.log()` s podría ayudarlo y, con el modo de depuración, será más fácil identificar la causa del error.
+
+* * *
+
+Ahora, a veces, sucede que su código fuente es enorme. Entra en el modo de depuración para depurar sus errores y está seguro de que el error proviene de una función en la línea 52. Pero dado que el modo de depuración comienza en la línea 1, ¿no tiene más remedio que visitar la línea 52 uno por uno? ¡Absolutamente no!
+
+Simplemente agregue el `debugger` palabras clave antes de la función.
+
+```javascript
+console.log("Outside the function....everything's going smoothly"); 
+ 
+ debugger; 
+ 
+ function doesSomething() { 
+    //some logic 
+    console.log("Something went wrong inside here!"); 
+ } 
+```
+
+Ahora abra el archivo nuevamente en modo de depuración y esta vez presione **C** en su teclado.
+
+Presionar **N** mueve el depurador a la siguiente línea y presionar **C** le dice al depurador que recorra todo el código de una sola vez. Es lo mismo que ejecutar sin modo de depuración. _Pero_ , su código tiene una adición esta vez. Lo has adivinado - la palabra clave del `debugger` . Al presionar **C** normalmente se ejecutará el código hasta el final, pero debido a la adición del `debugger` , se detendrá justo antes de que comience la función.
+
+Entonces, después de ejecutar su archivo en modo de depuración, al presionar **C** se omitirá el código y se detendrá exactamente antes de la función en la palabra clave del `debugger` . Después de eso, puede comenzar a recorrer la función una línea a la vez hasta que identifique su error.

guide/spanish/javascript/tutorials/declare-javascript-objects-as-variables/index.md

@@ -0,0 +1,34 @@
+---
+title: Declare JavaScript Objects as Variables
+localeTitle: Declarar objetos de JavaScript como variables
+---
+Esto tiene un formato simple. Usted declara su variable y la tiene igual a un objeto en la forma `{ key: value}`
+```
+var car = { 
+  "wheels":4, 
+  "engines":1, 
+  "seats":5 
+ }; 
+```
+
+Puede acceder a las propiedades del objeto utilizando la notación de puntos o la notación de corchetes.
+
+Usando la notación de puntos:
+
+```javascript
+console.log(car.wheels); // 4 
+```
+
+Usando la notación de corchete:
+
+```javascript
+console.log(car["wheels"]); // 1 
+```
+
+Usando la notación del soporte dinámico:
+
+```javascript
+var seatsProperty = "seats"; 
+ console.log(car[seatsProperty]); // 5 
+
+```

guide/spanish/javascript/tutorials/declare-javascript-variables/index.md

@@ -0,0 +1,98 @@
+---
+title: Declare Variables
+localeTitle: Declarar variables
+---
+# Declarar variables
+
+Las declaraciones de variables de JavaScript se pueden clasificar en tres componentes distintos: el tipo de variable, el nombre de la variable y el valor de la variable.
+
+```js
+    var myName = "Rafael"; 
+```
+
+Rompamos la línea de código anterior en las piezas que la conforman:
+
+```js
+    var/const/let 
+```
+
+Las variables de JavaScript pueden tener tres tipos de declaración: var, const y let. Las variables de tipo var son globales, si se declaran fuera de una función, se puede acceder a ellas mediante cualquier archivo JS (o la consola), y si se crean dentro de una función, se puede acceder a ellas independientemente del alcance del bloque. Las variables de tipo let están limitadas en su alcance a su bloque. Vea el siguiente ejemplo para la diferencia.
+
+```js
+     function varTest() { 
+      var x = 1; 
+      if (true) { 
+        var x = 2;  // same variable! 
+        console.log(x);  // 2 
+      } 
+      console.log(x);  // 2 
+    } 
+ 
+    function letTest() { 
+      let x = 1; 
+      if (true) { 
+        let x = 2;  // different variable 
+        console.log(x);  // 2 
+      } 
+      console.log(x);  // 1 
+    } 
+```
+
+Las variables de tipo const tienen el mismo alcance que las variables let (alcance de bloque), pero son inmutables. Cualquiera que sea el valor que se asigne a una variable de tipo constante, debe suceder cuando se declara la variable, y JavaScript arrojará un error si la variable se cambia más adelante.
+
+```js
+    const genre = "non-fiction"; 
+    console.log(genre); // "non-fiction"; 
+    genre = "fantasy"; // error 
+```
+
+Ahora que podemos determinar cuál es el tipo de variable, echemos un vistazo al nombre. Los nombres de las variables de JavaScript están escritos en formato de `camel case` . Un ejemplo de camel case es: `camelCase` . En el contexto de nuestro ejemplo:
+
+```js
+    myName 
+```
+
+El nombre también es que volveremos a acceder a la variable más tarde:
+
+```js
+    console.log(myName); // "Rafael" 
+```
+
+Finalmente, nuestro valor:
+
+```js
+    "Rafael" 
+```
+
+JavaScript se escribe dinámicamente, lo que significa que cualquier variable dada puede representar cualquier tipo de datos en un momento dado. Por ejemplo:
+
+```js
+    var example = "This is an example"; 
+    example = [0, 1, 2, 3] 
+    example = {test: "Result"} 
+    example = 5 
+```
+
+Todas esas declaraciones son perfectamente válidas: las variables de JavaScript pueden saltar de una cadena a una matriz para objetar un entero.
+
+### Declarar objeto como const
+
+Como se mencionó anteriormente, las variables const son valores de medios inmutables asignados a dicha variable en el momento de la declaración, pero no se pueden actualizar, pero hay un punto a tener en cuenta en caso de que la declaración del objeto con const. El objeto de tipo const tampoco se puede actualizar una vez definido, pero las propiedades de object cab be. Por ejemplo.
+
+```js
+    const Car1 = { 
+        name: 'BMW', 
+        model: 'X1', 
+        color: 'black' 
+    } 
+```
+
+Aquí, no podemos actualizar el objeto, pero podemos actualizar las propiedades accediendo a través del operador punto (.) Como se muestra a continuación.
+
+```js
+    Car1.color = 'Red'; 
+    console.log(Car1); 
+    O/P - {name: "BMW", model: "X1", color: "Red"} 
+```
+
+Si tenemos que hacer que el objeto enitre sea inmutable (incluidas las propiedades), entonces tenemos que usar el método de congelación.

guide/spanish/javascript/tutorials/decrement-a-number-with-javascript/index.md

@@ -0,0 +1,15 @@
+---
+title: Decrement a Number with JavaScript
+localeTitle: Disminuir un número con JavaScript
+---
+Puede disminuir o disminuir fácilmente una variable en `1` con el operador `--` .
+```
+i--; 
+```
+
+es el equivalente de
+```
+i = i - 1; 
+```
+
+**Nota:** La línea entera se convierte en `i--;` , eliminando la necesidad del signo igual.

guide/spanish/javascript/tutorials/delete-properties-from-a-javascript-object/index.md

@@ -0,0 +1,41 @@
+---
+title: Delete Properties from a JavaScript Object
+localeTitle: Eliminar propiedades de un objeto de JavaScript
+---
+También podemos eliminar propiedades de objetos como este:
+```
+delete ourDog.bark; 
+```
+
+El **operador de eliminación** elimina una propiedad de un objeto.
+
+## Sintaxis
+
+`delete expression` donde la expresión debe evaluar una referencia de propiedad, por ejemplo:
+```
+delete object.property 
+ delete object['property'] 
+```
+
+## Parámetros
+
+**objeto**  
+El nombre de un objeto, o una expresión que evalúa a un objeto.
+
+**propiedad**  
+La propiedad para eliminar.
+
+## Ejemplo
+
+```js
+var person = {name:'Jay', age:'52'}; 
+ delete person['age']; 
+ 
+ console.log(person); //{name:'Jay'} 
+```
+
+## Valor de retorno
+
+Se lanza en modo estricto si la propiedad es una propiedad no configurable propia (devuelve falso en no estricto). Devuelve true en todos los demás casos.
+
+[Lee mas](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete)

guide/spanish/javascript/tutorials/detect-authentic-click-events/index.md

@@ -0,0 +1,27 @@
+---
+title: Detect authentic click events
+localeTitle: Detectar auténticos eventos click
+---
+## Detectar auténticos eventos click
+
+Puede haber una situación en la que desee hacer algunas cosas específicas solo si el evento de clic fue realmente activado por un usuario y no por alguna secuencia de comandos para simular un evento de clic.
+
+Hay una solución muy simple para este problema, el objeto de evento javascript nos proporciona una propiedad `.istrusted` , que se puede usar para distinguir la diferencia.
+
+#### Aquí hay un ejemplo del uso de este método.
+
+```javascript
+// Assume there is a button in the HTML 
+ const button = document.querySelector('button'); 
+ 
+ button.addEventListener('click', (e) => { 
+  if (e.isTrusted) { 
+    console.log('Button clicked by a real user'); 
+  } else { 
+    console.log('Button click simulated by a script'); 
+  } 
+ }); 
+ 
+ button.click() // Outputs "Button click simulated by a script" 
+
+```

guide/spanish/javascript/tutorials/divide-one-number-by-another-with-javascript/index.md

@@ -0,0 +1,9 @@
+---
+title: Divide One Number by Another with JavaScript
+localeTitle: Divide un número por otro con JavaScript
+---
+JavaScript utiliza el símbolo `/` para la división.
+```
+var quotient = 66 / 33; 
+
+```

guide/spanish/javascript/tutorials/finding-a-remainder-in-javascript/index.md

@@ -0,0 +1,23 @@
+---
+title: Finding a Remainder in JavaScript
+localeTitle: Encontrar un resto en JavaScript
+---
+El _operador restante_ `%` da el resto de la división de dos números.
+
+## Ejemplo
+```
+5 % 2 = 1 because 
+ Math.floor(5 / 2) = 2 (Quotient) 
+ 2 * 2 = 4 
+ 5 - 4 = 1 (Remainder) 
+```
+
+## Uso
+
+En matemáticas, un número se puede verificar par o impar verificando el resto de la división del número entre 2.
+```
+17 % 2 = 1 (17 is Odd) 
+ 48 % 2 = 0 (48 is Even) 
+```
+
+**Nota** No confundirlo con el _módulo_ `%` no funciona bien con números negativos.

guide/spanish/javascript/tutorials/generate-random-fractions-with-javascript/index.md

@@ -0,0 +1,5 @@
+---
+title: Generate Random Fractions with JavaScript
+localeTitle: Generar fracciones aleatorias con JavaScript
+---
+JavaScript tiene una función `Math.random()` que genera un número decimal aleatorio.

guide/spanish/javascript/tutorials/generate-random-whole-numbers-with-javascript/index.md

@@ -0,0 +1,11 @@
+---
+title: Generate Random Whole Numbers with JavaScript
+localeTitle: Generar números enteros al azar con JavaScript
+---
+Es genial que podamos crear números decimales aleatorios, pero es aún más útil si somos mucho más útiles para generar un número entero aleatorio.
+
+Para lograr esto, podemos multiplicar el número aleatorio por diez y usar `Math.floor()` para convertir el número decimal en un número entero
+```
+Math.floor(Math.random()*10) 
+
+```

guide/spanish/javascript/tutorials/get-current-url-in-javascript/index.md

@@ -0,0 +1,15 @@
+---
+title: Get Current Url in JavaScript
+localeTitle: Obtener la URL actual en JavaScript
+---
+Para obtener la **URL actual** :
+```
+var url = window.location.href; 
+```
+
+Para obtener la **ruta actual** :
+```
+var path = window.location.path; 
+```
+
+Puede encontrar más información sobre el objeto de ubicación y sus propiedades [aquí](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) .

guide/spanish/javascript/tutorials/give-your-javascript-slot-machine-some-stylish-images/index.md

@@ -0,0 +1,11 @@
+---
+title: Give Your JavaScript Slot Machine Some Stylish Images
+localeTitle: Dale a tu tragamonedas JavaScript algunas imágenes elegantes
+---
+Ya hemos configurado las imágenes para usted en una matriz llamada imágenes. Podemos usar diferentes índices para agarrar cada uno de estos.
+
+Así es como configuraríamos la primera ranura para mostrar una imagen diferente según el número que genere su número aleatorio:
+```
+$($('.slot')[0]).html('<img src = "' + images[slotOne-1] + '">'); 
+
+```

guide/spanish/javascript/tutorials/how-to-create-a-countdown-timer/index.md

@@ -0,0 +1,62 @@
+---
+title: How to Create a Countdown Timer
+localeTitle: Cómo crear un temporizador de cuenta atrás
+---
+## Cómo crear un temporizador de cuenta atrás
+
+### Creación
+
+Comience por construir la función countdownTimer.
+
+```javascript
+function startCountdown(seconds){ 
+  var counter = seconds; 
+ 
+  var interval = setInterval(() => { 
+    console.log(counter); 
+    counter--; 
+ 
+ 
+    if(counter < 0 ){ 
+ 
+      // The code here will run when 
+      // the timer has reached zero. 
+ 
+      clearInterval(interval); 
+      console.log('Ding!'); 
+    }; 
+  }, 1000); 
+ }; 
+```
+
+### Ejecución
+
+Ahora, para iniciar el temporizador, proporcionamos a `startCountdown()` un valor numérico como argumento que representa los segundos para la cuenta regresiva.
+
+```javascript
+  startCountdown(10); 
+  // Console Output // 
+  // 10 
+  // 9 
+  // 8 
+  // 7 
+  // 6 
+  // 5 
+  // 4 
+  // 3 
+  // 2 
+  // 1 
+  // 0 
+  // Ding! 
+```
+
+### Ejemplo vivo
+
+[Codepen - Temporizador de cuenta atrás](https://codepen.io/rdev-rocks/pen/jLogxY?editors=0012)
+
+### Más recursos
+
+Métodos utilizados:
+
+*   [setInterval ()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
+*   [clearInterval ()](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval)

guide/spanish/javascript/tutorials/how-to-create-a-dropdown-menu-with-css-and-javascript/index.md

@@ -0,0 +1,245 @@
+---
+title: How to Create a Dropdown Menu with CSS and JavaScript
+localeTitle: Cómo crear un menú desplegable con CSS y JavaScript
+---
+## Cómo crear un menú desplegable con CSS y JavaScript
+
+En este tutorial, aprenderá cómo crear un menú desplegable simple con Javascript, HTML y CSS de vainilla. Vamos a ver el código HTML, CSS y Javascript, pero prestando más atención a la programación, ya que este es un tutorial de JS. Usaremos solo JS y CSS, sin marcos ni preprocesadores. La única excepción (tipo de) será la importación del archivo CSS de [Font Awesome](https://fontawesome.com/) porque usaremos uno de sus íconos.
+
+Está dirigido a desarrolladores que tienen un promedio de comprensión de HTML, CSS y JS. Traté de hacerlo lo más limpio posible, pero no me centraré demasiado en los detalles aquí. Espero que todos disfruten.
+
+## Capturas de pantalla
+
+Así es como se ve el resultado del código:
+
+Pantalla inicial:
+
+![](https://i.imgur.com/jrnu6mE.png)
+
+Desplegable abierto:
+
+![](https://i.imgur.com/gszPtRa.png)
+
+Desplegable con la opción seleccionada:
+
+![](https://i.imgur.com/TKXxZGF.png)
+
+#### HTML:
+
+En esta sección, discutiremos la implementación del código HTML para la página de demostración. Para empezar, veamos el código `<head>`
+
+```html
+
+<!DOCTYPE html> 
+ <html lang="en"> 
+ <head> 
+    <meta charset="UTF-8"> 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
+    <title>Dropdown Example</title> 
+ 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/'-awesome/4.7.0/css/font-awesome.min.css"> 
+    <link rel="stylesheet" href="styles.css"> 
+ </head> 
+```
+
+Básicamente es un encabezado HTML, con la excepción de las etiquetas de `link` cargan las dos hojas de estilo CSS que usaremos en este tutorial: los estilos de Font Awesome y el archivo `styles.css` , donde definiremos los estilos de esta página.
+
+Luego, está el resto del archivo HTML, el cuerpo:
+
+```html
+
+<body> 
+    <div class='dropdown'> 
+        <div class='title pointerCursor'>Select an option <i class="fa fa-angle-right"></i></div> 
+ 
+        <div class='menu pointerCursor hide'> 
+            <div class='option' id='option1'>Option 1</div> 
+            <div class='option' id='option2'>Option 2</div> 
+            <div class='option' id='option3'>Option 3</div> 
+            <div class='option' id='option4'>Option 4</div> 
+        </div> 
+ 
+    </div> 
+    <span id='result'>The result is: </span> 
+    <script> 
+      ... 
+    </script> 
+ </body> 
+ </html> 
+```
+
+Esta sección se puede dividir en 3 partes principales:
+
+*   El `.dropdown` div, donde se definirá la estructura del elemento desplegable.
+*   El elemento `#result` , que contendrá la opción seleccionada por el usuario, desde el elemento desplegable.
+*   El script escrito en la etiqueta `<script>` . Su implementación está oculta aquí, porque sus detalles se explicarán en la última sección de este tutorial.
+
+El elemento desplegable es un `div` contiene un `title` y elementos de `menu` . El primero simplemente define qué texto se presentará en el elemento antes de seleccionar cualquier opción y el último definirá las opciones que serán seleccionables por el elemento.
+
+El elemento de `result` está ahí para mostrarle qué opción está seleccionada actualmente.
+
+#### Estilos:
+
+A continuación puedes consultar el código completo de css. Como puede ver, hace uso de las construcciones de `transition` y `transform` CSS3.
+
+Por favor, preste atención a las definiciones de las clases `.dropdown` . Estos se utilizan para definir el diseño del componente de contenedor desplegable, así como sus elementos internos, como el `.title` y su `.option` .
+
+```css
+body{ 
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
+ } 
+ 
+ .hide { 
+    max-height: 0 !important; 
+ } 
+ 
+ .dropdown{ 
+    border: 0.1em solid black; 
+    width: 10em; 
+    margin-bottom: 1em; 
+ } 
+ 
+ .dropdown .title{ 
+    margin: .3em .3em .3em .3em; 
+    width: 100%; 
+ } 
+ 
+ .dropdown .title .fa-angle-right{ 
+    float: right; 
+    margin-right: .7em; 
+    transition: transform .3s; 
+ } 
+ 
+ .dropdown .menu{ 
+    transition: max-height .5s ease-out; 
+    max-height: 20em; 
+    overflow: hidden; 
+ } 
+ 
+ .dropdown .menu .option{ 
+    margin: .3em .3em .3em .3em; 
+    margin-top: 0.3em; 
+ } 
+ 
+ .dropdown .menu .option:hover{ 
+    background: rgba(0,0,0,0.2); 
+ } 
+ 
+ .pointerCursor:hover{ 
+    cursor: pointer; 
+ } 
+ 
+ .rotate-90{ 
+    transform: rotate(90deg); 
+ } 
+```
+
+#### JavaScript:
+
+Ahora veremos cómo se implementa la parte de Javascript. Primero veremos las definiciones de funciones. y luego el código que llama a estas funciones para realizar las acciones desplegables.
+
+Básicamente, hay 3 acciones que tienen lugar según la interacción del usuario, ya que sus oyentes se agregan a los elementos DOM:
+
+1.  Haciendo clic en el elemento desplegable.
+2.  Seleccionando una de las opciones desplegables
+3.  Cambiando la opción actualmente seleccionada
+
+Me gustaría dejar claro que estamos usando las funciones de flecha ( `() => {}` ) y la palabra clave `const` , que son características de ES6. Probablemente sea bueno si está utilizando una versión reciente de su navegador, pero tenga eso en cuenta.
+
+#### 1\. Haciendo clic en el elemento desplegable.
+
+```Javascript
+function toggleClass(elem,className){ 
+    if (elem.className.indexOf(className) !== -1){ 
+        elem.className = elem.className.replace(className,''); 
+    } 
+    else{ 
+        elem.className = elem.className.replace(/\s+/g,' ') +   ' ' + className; 
+    } 
+ 
+    return elem; 
+ } 
+ 
+ function toggleDisplay(elem){ 
+    const curDisplayStyle = elem.style.display; 
+ 
+    if (curDisplayStyle === 'none' || curDisplayStyle === ''){ 
+        elem.style.display = 'block'; 
+    } 
+    else{ 
+        elem.style.display = 'none'; 
+    } 
+ } 
+ 
+ 
+ function toggleMenuDisplay(e){ 
+    const dropdown = e.currentTarget.parentNode; 
+    const menu = dropdown.querySelector('.menu'); 
+    const icon = dropdown.querySelector('.fa-angle-right'); 
+ 
+    toggleClass(menu,'hide'); 
+    toggleClass(icon,'rotate-90'); 
+ } 
+```
+
+Cuando se hace clic en el elemento desplegable, se abre (si está cerrado) o se cierra (si está abierto). Esto sucede vinculando `toggleMenuDisplay` al detector de eventos de clic en el elemento desplegable. Esta función alterna la visualización de su elemento de `menu` mediante el uso de las funciones `toggleDisplay` y `toggleClass` .
+
+#### 2\. Seleccionando una de las opciones desplegables.
+
+```Javascript
+function handleOptionSelected(e){ 
+    toggleClass(e.target.parentNode, 'hide'); 
+ 
+    const id = e.target.id; 
+    const newValue = e.target.textContent + ' '; 
+    const titleElem = document.querySelector('.dropdown .title'); 
+    const icon = document.querySelector('.dropdown .title .fa'); 
+ 
+ 
+    titleElem.textContent = newValue; 
+    titleElem.appendChild(icon); 
+ 
+    //trigger custom event 
+    document.querySelector('.dropdown .title').dispatchEvent(new Event('change')); 
+    //setTimeout is used so transition is properly shown 
+    setTimeout(() => toggleClass(icon,'rotate-90',0)); 
+ } 
+```
+
+#### 3\. Cambiando la opción actualmente seleccionada
+
+```Javascript
+function handleTitleChange(e){ 
+    const result = document.getElementById('result'); 
+ 
+    result.innerHTML = 'The result is: ' + e.target.textContent; 
+ } 
+```
+
+La función `handleTitleChange` está vinculada al evento de `change` personalizado en el elemento `.title` , para cambiar el contenido del elemento `#result` siempre que cambie el elemento del título. La activación de este evento se realiza en la sección anterior.
+
+#### Código principal
+
+```Javascript
+//get elements 
+ const dropdownTitle = document.querySelector('.dropdown .title'); 
+ const dropdownOptions = document.querySelectorAll('.dropdown .option'); 
+ 
+ //bind listeners to these elements 
+ dropdownTitle.addEventListener('click', toggleMenuDisplay); 
+ dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected)); 
+ document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange); 
+```
+
+En la sección principal solo hay un código simple para obtener el título del desplegable y los elementos de opciones para vincularlos a los eventos analizados en la sección anterior.
+
+## Manifestación
+
+El código completo y la demostración de esta aplicación se pueden encontrar [aquí](https://codepen.io/GCrispino/pen/EEXmYd) .
+
+## Más información
+
+*   [ES6 introducción](https://guide.freecodecamp.org/javascript/es6)
+*   [Funciones de flecha](https://guide.freecodecamp.org/javascript/es6/arrow_functions/)
+*   [Let y Const](https://guide.freecodecamp.org/javascript/es6/let_and_const/)

guide/spanish/javascript/tutorials/how-to-create-a-lightbox/index.md

@@ -0,0 +1,569 @@
+---
+title: How to Create a Lightbox
+localeTitle: Cómo crear una caja de luz
+---
+## Cómo crear una caja de luz
+
+### Introducción
+
+Un lightbox es una combinación de dos componentes, un [modal](https://en.wikipedia.org/wiki/Modal_window) y una presentación de diapositivas. Aquí construirás un sencillo lightbox usando `HTML` , `CSS` y `JavaScript` .
+
+La caja de luz estará contenida en el modal, que se activará mediante algún `JavaScript` , desde los [controladores](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) de [eventos](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) en el marcado `HTML` . Construirás estilos que proporcionarán estado con `CSS` y comportamiento con `JavaScript` . También encontrará una lista de referencia de los métodos que utiliza y otros datos útiles relacionados con este tutorial, en la parte inferior.
+
+#### Nuestras imagenes
+
+Las imágenes que [usaremos](https://www.pexels.com/) están siendo suministradas por [Pexels](https://www.pexels.com/) , una galería de fotos de stock gratuita que le permite proporcionar imágenes de alta calidad a sus proyectos de forma rápida, gratuita y, por lo general, sin necesidad de atribuciones.
+
+#### ¡Sólo muéstrame el código!
+
+[Aquí](https://codepen.io/rdev-rocks/pen/KXNzvo) se puede encontrar un ejemplo en vivo [: CodePen / Lightbox](https://codepen.io/rdev-rocks/pen/KXNzvo) y un borrador completo del código está cerca del final.
+
+### Paso 1. El marcado
+
+El marcado, o `HTML` , proporciona la estructura para la caja de luz.
+
+```html
+
+<!-- Here is your access point for your user, a preview of the images you wish to display. 
+     You use the onclick="" event handler to execute the methods you will define in the 
+     JavaScript near the bottom --> 
+ 
+ <div class="row"> 
+  <div class="col"> 
+     <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox();toSlide(1)" class="hover-shadow preview" alt="Toy car on the road." /> 
+  </div> 
+  <div class="col"> 
+     <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" onclick="openLightbox();toSlide(2)" class="hover-shadow preview" alt="Toy car exploring offroad." /> 
+  </div> 
+  <div class="col"> 
+     <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" onclick="openLightbox();toSlide(3)" class="hover-shadow preview" alt="Toy car in the city." /> 
+  </div> 
+ </div> 
+ 
+ <!-- This is your lightbox, it is contained in a modal. Here you provide all the images, 
+     controls, and another set of preview images as the dots. Dots show your user which 
+     image is currently active. Note that you use entities (eg &times;), more info on 
+     them at the bottom. --> 
+ 
+ <div id="Lightbox" class="modal"> 
+  <span class="close pointer" onclick="closeLightbox()">&times;</span> 
+  <div class="modal-content"> 
+    <div class="slide"> 
+        <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="image-slide" alt="Toy car on the road." /> 
+    </div> 
+    <div class="slide"> 
+        <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="image-slide" alt="Toy car exploring offroad." /> 
+    </div> 
+    <div class="slide"> 
+        <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="image-slide" alt="Toy car in the city." /> 
+    </div> 
+ 
+    <a class="previous" onclick="changeSlide(-1)">&#10094;</a> 
+    <a class="next" onclick="changeSlide(1)">&#10095;</a> 
+ 
+    <div class="dots"> 
+      <div class="col"> 
+        <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="modal-preview hover-shadow" onclick="toSlide(1)" alt="Toy car on the road" /> 
+      </div> 
+      <div class="col"> 
+        <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="modal-preview hover-shadow" onclick="toSlide(2)" alt="Toy car exploring offroad." /> 
+      </div> 
+      <div class="col"> 
+        <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="modal-preview hover-shadow" onclick="toSlide(3)" alt="Toy car in the city." /> 
+      </div> 
+    </div> 
+  </div> 
+ </div> 
+```
+
+### Paso 2. Estilo con CSS
+
+El `CSS` proporciona diferentes estados para su caja de luz. Cosas como la visibilidad, el posicionamiento y los efectos de desplazamiento.
+
+Su hoja de estilo debe verse así:
+
+```css
+/* Here you provide a best practice's "reset", read more about it at the bottom! :) */ 
+ 
+ html { 
+  box-sizing: border-box; 
+ } 
+ 
+ *, *:before, *:after { 
+  box-sizing: inherit; 
+ } 
+ 
+ body { 
+  margin: 0; 
+ } 
+ 
+ /* You define the style of our previews here, you are using flex to display the images 
+   "responsively". */ 
+ 
+ .preview { 
+  width: 100%; 
+ } 
+ 
+ .row { 
+  display: flex; 
+  flex-direction: row; 
+  justify-content: space-between; 
+ } 
+ 
+ .row > .col { 
+  padding: 0 8px; 
+ } 
+ 
+ .col { 
+  float: left; 
+  width: 25%; 
+ } 
+ 
+ /* Now you want to define what the lightbox will look like. Note that you have the display 
+   as none. You don't want it to show until the user clicks on one of the previews. 
+   You will change this display property with JavaScript below. */ 
+ 
+ .modal { 
+  display: none; 
+  position: fixed; 
+  z-index: 1; 
+  padding: 10px 62px 0px 62px; 
+  left: 0; 
+  top: 0; 
+  width: 100%; 
+  height: 100%; 
+  overflow: auto; 
+  background-color: black; 
+ } 
+ 
+ .modal-content { 
+  position: relative; 
+  display: flex; 
+  flex-direction: column; 
+  justify-content: center; 
+  margin: auto; 
+  padding: 0 0 0 0; 
+  width: 80%; 
+  max-width: 1200px; 
+ } 
+ 
+ /* Same with your slides, you set the display to none, because you want to choose which 
+   one is shown at a time. */ 
+ 
+ .slide { 
+  display: none; 
+ } 
+ 
+ .image-slide { 
+  width: 100%; 
+ } 
+ 
+ .modal-preview { 
+  width: 100%; 
+ } 
+ 
+ .dots { 
+  display: flex; 
+  flex-direction: row; 
+  justify-content: space-between; 
+ } 
+ 
+ /* You want the previews a little transparent to show that they are "inactive". 
+   You then add an .active or :hover class to animate the selections for your user when 
+   they interact with your controls and clickable content. 
+ */ 
+ 
+ img.preview, img.modal-preview { 
+  opacity: 0.6; 
+ } 
+ 
+ img.active, 
+ .preview:hover, 
+ .modal-preview:hover { 
+  opacity: 1; 
+ } 
+ 
+ img.hover-shadow { 
+  transition: 0.3s; 
+ } 
+ 
+ .hover-shadow:hover { 
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
+ } 
+ 
+ .close { 
+  color: white; 
+  position: absolute; 
+  top: 10px; 
+  right: 25px; 
+  font-size: 35px; 
+  font-weight: bold; 
+ } 
+ 
+ .close:hover, 
+ .close:focus { 
+  color: #999; 
+  text-decoration: none; 
+  cursor: pointer; 
+ } 
+ 
+ .previous, 
+ .next { 
+  cursor: pointer; 
+  position: absolute; 
+  top: 50%; 
+  width: auto; 
+  padding: 16px; 
+  margin-top: -50px; 
+  color: white; 
+  font-weight: bold; 
+  font-size: 20px; 
+  transition: 0.6s ease; 
+  border-radius: 0 3px 3px 0; 
+  user-select: none; 
+  -webkit-user-select: none; 
+ } 
+ 
+ .next { 
+  right: 0; 
+  border-radius: 3px 0 0 3px; 
+ } 
+ 
+ .previous:hover, 
+ .next:hover { 
+  background-color: rgba(0, 0, 0, 0.8); 
+ } 
+```
+
+### Paso 3. JavaScript
+
+¡Ahora al negocio! Tu JavaScript debería verse así:
+
+```javascript
+// Initialize here and run showSlide() to give your lightbox a default state. 
+ 
+ let slideIndex = 1; 
+ showSlide(slideIndex); 
+ 
+ // You are providing the functionality for your clickable content, which is 
+ // your previews, dots, controls and the close button. 
+ 
+ function openLightbox() { 
+  document.getElementById('Lightbox').style.display = 'block'; 
+ } 
+ 
+ function closeLightbox() { 
+  document.getElementById('Lightbox').style.display = 'none'; 
+ }; 
+ 
+ // Note that you are assigning new values here to our slidIndex. 
+ 
+ function changeSlide(n) { 
+  showSlide(slideIndex += n); 
+ }; 
+ 
+ function toSlide(n) { 
+  showSlide(slideIndex = n); 
+ }; 
+ 
+ // This is your logic for the light box. It will decide which slide to show 
+ // and which dot is active. 
+ 
+ function showSlide(n) { 
+  const slides = document.getElementsByClassName('slide'); 
+  let modalPreviews = document.getElementsByClassName('modal-preview'); 
+ 
+  if (n > slides.length) { 
+    slideIndex = 1; 
+  }; 
+ 
+  if (n < 1) { 
+    slideIndex = slides.length; 
+  }; 
+ 
+  for (let i = 0; i < slides.length; i++) { 
+    slides[i].style.display = "none"; 
+  }; 
+ 
+  for (let i = 0; i < modalPreviews.length; i++) { 
+    modalPreviews[i].className = modalPreviews[i].className.replace(' active', ''); 
+  }; 
+ 
+  slides[slideIndex - 1].style.display = 'block'; 
+  modalPreviews[slideIndex - 1].className += ' active'; 
+ }; 
+```
+
+¡Y eso es! Ahora pon todos los códigos juntos. Ahora debería tener una caja de luz funcional.
+
+### Todo el codigo
+
+```html
+
+<body> 
+  <style> 
+    html { 
+      box-sizing: border-box; 
+    } 
+ 
+    *, *:before, *:after { 
+      box-sizing: inherit; 
+    } 
+ 
+    body { 
+      margin: 0; 
+    } 
+ 
+    .preview { 
+      width: 100%; 
+    } 
+ 
+    .row { 
+      display: flex; 
+      flex-direction: row; 
+      justify-content: space-between; 
+    } 
+ 
+    .row > .col { 
+      padding: 0 8px; 
+    } 
+ 
+    .col { 
+      float: left; 
+      width: 25%; 
+    } 
+ 
+    .modal { 
+      display: none; 
+      position: fixed; 
+      z-index: 1; 
+      padding: 10px 62px 0px 62px; 
+      left: 0; 
+      top: 0; 
+      width: 100%; 
+      height: 100%; 
+      overflow: auto; 
+      background-color: black; 
+    } 
+ 
+    .modal-content { 
+      position: relative; 
+      display: flex; 
+      flex-direction: column; 
+      justify-content: center; 
+      margin: auto; 
+      padding: 0 0 0 0; 
+      width: 80%; 
+      max-width: 1200px; 
+    } 
+ 
+    .slide { 
+      display: none; 
+    } 
+ 
+    .image-slide { 
+        width: 100%; 
+    } 
+ 
+    .modal-preview { 
+        width: 100%; 
+    } 
+ 
+    .dots { 
+        display: flex; 
+        flex-direction: row; 
+        justify-content: space-between; 
+    } 
+ 
+    img.preview, img.modal-preview { 
+      opacity: 0.6; 
+    } 
+ 
+    img.active, 
+    .preview:hover, 
+    .modal-preview:hover { 
+      opacity: 1; 
+    } 
+ 
+    img.hover-shadow { 
+      transition: 0.3s; 
+    } 
+ 
+    .hover-shadow:hover { 
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
+    } 
+ 
+    .close { 
+      color: white; 
+      position: absolute; 
+      top: 10px; 
+      right: 25px; 
+      font-size: 35px; 
+      font-weight: bold; 
+    } 
+ 
+    .close:hover, 
+    .close:focus { 
+      color: #999; 
+      text-decoration: none; 
+      cursor: pointer; 
+    } 
+ 
+    .previous, 
+    .next { 
+      cursor: pointer; 
+      position: absolute; 
+      top: 50%; 
+      width: auto; 
+      padding: 16px; 
+      margin-top: -50px; 
+      color: white; 
+      font-weight: bold; 
+      font-size: 20px; 
+      transition: 0.6s ease; 
+      border-radius: 0 3px 3px 0; 
+      user-select: none; 
+      -webkit-user-select: none; 
+    } 
+ 
+    .next { 
+      right: 0; 
+      border-radius: 3px 0 0 3px; 
+    } 
+ 
+    .previous:hover, 
+    .next:hover { 
+      background-color: rgba(0, 0, 0, 0.8); 
+    } 
+  </style> 
+  <div class="row"> 
+    <div class="col"> 
+       <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox();toSlide(1)" class="hover-shadow preview" alt="Toy car on the road." /> 
+    </div> 
+    <div class="col"> 
+       <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" onclick="openLightbox();toSlide(2)" class="hover-shadow preview" alt="Toy car exploring offroad." /> 
+    </div> 
+    <div class="col"> 
+       <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" onclick="openLightbox();toSlide(3)" class="hover-shadow preview" alt="Toy car in the city" /> 
+    </div> 
+  </div> 
+ 
+  <div id="Lightbox" class="modal"> 
+ 
+    <span class="close pointer" onclick="closeLightbox()">&times;</span> 
+    <div class="modal-content"> 
+      <div class="slide"> 
+        <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="image-slide" alt="Toy car on the road." /> 
+      </div> 
+      <div class="slide"> 
+        <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="image-slide" alt="Toy car exploring offroad." /> 
+      </div> 
+      <div class="slide"> 
+        <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="image-slide" alt="Toy car in the city." /> 
+      </div> 
+ 
+      <a class="previous" onclick="changeSlide(-1)">&#10094;</a> 
+      <a class="next" onclick="changeSlide(1)">&#10095;</a> 
+ 
+      <div class="dots"> 
+        <div class="col"> 
+          <img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" class="modal-preview hover-shadow" onclick="toSlide(1)" alt="Toy car on the road." /> 
+        </div> 
+        <div class="col"> 
+          <img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" class="modal-preview hover-shadow" onclick="toSlide(2)" alt="Toy car exploring offroad." /> 
+        </div> 
+        <div class="col"> 
+          <img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" class="modal-preview hover-shadow" onclick="toSlide(3)" alt="Toy car in the city" /> 
+        </div> 
+      </div> 
+    </div> 
+  </div> 
+ 
+  <script> 
+    let slideIndex = 1; 
+    showSlide(slideIndex); 
+ 
+    function openLightbox() { 
+      document.getElementById('Lightbox').style.display = 'block'; 
+    }; 
+ 
+    function closeLightbox() { 
+      document.getElementById('Lightbox').style.display = 'none'; 
+    }; 
+ 
+    function changeSlide(n) { 
+      showSlide(slideIndex += n); 
+    }; 
+ 
+    function toSlide(n) { 
+      showSlide(slideIndex = n); 
+    }; 
+ 
+    function showSlide(n) { 
+      const slides = document.getElementsByClassName('slide'); 
+      let modalPreviews = document.getElementsByClassName('modal-preview'); 
+ 
+      if (n > slides.length) { 
+        slideIndex = 1; 
+      }; 
+ 
+      if (n < 1) { 
+        slideIndex = slides.length; 
+      }; 
+ 
+      for (let i = 0; i < slides.length; i++) { 
+        slides[i].style.display = "none"; 
+      }; 
+ 
+      for (let i = 0; i < modalPreviews.length; i++) { 
+        modalPreviews[i].className = modalPreviews[i].className.replace(' active', ''); 
+      }; 
+ 
+      slides[slideIndex - 1].style.display = 'block'; 
+      modalPreviews[slideIndex - 1].className += ' active'; 
+    }; 
+  </script> 
+ </body> 
+```
+
+## \### Más información:
+
+#### HTML
+
+[Modal](https://en.wikipedia.org/wiki/Modal_window) - Una ventana emergente
+
+[Controladores de eventos](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) : propiedades HTML que escuchan eventos de usuario.
+
+[Entidad](https://developer.mozilla.org/en-US/docs/Glossary/Entity) : una cadena que representa un carácter reservado en HTML.
+
+#### CSS
+
+[tamaño de la caja:](https://css-tricks.com/box-sizing/) una propiedad CSS3 que controla la forma en que el navegador procesa el contenido en función de la altura y el ancho.
+
+[Flex-box](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) : una nueva tecnología que ayuda a posicionar el contenido HTML en una forma sensible.
+
+[: hover](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) - Un pseudo-selector que se activa cuando un usuario se desplaza sobre un elemento cuando se le asigna esta clase.
+
+#### JavaScript
+
+[dejar](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) una variable de ámbito de bloque.
+
+[const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) Una [constante de](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) bloque-alcance.
+
+[getElementById ()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) : un método de documento que devuelve una referencia a un elemento HTML.
+
+[getElementsByClassName ()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) : un método de documento que devuelve una matriz de referencias al html que tienen clases coincidentes.
+
+[\+ =](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators) - un operador de asignación que agregará números o concatenará cadenas.
+
+#### Recursos:
+
+[Ejemplo en vivo](https://codepen.io/rdev-rocks/pen/KXNzvo?editors=1111) : un CodePen que muestra el código anterior.
+
+[Caja flexible interactiva](https://codepen.io/enxaneta/full/adLPwv) : un CodePen interactivo que muestra el comportamiento de la caja flexible.
+
+[Pexels](https://www.pexels.com/) - Una galería de fotos gratis.
+
+[MDN](https://developer.mozilla.org/en-US/) - Un gran lugar para obtener información sobre cosas web.
+
+[W3School - Lightbox](https://www.w3schools.com/howto/howto_js_lightbox.asp) - Este código fue inspirado desde aquí. Gracias W3Schools!

guide/spanish/javascript/tutorials/how-to-create-a-slideshow/index.md

@@ -0,0 +1,60 @@
+---
+title: How to Create a Slideshow
+localeTitle: Cómo crear una presentación de diapositivas
+---
+## Cómo crear una presentación de diapositivas
+
+Una presentación de diapositivas web es una secuencia de imágenes o texto que consiste en mostrar un elemento de esta secuencia en un intervalo de tiempo.
+
+Para este tutorial puedes crear una presentación de diapositivas siguiendo los siguientes pasos:
+
+### Escribe un marcado.
+
+\`\` \`html   Diapositivas  
+```
+### Write styles to hide slides and show only one slide. 
+ 
+ For hide the slides you have to give them a default style and only show one slide if this is active or you want to show it. 
+```
+
+css \[data-component = "slideshow"\] .slide { pantalla: ninguna; }
+
+\[data-component = "slideshow"\] .slide.active { bloqueo de pantalla; }
+```
+### Change the slides in a time interval. 
+ 
+ The first step to change the slides to show, is select the slide wrapper(s) and then its slides. 
+ 
+ When you selected the slides you have to go over each slide and add or remove an active class depending on the slide that you want to show, and then just repeat the process in a time interval. 
+ 
+ Keep it in mind when you remove a active class to a slide, you are hidden it because the styles defined in the previous step. But when you add an active class to the slide, you are overwritring the style ``display:none to display:block`` , so the slide will show to the users. 
+```
+
+js var slideshows = document.querySelectorAll ('\[data-component = "slideshow"\]');
+
+// Aplicar a todas las presentaciones de diapositivas que defina con el marcado escrito slideshows.forEach (initSlideShow);
+
+función initSlideShow (presentación de diapositivas) {
+```
+var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Get an array of slides 
+ 
+ var index = 0, time = 5000; 
+ slides[index].classList.add('active'); 
+ 
+ setInterval( () => { 
+  slides[index].classList.remove('active'); 
+ 
+  //Go over each slide incrementing the index 
+  index++; 
+ 
+  // If you go over all slides, restart the index to show the first slide and start again 
+  if (index === slides.length) index = 0; 
+ 
+  slides[index].classList.add('active'); 
+ 
+ }, time); 
+```
+
+} \`\` \`
+
+#### [Ejemplo de Codepen siguiendo este tutorial.](https://codepen.io/AndresUris/pen/rGXpvE)

guide/spanish/javascript/tutorials/how-to-create-a-top-navigation-bar/index.md

@@ -0,0 +1,11 @@
+---
+title: How to Create a Top Navigation Bar
+localeTitle: Cómo crear una barra de navegación superior
+---
+## Cómo crear una barra de navegación superior
+
+Esto es un talón. [Ayuda a nuestra comunidad a expandirla](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/how-to-create-a-top-navigation-bar/index.md) .
+
+[Esta guía rápida de estilo ayudará a asegurar que su solicitud de extracción sea aceptada](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Más información:

guide/spanish/javascript/tutorials/how-to-create-an-accordion/index.md

@@ -0,0 +1,11 @@
+---
+title: How to Create an Accordion
+localeTitle: Cómo crear un acordeón
+---
+## Cómo crear un acordeón
+
+Esto es un talón. [Ayuda a nuestra comunidad a expandirla](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/how-to-create-an-accordion/index.md) .
+
+[Esta guía rápida de estilo ayudará a asegurar que su solicitud de extracción sea aceptada](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Más información:

guide/spanish/javascript/tutorials/how-to-create-popups/index.md

@@ -0,0 +1,46 @@
+---
+title: How to Create Popups
+localeTitle: Cómo crear ventanas emergentes
+---
+## Cómo crear ventanas emergentes
+
+Popup es una ventana que aparece (aparece) cuando selecciona una opción con el mouse o presiona una tecla de función especial.
+
+En este ejemplo, la ventana emergente aparecerá cuando haga clic en un botón y permanecerá en la pantalla hasta que presione la opción X.
+
+Construiremos la ventana emergente usando `HTML` , `CSS` y `JavaScript`
+
+### Paso 1 HTML
+
+El HTML proporciona la estructura para la ventana emergente.
+
+\`\` \`html
+
+Abrir el popup
+
+Popup con JavaScript
+
+X
+```
+### Step 2 CSS 
+ We will choose our own style for the popup window. Notice: the popup div should be hidden at first, so in the style I will select display: none; 
+```
+
+css .popup _main_ div { posición: fijo ancho: 800px; altura: 400px; borde: 2px negro sólido; radio del borde: 5px; color de fondo: #fff; izquierda: 50%; margen izquierdo: -400px; superior: 50%; margen superior: -250px; pantalla: ninguna;
+
+} .close _popup { posición: absoluta; ancho: 25px; altura: 25px; radio del borde: 25px; borde: 2px negro sólido; text-align: center; derecha: 5px; superior: 5px; cursor: puntero; } .close_ popup p { margen superior: 5px; peso de la fuente: 400;
+
+} .texto{ text-align: center; tamaño de fuente: 30px; peso de la fuente: 400; margen superior: 22%; } #Btn { posición: absoluta; izquierda: 50%; superior: 20%;
+
+}
+```
+### Step 3 JavaScript 
+```
+
+js // En primer lugar voy a inicializar mis variables // Seleccione los elementos que usaremos del DOM // Se agregará un evento en el botón que activará una función que cambiará el estilo de visualización de la ventana emergente de ninguno a bloque
+
+const Btn = document.getElementById ("Btn") const PopupDiv = document.querySelector (". popup _main_ div") const ClosePopup = document.querySelector (". close\_popup") Btn.addEventListener ('clic', función () { PopupDiv.style.display = "bloque" }) ClosePopup.addEventListener ('clic', función () { PopupDiv.style.display = "ninguno" })
+
+\`\` \`
+
+Código en directo en: [Codepen.io](https://codepen.io/voula12/pen/qyyNeK)

guide/spanish/javascript/tutorials/how-to-create-tabs/index.md

@@ -0,0 +1,11 @@
+---
+title: How to Create Tabs
+localeTitle: Cómo crear pestañas
+---
+## Cómo crear pestañas
+
+Esto es un talón. [Ayuda a nuestra comunidad a expandirla](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/how-to-create-tabs/index.md) .
+
+[Esta guía rápida de estilo ayudará a asegurar que su solicitud de extracción sea aceptada](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Más información:

guide/spanish/javascript/tutorials/how-to-install-node-js-and-npm-on-windows/index.md

@@ -0,0 +1,32 @@
+---
+title: How to Install Node Js and Npm on Windows
+localeTitle: Cómo instalar Node Js y Npm en Windows
+---
+## Cómo instalar Node Js y Npm en Windows
+
+Instalar Node.js y Npm en Windows es muy sencillo.
+
+Primero, descargue el instalador de Windows del [sitio web Node.js.](https://nodejs.org/) Tendrá la opción entre la versión **LTS** (Soporte a largo plazo) o la Versión **actual** .
+
+*   La versión **actual** recibe las últimas funciones y se actualiza más rápidamente
+*   La versión de **LTS** foregos presenta cambios para mejorar la estabilidad, pero recibe parches como correcciones de errores y actualizaciones de seguridad
+
+Una vez que haya seleccionado una versión que satisfaga sus necesidades, ejecute el instalador. Siga las indicaciones para seleccionar una ruta de instalación y asegúrese de que se **incluya** la **función del administrador de paquetes npm** junto con el **tiempo de ejecución Node.js.** Esta debería ser la configuración por defecto.
+
+Reinicie su computadora una vez finalizada la instalación.
+
+Si instaló bajo la configuración predeterminada, Node.js ahora debe agregarse a su PATH. Ejecute el símbolo del sistema o powershell e ingrese lo siguiente para probarlo:
+```
+> node -v 
+```
+
+La consola debe responder con una cadena de versión. Repita el proceso para Npm:
+```
+> npm -v 
+```
+
+Si ambos comandos funcionan, su instalación fue un éxito, ¡y puede comenzar a usar Node.js!
+
+#### Más información:
+
+Para obtener más información y guías, visite la [página de documentos de Node.js.](https://nodejs.org/en/docs/)

guide/spanish/javascript/tutorials/increment-a-number-with-javascript/index.md

@@ -0,0 +1,15 @@
+---
+title: Increment a Number with JavaScript
+localeTitle: Incrementar un número con JavaScript
+---
+Puede incrementar o agregar fácilmente `1` a una variable con el operador `++` .
+```
+i++; 
+```
+
+es el equivalente de
+```
+i = i + 1; 
+```
+
+**Nota** La línea entera se convierte en `i++;` , eliminando la necesidad del signo igual.

guide/spanish/javascript/tutorials/index.md

@@ -0,0 +1,11 @@
+---
+title: Tutorials
+localeTitle: Tutoriales
+---
+## Tutoriales
+
+Esto es un talón. [Ayuda a nuestra comunidad a expandirla](https://github.com/freecodecamp/guides/tree/master/src/pages/javascript/tutorials/index.md) .
+
+[Esta guía rápida de estilo ayudará a asegurar que su solicitud de extracción sea aceptada](https://github.com/freecodecamp/guides/blob/master/README.md) .
+
+#### Más información:

guide/spanish/javascript/tutorials/invert-regular-expression-matches-with-javascript/index.md

@@ -0,0 +1,7 @@
+---
+title: Invert Regular Expression Matches with JavaScript
+localeTitle: Invertir coincidencias de expresiones regulares con JavaScript
+---
+Utilice `/\S/gi` ; para que coincida con todo lo que no es un espacio en la cadena.
+
+Puede invertir cualquier coincidencia utilizando la versión en mayúsculas del selector `\s` versus `\S` por ejemplo.

guide/spanish/javascript/tutorials/iterate-with-javascript-for-loops/index.md

@@ -0,0 +1,26 @@
+---
+title: Iterate with JavaScript for Loops
+localeTitle: Iterar con JavaScript para bucles
+---
+El tipo más común de bucle de JavaScript se llama un `for loop` ya que se ejecuta `for` un número específico de veces.
+```
+var ourArray = []; 
+ for(var i = 0; i < 5; i++) { 
+  ourArray.push(i); 
+ } 
+```
+
+ourArray ahora contendrá \[0,1,2,3,4\]
+
+## Más sobre los bucles.
+```
+for(var i = 0; i < 5; i++) {  // There are 3 parts here 
+```
+
+Hay tres partes para for loop. Están separados por punto y coma.
+
+1.  La inicialización: `var i = 0;` - Este código se ejecuta una sola vez al inicio del bucle. Normalmente se usa para declarar la variable de contador (con `var` ) e inicializar el contador (en este caso, se establece en 0).
+    
+2.  La condición: `i < 5;` - El bucle se ejecutará mientras esto sea `true` . Eso significa que tan pronto como `i` sea ​​igual a 5, el bucle se detendrá. Tenga en cuenta que el interior del bucle nunca verá `i` como 5 porque se detendrá antes de esa fecha. Si esta condición es inicialmente `false` , el bucle nunca se ejecutará.
+    
+3.  El incremento: `i++` : este código se ejecuta al final de cada bucle. Usualmente es un incremento simple (operador `++` ), pero realmente puede ser cualquier transformación matemática. Se utiliza para mover el contador ( `i` ) hacia adelante (o hacia atrás, o lo que sea).

guide/spanish/javascript/tutorials/iterate-with-javascript-while-loops/index.md

@@ -0,0 +1,14 @@
+---
+title: Iterate with JavaScript While Loops
+localeTitle: Iterar con JavaScript mientras bucles
+---
+Otro tipo de bucle de JavaScript se llama un `while loop` porque se ejecuta `while` algo es verdadero y se detiene una vez que algo ya no es verdadero.
+```
+var ourArray = []; 
+ var i = 0; 
+ while(i < 5) { 
+  ourArray.push(i); 
+  i++; 
+ } 
+
+```

guide/spanish/javascript/tutorials/javascript-for-loops-explained/index.md

@@ -0,0 +1,43 @@
+---
+title: JavaScript for Loops Explained
+localeTitle: JavaScript para los bucles explicados
+---
+La sentencia for crea un bucle que consta de tres expresiones opcionales, entre paréntesis y separadas por punto y coma, seguidas de una sentencia o un conjunto de sentencias ejecutadas en el bucle.
+
+El bucle for tiene la siguiente sintaxis:
+```
+for (<a href='http://forum.freecodecamp.com/t/javascript-while-loop/14668' target='_blank' rel='nofollow'>initialization]; [condition]; [final-expression]) { 
+    code block to be executed 
+ } 
+```
+
+\[inicialización\] se ejecuta antes de que comience el bucle (el bloque de código).
+
+\[condición\] define la condición para ejecutar el bucle (el bloque de código).
+
+\[final-expresión\] se ejecuta cada vez que se ejecuta el bucle (el bloque de código).
+
+## Ejemplo en JavaScript:
+```
+var ourArray = []; 
+ for (var i = 0; i < 5; i++) { 
+    ourArray.push(i); 
+ } 
+```
+
+Del ejemplo anterior, puedes leer:
+
+\[inicialización\] establece una variable antes de que comience el ciclo (var i = 0).
+
+\[condición\] define la condición para que se ejecute el bucle (i debe ser menor que 5).
+
+\[expresión final\] aumenta un valor (i ++) cada vez que se ejecuta el bloque de código en el bucle.
+
+## ¿Por qué necesitamos "para bucles"?
+
+Para los bucles se utilizan para recorrer un bloque de código un número conocido de veces. A veces es la computadora la que sabe cuántas veces, no tú, pero aún se sabe.
+
+Echa un vistazo a algunos de nuestros otros artículos en bucles:
+
+*   \[Mientras bucle
+*   [Para In Loop](http://forum.freecodecamp.com/t/javascript-for-in-loop/14665)

guide/spanish/javascript/tutorials/page-redirects-using-javascript/index.md

@@ -0,0 +1,59 @@
+---
+title: Page Redirects Using JavaScript
+localeTitle: Páginas redireccionadas usando JavaScript
+---
+## Páginas redireccionadas usando JavaScript
+
+Si está intentando redirigir a un usuario a otra página, puede usar JavaScript fácilmente para realizar esta tarea. Es importante tener en cuenta lo siguiente:
+
+Incluso si tiene la biblioteca jQuery cargada en sus scripts, es posible que desee utilizar la solución de JavaScript puro para redireccionar páginas con fines de eficiencia.
+
+Hay varias formas de hacerlo, pero la forma más sencilla es utilizar el objeto `window.location` para enviar al usuario a la página a la que desea que se le redirija. El objeto `window.location` puede usar cualquier valor de URL válido, como `http://www.yoururl.com` , `somepage.html` , etc.
+
+```javascript
+window.location = 'http://www.yoururl.com'; 
+ // window.location = 'somepage.html'; 
+ // etc. 
+```
+
+### Caso especial de redirección
+
+Puede usar un método de redireccionamiento especial que, de forma predeterminada, se adjunta al objeto `window.location` en cada navegador principal llamado `replace()` . Este método acepta los mismos valores de URL válidos que solo usando `window.location` .
+
+Este es un ejemplo del uso de este método (aún funcionará igual que si usara `window.location` en otros navegadores):
+
+```javascript
+window.location.replace('http://www.yoururl.com'); 
+ // window.location.replace('somepage.html'); 
+ // etc. 
+```
+
+### Una redirección temporizada simple usando JS
+
+Aquí hay un ejemplo de un redireccionamiento cronometrado simple usando la función `setTimeout()` . Los redireccionamientos programados son útiles para que pueda explicar al usuario, a través del contenido de la página de redireccionamiento, la razón por la que se están redirigiendo a otra página.
+
+```javascript
+// the 5000 below is 5000 milliseconds which equals 5 seconds until the redirect happens 
+ // keep in mind that 1 second = 1000 milliseconds 
+ setTimeout(function () { 
+    window.location = 'http://www.yoururl.com'; 
+    // window.location = 'somepage.html'; 
+    // etc. 
+ }, 5000); 
+```
+
+### Retroceder
+
+A veces, los usuarios navegan en Internet con JavaScript deshabilitado, lo que obviamente presenta problemas con una solución de redirección dependiente de JS. Recomiendo configurar un elemento `<meta>` que actualizará el navegador con la nueva ubicación. Establecería el tiempo para que este metaelemento sea un segundo después de que se suponga que tendrá lugar el redireccionamiento JS. Por lo tanto, si tiene una redirección que ocurre en JS después de 5 segundos, configure la redirección del elemento `<meta>` para que tenga lugar a 6 segundos.
+
+Coloque el elemento `<meta>` dentro de `<head>` de su documento de la siguiente manera:
+
+```html
+
+<head> 
+    <!-- Change the 6 below to however many seconds you wish to wait until redirection to the new page.  Change the portion after "URL=" to the URL of your choice.  This can be a local page: URL=somepage.html, a web address: URL=http://www.yoururl.com, or any other valid URL. It is important to note the semicolon between the number of seconds to refresh and the URL. --> 
+    <meta http-equiv="refresh" content="6;URL=http://www.yoururl.com"> 
+ </head> 
+```
+
+Tenga en cuenta que no todos los navegadores admiten el elemento `<meta>` (lo estoy viendo, las versiones anteriores de IE y Safari), pero la mayoría de los navegadores modernos sí lo hacen (Microsoft Edge, Google Chrome, Mozilla Firefox, Opera).

guide/spanish/javascript/tutorials/perform-arithmetic-operations-on-decimals-with-javascript/index.md

@@ -0,0 +1,9 @@
+---
+title: Perform Arithmetic Operations on Decimals with JavaScript
+localeTitle: Realizar operaciones aritméticas en decimales con JavaScript
+---
+En JavaScript, puede realizar cálculos con números decimales, al igual que los números enteros.
+```
+var quotient = 4.4 / 2.0; // equals 2.2 
+
+```

guide/spanish/javascript/tutorials/store-multiple-values-in-one-variable-using-javascript-arrays/index.md

@@ -0,0 +1,12 @@
+---
+title: Store Multiple Values in One Variable Using JavaScript Arrays
+localeTitle: Almacene múltiples valores en una variable usando arreglos de JavaScript
+---
+Con las variables de matriz de JavaScript, podemos almacenar varios datos en un solo lugar.
+
+Inicia una declaración de matriz con un corchete de apertura, finalícela con un corchete de cierre y ponga una coma entre cada entrada, como esto:
+```
+var sandwich = ["peanut butter", "jelly", "bread"] 
+```
+
+`myArray = [2,'j'];`

guide/spanish/javascript/tutorials/subtract-one-number-from-another-with-javascript/index.md

@@ -0,0 +1,11 @@
+---
+title: Subtract One Number from Another with JavaScript
+localeTitle: Resta un número de otro con JavaScript
+---
+También podemos restar un número de otro.
+
+JavaScript utiliza el símbolo - para restar.
+```
+var difference = 45 - 33; 
+
+```

guide/spanish/javascript/tutorials/the-javascript-version-of-jquerygetjson/index.md

@@ -0,0 +1,70 @@
+---
+title: JavaScript Version of Jquerygetjson
+localeTitle: Versión de JavaScript de Jquerygetjson
+---
+Si quieres trabajar con archivos json solo con vainilla JavaScript.
+
+## IE8 +
+```
+var request = new XMLHttpRequest(); 
+ request.open('GET', '/my/url', true); 
+ 
+ request.onreadystatechange = function() { 
+  if (this.readyState === 4) { 
+    if (this.status >= 200 && this.status < 400) { 
+      // Success! 
+      var data = JSON.parse(this.responseText); 
+    } else { 
+      // Error :( 
+    } 
+  } 
+ }; 
+ 
+ request.send(); 
+ request = null; 
+```
+
+## IE9 +
+```
+var request = new XMLHttpRequest(); 
+ request.open('GET', '/my/url', true); 
+ 
+ request.onload = function() { 
+  if (request.status >= 200 && request.status < 400) { 
+    // Success! 
+    var data = JSON.parse(request.responseText); 
+  } else { 
+    // We reached our target server, but it returned an error 
+ 
+  } 
+ }; 
+ 
+ request.onerror = function() { 
+  // There was a connection error of some sort 
+ }; 
+ 
+ request.send(); 
+```
+
+## IE10 +
+```
+var request = new XMLHttpRequest(); 
+ request.open('GET', '/my/url', true); 
+ 
+ request.onload = function() { 
+  if (this.status >= 200 && this.status < 400) { 
+    // Success! 
+    var data = JSON.parse(this.response); 
+  } else { 
+    // We reached our target server, but it returned an error 
+ 
+  } 
+ }; 
+ 
+ request.onerror = function() { 
+  // There was a connection error of some sort 
+ }; 
+ 
+ request.send(); 
+
+```

guide/spanish/javascript/tutorials/use-the-javascript-console/index.md

@@ -0,0 +1,20 @@
+---
+title: Use the JavaScript Console
+localeTitle: Usa la consola de JavaScript
+---
+Tanto Chrome como Firefox tienen excelentes consolas de JavaScript, también conocidas como DevTools, para depurar tu JavaScript.
+
+Puede encontrar Herramientas de desarrollador en el menú de su Chrome o la Consola web en el menú de FireFox. Si está utilizando un navegador diferente o un teléfono móvil, le recomendamos que cambie a la computadora de escritorio Firefox o Chrome.
+
+También puede usar [https://repl.it/](https://repl.it/) para ejecutar el código en línea.
+
+Así es como se imprime en la consola:
+```
+console.log('Hello world!') 
+```
+
+También puede imprimir un registro de errores en la consola con este código:
+```
+console.error('I am an error!') 
+
+```

guide/spanish/javascript/tutorials/using-anonymous-functions-for-private-namespacing-in-your-javascript-apps/index.md

@@ -0,0 +1,80 @@
+---
+title: Using Anonymous Functions for Private Namespacing in Your JavaScript Apps
+localeTitle: Uso de funciones anónimas para espacios privados en sus aplicaciones JavaScript
+---
+Echemos un vistazo a lo que es un espacio de nombres cuando se trata de crear aplicaciones JavaScript y algunos de los beneficios de usar un espacio de nombres privado al crear sus aplicaciones.
+
+**Tenga en cuenta que este artículo hace referencia a funciones anónimas de ejecución automática. Si no está al tanto de lo que es esto, lea este excelente artículo de Noah Stokes: [Funciones anónimas autoejecutables o Cómo escribir Javascript limpio](http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write) . En este artículo se detallarán las funciones anónimas de ejecución automática.**
+
+## ¿Qué es un espacio de nombres?
+
+En pocas palabras, un espacio de nombres es solo una sección de código que tiene su propio espacio. Cuando empiezas a escribir aplicaciones JS, generalmente solo escribes el código y lo ejecutas. Esto coloca todo el código en lo que se conoce como **espacio de nombres global** , que contiene todo el código de la ventana en la que está trabajando.
+
+Sin embargo, si mantiene todo su código en el **espacio de nombres global** , puede tener problemas con colisiones, convenciones de nombres, etc., especialmente en aplicaciones / juegos grandes de JS.
+
+Echemos un vistazo a un ejemplo de cómo usar solo el **espacio** de **nombres global** para desarrollar un juego es una mala idea.
+
+Entonces, digamos que tenemos un juego que sigue el seguimiento de los puntos que tiene el jugador:
+```
+var points = 0; 
+```
+
+Una gran cantidad de juegos rastrean puntos para agregar una ventaja competitiva al juego. Simplemente escribiendo esa línea en un script, hemos creado una variable denominada _puntos_ que puede rastrear los puntos ganados por el usuario.
+
+Y todo está bien, pero digamos que tenemos un usuario más avanzado que juega el juego. Este usuario sabe cómo buscar en la fuente de una página web, por lo que esta persona echa un vistazo a la fuente que se encuentra detrás del juego JS y se da cuenta de que la variable de _puntos_ solo está ahí en el **espacio de nombres global** . ¡Una sonrisa malvada desciende a través de su cara mientras contemplan los puntos que pueden lograr! Deciden que no quieren esperar para vencer a algunos malos, o aplastar algunos hongos, o lo que sea, para acumular un montón de puntos. ¡Quieren sus puntos ahora! Bueno, ¡¿cómo suena _un billón de millones de millones de_ puntos ?! Por lo tanto, cargan la consola en su navegador favorito y simplemente escriben en la consola:
+```
+points = 34750925489459203859095480917458059034; 
+```
+
+Una vez que el usuario ingresa, la variable de _puntos_ se actualiza en el juego. Ahora, el usuario tiene una cantidad de puntos verdaderamente enorme y probablemente irreal, en el juego, y puede presumir a sus amigos de que nadie puede superar su increíble puntaje.
+
+Entonces, ¿cómo evitamos que esto ocurra? Aquí es donde **los espacios de nombres privados** entran en juego.
+
+## Espacios de nombres privados
+
+**Los espacios de nombres privados** permiten a los desarrolladores colocar su código en secciones (o **espacios de nombres** ). Estas secciones operan de forma independiente, pero aún pueden leer y escribir desde el **espacio de nombres global** .
+
+Para desglosar esto en términos más simples a partir de un escenario de la vida real, digamos que está trabajando en un edificio de oficinas. Tienes tu propia oficina y ves a otros con sus propias oficinas. Cada oficina está cerrada, y solo la persona que posee la oficina tiene una llave para esta oficina. Digamos también que tiene algún tipo de nuevo bloqueo súper que hace que su oficina sea impenetrable por cualquier otra persona en el edificio. Consideremos el edificio de oficinas como el **espacio de nombres global** y cada oficina como un **espacio de nombres privado** . Usted no tiene acceso a la oficina de nadie más, ni ellos tienen acceso al suyo. Pero, cada uno de ustedes tiene acceso al resto del edificio de oficinas, ya sea para tomar un café, tomar un refrigerio, etc. Cada uno de ustedes puede tomar algo del **espacio de nombres global** (o crear / modificar algo allí), pero puede no cree / modifique / agarre nada de las oficinas de los demás; solo puede crear / modificar / capturar desde su propio **espacio de nombres** / oficina **privado** .
+
+## Lograr un espacio de nombres privado
+
+Entonces, ¿cómo logramos este **espacio** de **nombres privado** en JavaScript? Utilice una función de ejecución automática anónima! Si no leyó el artículo de Noah Stokes, [Funciones anónimas autoejecutables o Cómo escribir Javascript limpio](http://esbueno.noahstokes.com/post/77292606977/self-executing-anonymous-functions-or-how-to-write) , hágalo ahora. En este artículo se detallarán las funciones anónimas de ejecución automática.
+
+Echemos un vistazo al uso de esa variable de _puntos_ anterior, pero separémosla en un **espacio de nombres privado** :
+```
+//The most common way you'll see an anonymous self-executing function 
+ (function () { 
+    var points = 0; 
+ })(); 
+ 
+ //This is just one of many more alternative ways to use an anonymous self-executing function 
+ /* 
+ !function () { 
+    var points = 0; 
+ }(); 
+ */ 
+```
+
+Ahora, cuando el usuario llega a la página, ¡no podrán abrir la consola en su navegador y cambiar el valor de la variable de puntos como lo deseen! ¡Increíble!
+
+## Espacio de nombres e interacción de documentos
+
+El código anterior no fue más que un uso para usar una función anónima de ejecución automática para dar al código su propio **espacio de nombres privado** . Tenga en cuenta que los espacios de nombres solo afectan el código JS (variables / arrays / objects / etc.), No el código que pertenece al documento en sí.
+
+Cualquier código dentro de un espacio de nombres todavía tiene el mismo acceso al documento HTML y CSS, como lo haría normalmente en el **espacio de nombres global** . Eche un vistazo a las siguientes dos muestras de código. Ambos realizan la misma funcionalidad, y ninguno es más beneficioso o más eficiente que el otro.
+```
+<script type="text/javascript"> 
+    (function () { 
+        document.querySelector('body').style.background = 'blue'; 
+    })(); 
+ </script> 
+```
+
+es lo mismo que:
+```
+<script type="text/javascript"> 
+    document.querySelector('body').style.background = 'blue'; 
+ </script> 
+```
+
+Tenga en cuenta que esta es solo una forma de usar espacios de nombres en aplicaciones JavaScript. Adapte su código a lo que mejor se adapte a la situación en cuestión.

guide/spanish/javascript/tutorials/what-does-javascript-void-0-mean/index.md

@@ -0,0 +1,90 @@
+---
+title: What Does JavaScript Void 0 Mean
+localeTitle: ¿Qué significa JavaScript Void 0?
+---
+## ¿Qué significa JavaScript Void 0?
+
+**El operador de vacío de JavaScript evalúa una expresión y devuelve undefined** .
+
+Usando la consola para verificar lo mismo: -
+
+![Salida de consola](https://github.com/srawat19/-Guide_Images/blob/master/VoidConsole.PNG?raw=true)
+
+**_Nota_** : - **anular** independientemente de cualquier valor pasado, _siempre devuelve **undefined** como se muestra arriba_ . Pero, el **vacío con el operando 0 es el preferido** .
+
+**Dos formas de usar el operando 0 -> void (0) o void 0.** Cualquiera de las dos está bien.
+
+#### ¿Cuándo usar Javascript void (0)?
+
+Cuando haga clic en el enlace, no desea que el navegador cargue una nueva página o actualice la misma página (dependiendo de la URL especificada). En su lugar, realice el JavaScript adjunto a ese enlace.
+
+#### Ejemplo de ejemplo 1 con Javascript nulo (0):
+
+```html
+
+<html> 
+ <body> 
+ <a href="javascript:void(0);alert('Hello ! I am here')">Click Me</a> 
+ </body> 
+ </html> 
+```
+
+#### Salida:
+
+Cuando se hace clic en el enlace de ClickMe, aparece una alerta de la siguiente manera:
+
+![Salida1](https://github.com/srawat19/-Guide_Images/blob/master/voidOutput1.PNG?raw=true)
+
+#### Ejemplo de ejemplo 2 con Javascript nulo (0):
+
+```html
+
+<html> 
+ <body> 
+ <a href="javascript:void(0)" ondblclick="alert('Hi,i didnt refresh the page')" )>Click Me</a> 
+ </body> 
+ </html> 
+```
+
+#### Salida:
+
+Cuando haga doble clic en el enlace, aparecerá una alerta emergente sin ninguna actualización de página.
+
+#### Ejemplo de ejemplo 3 con Javascript nulo (0):
+
+```html
+
+<html> 
+ <body> 
+ <a href="javascript:void(0);https://www.google.co.in/" 
+ ondblclick="alert('Hello !! You will see me and not get redirected to google.com ')">Click Me</a> 
+ </body> 
+ </html> 
+```
+
+#### Salida:
+
+Cuando haga doble clic en el enlace, se abrirá una alerta y, al cerrarlo, tampoco se redirigirá a google.com.
+
+#### Ejemplo de muestra sin Javascript void (0):
+
+```html
+
+<html> 
+ <body> 
+ <a href="https://www.google.co.in/" ondblclick="alert('Hello !! You will see me and then get redirected to google.com even if not needed')">Click Me</a> 
+ </body> 
+ </html> 
+```
+
+#### Salida:
+
+Cuando haga doble clic en el enlace, se abrirá una alerta y, al cerrarlo, se redirigirá a google.com.
+
+#### Conclusión:
+
+**void** operator es útil cuando necesita evitar cualquier actualización o redirección no deseada de la página. Más bien, realizar alguna operación javascript.
+
+#### Más información:
+
+1) [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void) 2) [Entendiendo el vacío 0](https://www.quackit.com/javascript/tutorial/javascript_void_0.cfm)

guide/spanish/javascript/tutorials/write-reusable-javascript-with-functions/index.md

@@ -0,0 +1,33 @@
+---
+title: Write Reusable JavaScript with Functions
+localeTitle: Escribir JavaScript reutilizable con funciones
+---
+En JavaScript, podemos dividir nuestro código en partes reutilizables llamadas funciones.
+
+Aquí hay un ejemplo de una función:
+```
+function functionName() { 
+  console.log("Hello World"); 
+ } 
+```
+
+Puede `call` o `invoke` esta función utilizando su nombre seguido de paréntesis, como este:
+```
+functionName(); 
+```
+
+Cada vez que se llame a la función, se imprimirá el mensaje "Hello World" en la consola dev. Todo el código entre las llaves se ejecutará cada vez que se llame a la función.
+
+Aquí hay otro ejemplo:
+```
+function otherFunctionName (a, b) { 
+    return(a + b); 
+ } 
+```
+
+Podemos `call` o `invoke` nuestra función así:
+```
+otherFunctionName(1,2); 
+```
+
+y se ejecutará y devolverá su valor de retorno a nosotros.