chore(i18n,learn): processed translations

curriculum/challenges/espanol/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md

@@ -24,7 +24,9 @@ Cambia el `margin` de la caja azul a `-15px` para que llene todo el ancho horizo
 Tu clase `blue-box` debería dar a los elementos un `margin` de `-15px`.
 
 ```js
-assert($('.blue-box').css('margin-top') === '-15px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)["margin-top"]; 
+assert.strictEqual(marginTop, "-15px"); 
 ```
 
 # --seed--

curriculum/challenges/espanol/01-responsive-web-design/basic-css/add-borders-around-your-elements.md

@@ -38,35 +38,38 @@ Recuerda que puedes aplicar múltiples clases a un elemento usando su atributo `
 Tu elemento `img` debe incluir la "class" `smaller-image`.
 
 ```js
-assert($('img').hasClass('smaller-image'));
+assert.isTrue(document.querySelector('img').classList.contains('smaller-image'));
 ```
 
 Tu elemento `img` debe incluir la "class" `thick-green-border`.
 
 ```js
-assert($('img').hasClass('thick-green-border'));
+assert.isTrue(document.querySelector('img').classList.contains('thick-green-border'));
 ```
 
 Tu imagen debe tener un ancho de borde o "border-width" de `10px`.
 
 ```js
-assert(
-  $('img').hasClass('thick-green-border') &&
-    parseInt($('img').css('border-top-width'), 10) >= 8 &&
-    parseInt($('img').css('border-top-width'), 10) <= 12
-);
+const image = document.querySelector('img'); 
+const imageBorderTopWidth = window.getComputedStyle(image)["border-top-width"]; 
+
+assert.strictEqual(imageBorderTopWidth, "10px")
 ```
 
 Tu imagen debe tener un estilo de borde o "border-style" `solid`.
 
 ```js
-assert($('img').css('border-right-style') === 'solid');
+const image = document.querySelector('img'); 
+const borderRightStyle = window.getComputedStyle(image)["border-right-style"]; 
+assert.strictEqual(borderRightStyle, 'solid');
 ```
 
 El borde alrededor de tu elemento `img` debe ser verde.
 
 ```js
-assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
+const image = document.querySelector('img'); 
+const borderLeftColor = window.getComputedStyle(image)["border-left-color"]; 
+assert.strictEqual(borderLeftColor, 'rgb(0, 128, 0)');
 ```
 
 # --seed--

curriculum/challenges/espanol/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md

@@ -22,25 +22,33 @@ Asigna a la caja azul un `margin` de `40px` en sus lados superior e izquierdo, p
 Tu clase `blue-box` debe asignar al lado superior (top) de los elementos `40px` de `margin`.
 
 ```js
-assert($('.blue-box').css('margin-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)['margin-top'];
+assert.strictEqual(marginTop, '40px');
 ```
 
 Tu clase `blue-box` debe asignar al lado derecho (right) de los elementos `20px` de `margin`.
 
 ```js
-assert($('.blue-box').css('margin-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginRight = window.getComputedStyle(blueBox)['margin-right'];
+assert.strictEqual(marginRight, '20px');
 ```
 
 Tu clase `blue-box` debe asignar al lado inferior (bottom) de los elementos `20px` de `margin`.
 
 ```js
-assert($('.blue-box').css('margin-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginBottom = window.getComputedStyle(blueBox)['margin-bottom'];
+assert.strictEqual(marginBottom, '20px');
 ```
 
 Tu clase `blue-box` debe asignar al lado izquierdo (left) de los elementos `40px` de `margin`.
 
 ```js
-assert($('.blue-box').css('margin-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const marginLeft = window.getComputedStyle(blueBox)['margin-left'];
+assert.strictEqual(marginLeft,'40px');
 ```
 
 # --seed--

curriculum/challenges/espanol/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md

@@ -22,25 +22,33 @@ Asigna a la caja azul un `padding` de `40px` en sus lados superior e izquierdo,
 Tu clase `blue-box` debe asignar al lado superior (top) de los elementos `40px` de `padding`.
 
 ```js
-assert($('.blue-box').css('padding-top') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
+assert.strictEqual(paddingTop, '40px');
 ```
 
 Tu clase `blue-box` debe asignar al lado derecho (right) de los elementos `20px` de `padding`.
 
 ```js
-assert($('.blue-box').css('padding-right') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingRight = window.getComputedStyle(blueBox)['padding-right'];
+assert.strictEqual(paddingRight, '20px');
 ```
 
 Tu clase `blue-box` debe asignar al lado inferior (bottom) de los elementos `20px` de `padding`.
 
 ```js
-assert($('.blue-box').css('padding-bottom') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingBottom = window.getComputedStyle(blueBox)['padding-bottom'];
+assert.strictEqual(paddingBottom, '20px');
 ```
 
 Tu clase `blue-box` debe asignar al lado izquierlo (left) de los elementos `40px` de `padding`.
 
 ```js
-assert($('.blue-box').css('padding-left') === '40px');
+const blueBox = document.querySelector('.blue-box');
+const paddingLeft = window.getComputedStyle(blueBox)['padding-left'];
+assert.strictEqual(paddingLeft, '40px');
 ```
 
 # --seed--

curriculum/challenges/espanol/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md

@@ -22,18 +22,23 @@ Puedes especificar un `border-radius` usando píxeles como unidad de medida. Dal
 Tu elemento img debe incluir la clase `thick-green-border`.
 
 ```js
-assert($('img').hasClass('thick-green-border'));
+assert.isTrue(document.querySelector('img').classList.contains('thick-green-border'));
 ```
 
 Tu imagen debe tener un "border-radius" (radio del borde) de `10px`.
 
 ```js
-assert(
-  $('img').css('border-top-left-radius') === '10px' &&
-    $('img').css('border-top-right-radius') === '10px' &&
-    $('img').css('border-bottom-left-radius') === '10px' &&
-    $('img').css('border-bottom-right-radius') === '10px'
-);
+const image = document.querySelector('img');
+const style = window.getComputedStyle(image);  
+const borderTopLeftRadius = style['border-top-left-radius']; 
+const borderTopRightRadius = style['border-top-right-radius'];
+const borderBottomLeftRadius = style['border-bottom-left-radius'];
+const borderBottomRightRadius = style['border-bottom-right-radius'];
+
+assert.strictEqual(borderTopLeftRadius, '10px');
+assert.strictEqual(borderTopRightRadius, '10px');
+assert.strictEqual(borderBottomLeftRadius, '10px');
+assert.strictEqual(borderBottomRightRadius, '10px');
 ```
 
 # --seed--

curriculum/challenges/espanol/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md

@@ -24,7 +24,9 @@ Cambia el `margin` de la caja azul para que coincida con el de la caja roja.
 Tu clase `blue-box` debe asignar a los elementos `20px` de `margin`.
 
 ```js
-assert($('.blue-box').css('margin-top') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const marginTop = window.getComputedStyle(blueBox)['margin-top'];
+assert.strictEqual(marginTop, '20px');
 ```
 
 # --seed--

curriculum/challenges/espanol/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md

@@ -30,7 +30,9 @@ Cambia el `padding` de la caja azul para que coincida con el de la caja roja.
 Tu clase `blue-box` debe asignar a los elementos `20px` de `padding`.
 
 ```js
-assert($('.blue-box').css('padding-top') === '20px');
+const blueBox = document.querySelector('.blue-box');
+const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
+assert.strictEqual(paddingTop, '20px');
 ```
 
 # --seed--

curriculum/challenges/espanol/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md

@@ -30,21 +30,13 @@ Aparentemente hay un problema con las variables proporcionadas a las clases `.pe
 El valor de reserva `black` debe utilizarse en la propiedad `background` de la clase `penguin-top`.
 
 ```js
-assert(
-  code.match(
-    /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi);
 ```
 
 El valor de reserva `black` debe utilizarse en la propiedad `background` de la clase `penguin-bottom`.
 
 ```js
-assert(
-  code.match(
-    /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
-  )
-);
+assert.match(__helpers.removeCssComments(code), /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi);
 ```
 
 # --seed--

curriculum/challenges/espanol/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md

@@ -22,17 +22,13 @@ Cambia el valor de `--penguin-belly` a `white` en la clase `penguin`.
 La clase `penguin` debe reasignar la variable `--penguin-belly` a `white`.
 
 ```js
-assert(
-  code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
-);
+assert.match(__helpers.removeCssComments(code), /\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi);
 ```
 
 La clase `penguin` no debe de tener la propiedad `background-color`.
 
 ```js
-assert(
-  code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
-);
+assert.match(__helpers.removeCssComments(code), /^((?!background-color\s*?:\s*?)[\s\S])*$/g);
 ```
 
 

curriculum/challenges/espanol/01-responsive-web-design/basic-css/change-the-color-of-text.md

@@ -32,19 +32,19 @@ Cambia el estilo de tu elemento `h2` para que el texto de ese elemento sea de co
 Tu elemento `h2` debe incluir una declaración `style`.
 
 ```js
-assert($('h2').attr('style'));
+assert.exists(document.querySelector('h2').getAttribute('style'));
 ```
 
 Tu elemento `h2` debe tener "color" configurado como `red`.
 
 ```js
-assert($('h2')[0].style.color === 'red');
+assert.strictEqual(document.querySelector('h2').style.color, 'red');
 ```
 
 Tu declaración `style` debe terminar con punto y coma (`;`).
 
 ```js
-assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
+assert.isTrue(document.querySelector('h2').getAttribute('style').endsWith(';'));
 ```
 
 # --seed--

curriculum/challenges/espanol/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md

@@ -26,7 +26,7 @@ Dentro de la misma etiqueta `<style>` que contiene tu clase `red-text`, crea una
 Entre las etiquetas `style`, asigna a los elementos `p` un `font-size` de `16px`. El zoom del navegador y del texto deben estar al 100%.
 
 ```js
-assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
+assert.match(__helpers.removeCssComments(code), /p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i);
 ```
 
 # --seed--

curriculum/challenges/espanol/01-responsive-web-design/basic-css/create-a-custom-css-variable.md

@@ -26,9 +26,7 @@ En la clase `penguin`, crea un nombre de variable `--penguin-skin` y asígnale e
 La clase `penguin` debe declarar la variable `--penguin-skin` y asignarle el valor `gray`.
 
 ```js
-assert(
-  code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi)
-);
+assert.match(__helpers.removeHtmlComments(code), /\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi);
 ```
 
 # --seed--

curriculum/challenges/espanol/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md

@@ -28,19 +28,21 @@ Crea una clase llamada `silver-background` con un `background-color` `silver` (p
 Tu elemento `div` debe incluir la "class" `silver-background`.
 
 ```js
-assert($('div').hasClass('silver-background'));
+assert.isTrue(document.querySelector('div').classList.contains('silver-background'));
 ```
 
 Tu elemento `div` debe tener un color de fondo "silver" (plateado).
 
 ```js
-assert($('div').css('background-color') === 'rgb(192, 192, 192)');
+const div = document.querySelector('div');
+const backgroundColor = window.getComputedStyle(div)['background-color']; 
+assert.strictEqual(backgroundColor, 'rgb(192, 192, 192)');
 ```
 
 Una clase llamada `silver-background` debe estar definida dentro del elemento `style` y el valor `silver` debe ser asignado a la propiedad `background-color`.
 
 ```js
-assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
+assert.match(__helpers.removeHtmlComments(code), /\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/);
 ```
 
 # --seed--

curriculum/challenges/espanol/01-responsive-web-design/basic-css/import-a-google-font.md

@@ -40,37 +40,29 @@ Importa la fuente `Lobster` a tu página web. Luego, usa un selector de elemento
 Debes importar la fuente `Lobster`.
 
 ```js
-assert($('link[href*="googleapis" i]').length);
+assert.exists(document.querySelector('link[href*="googleapis" i]'));
 ```
 
 Tu elemento `h2` debe usar la fuente `Lobster`.
 
 ```js
-assert(
-  $('h2')
-    .css('font-family')
-    .match(/lobster/i)
-);
+const h2 = document.querySelector('h2'); 
+const fontFamily = window.getComputedStyle(h2)['font-family']; 
+assert.match(fontFamily, /lobster/i);
 ```
 
 Solo debes utilizar un selector de elementos `h2` para cambiar la fuente.
 
 ```js
-assert(
-  /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
-    code
-  )
-);
+assert.match(__helpers.removeHtmlComments(code), /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi);
 ```
 
 Tu elemento `p` debe seguir usando la fuente `monospace`.
 
 ```js
-assert(
-  $('p')
-    .css('font-family')
-    .match(/monospace/i)
-);
+const paragraphElement = document.querySelector('p');
+const fontFamily = window.getComputedStyle(paragraphElement)['font-family']; 
+assert.match(fontFamily, /monospace/i);
 ```
 
 # --seed--

curriculum/challenges/espanol/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md

@@ -23,12 +23,10 @@ Parece que en este código se utiliza una variable para establecer el color de f
 Tu regla `.red-box` debe incluir un valor de respaldo o "fallback" con el `background` con un valor de `red`, inmediatamente antes de la declaración `background` existente.
 
 ```js
-assert(
-  code
-    .replace(/\s/g, '')
-    .match(
-      /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
-    )
+const spacelessCode = __helpers.removeWhiteSpace(__helpers.removeCssComments(code));
+assert.match(
+  spacelessCode,
+  /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
 );
 ```
 

curriculum/challenges/espanol/01-responsive-web-design/basic-css/inherit-css-variables.md

@@ -24,8 +24,9 @@ Define una variable llamada `--penguin-belly` en el selector `:root` y asígnale
 La variable `--penguin-belly` debe ser declarada en `:root` y se le debe asignar el valor `pink`.
 
 ```js
-assert(
-  code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
+assert.match(
+  __helpers.removeCssComments(code),
+  /:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi
 );
 ```