Merge pull request #110 from josemoracard/jose3-12-and-13

tommygonzaleza · web-flow · commit 0e6b3e4a86b7 · 2023-04-12T15:50:28.000-04:00
fixed text, link, styles exercises 12 and 13
diff --git a/exercises/12-Relative-Length-EM-REM/README.es.md b/exercises/12-Relative-Length-EM-REM/README.es.md
@@ -1,4 +1,4 @@
-# `12` Longitud Relativa em, rem:
+# `12` Longitud Relativa em, rem
 
 Hasta ahora, hemos trabajado con píxeles como unidad de medida, por ejemplo, diciendo que un contenedor o caja tiene `100px` de ancho.
 
@@ -8,11 +8,13 @@ Hay otros tipos de unidades que no son absolutas, sino relativas. Las usamos cua
 
 En este ejercicio tenemos dos encabezados `<h2>`. Ambos son `<h2>`, pero uno es más grande que el otro porque los encabezados tienen `font-size` relativos por defecto. 
 
-Dado que el primer `div` tiene un `font-size` más grande, el título cambia de tamaño en consecuencia y el `heading` se adapta.
+Dado que el segundo `div` tiene un `font-size` más grande, el título cambia de tamaño en consecuencia y el `heading` se adapta.
 
-em: Relativo al `font-size` actual del padre.
+## En resumen:
 
-rem: Relativo al `font-size` original de la página.
++ em: Relativo al `font-size` actual del padre.
+
++ rem: Relativo al `font-size` original de la página.
 
 ## 📝 Instrucciones:
 
diff --git a/exercises/12-Relative-Length-EM-REM/README.md b/exercises/12-Relative-Length-EM-REM/README.md
@@ -1,18 +1,20 @@
 # `12` Relative Length em, rem
 
-By now, we are used to working with pixels as measurement unit, for example, saying that a box has `100px` of width.
+By now, we are used to working with pixels as a measurement unit, for example, saying that a box has `100px` of width.
 
 There are other types of units that are not fixed, but relative. We use them when we want the element size to be related to another element or measurement unit.
 
 ## Example using em:
 
 In this exercise we have two `<h2>` headings. They are both `<h2>`, but one is bigger than the other because headings have relative font-sizes by default. 
 
-Since the first `div` has a bigger based `font-size`, then the heading resizes accordingly.
+Since the second `div` has a bigger based `font-size`, then the heading resizes accordingly.
 
-em: Relative to the current font-size of the parent.
+## In short:
 
-rem: Relative to the original font-size of the page.
++ em: Relative to the current font-size of the parent.
+
++ rem: Relative to the original font-size of the page.
 
 
 ## 📝 Instructions:
diff --git a/exercises/12-Relative-Length-EM-REM/tests.js b/exercises/12-Relative-Length-EM-REM/tests.js
@@ -10,7 +10,7 @@ describe("All the styles should be applied", ()=>{
   const meta = document.querySelector("meta")
   const title = document.querySelector('title')
   const link = document.querySelector('link')
-  test("The H2 Tag should have a font-size: 0.8em", ()=>{
+  test("The <h2> tag should have a font-size: 0.8em", ()=>{
     // get computed styles of any element you like
     document.querySelector(
       "head"
@@ -19,7 +19,7 @@ describe("All the styles should be applied", ()=>{
     var styles = window.getComputedStyle(h2Tag);
     expect(styles["font-size"]).toBe("0.8em");
   });
-  test("The H3 Tag should haave a font-size: 0.8rem", ()=>{
+  test("The <h3> tag should have a font-size: 0.8rem", ()=>{
     // get computed styles of any element you like
     document.querySelector(
       "head"
@@ -28,7 +28,7 @@ describe("All the styles should be applied", ()=>{
     var styles = window.getComputedStyle(h3Tag);
     expect(styles["font-size"]).toBe("0.8rem");
   });
-  test("You should not change the existing head tag elements", ()=>{
+  test("You should not change the existing <head> tag elements", ()=>{
     let head = document.querySelector('head')
     expect(head).toBeTruthy()
 
diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/13-Anchor-Like-Button/README.es.md
@@ -1,27 +1,25 @@
-# `13` Enlace (anchor) como botón: 
+# `13` Enlace (anchor) como botón
 
-Los enlaces (`anchors`) no solo se usan dentro del texto: cuando va a usar enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que sea experiencia más amigable.
+Los enlaces (`anchors`) no solo se usan dentro del texto: cuando usas enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que la experiencia del usuario sea más amigable.
 
 ## 📝 Instrucciones:
 
-Siga estos pasos para que tu enlace (`anchor`) se vea así:
+Sigue estos pasos para que tu enlace (`anchor`) se vea así:
 
 1. Haz que se vea como una caja: establece el `padding` en `10px`.
 
 2. Bordes redondeados: establece el `border-radius` en `4px`.
 
-3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange`
+3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange`.
 
-4. Encuentra y aplica el color: usa el selector de `color` (color picker) para encontrar el color exacto y aplicárselo al `background`.
+4. Eliminar subrayado: establece `text-decoration` a `none`.
 
-5. Eliminar subrayado: establece `text-decoration` a `none`.
+5. Establece el color del texto a blanco (`white`)
 
-6. Establecer el color del texto en blanco (`white`)
++ *Para que el botón se vea diferente cuando el usuario pasa el ratón por encima, usamos el selector `:hover`: https://www.w3schools.com/cssref/sel_hover.php*
 
-*Para que el botón se vea diferente cuando el usuario pasa el mouse por encima, usamos el selector `:hover`: http://lmgtfy.com/?q=how+to+use+the+hover*
+6. Dentro del selector `:hover` cambia el fondo del botón a `darkorange`.
 
-7. Dentro del selector `:hover` cambia el fondo del botón a `#cc7a00`.
-
-## Reultado esperado:
+## Resultado esperado:
 
 ![Example Image](../../.learn/assets/13-1.gif?raw=true)
diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md
@@ -1,25 +1,23 @@
 # `13` Anchor Like Button
 
-Anchors are not only used within text- when you are going to use anchors outside text, it is better to make them look like buttons for a more user-friendly experience.
+Anchors are not only used within text: when you are going to use anchors outside text, it is better to make them look like buttons for a more user-friendly experience.
 
 ## 📝 Instructions:
 
-1. Make it look like a box: Set `padding` to `10px`.
+1. Make it look like a box: set `padding` to `10px`.
 
-2. Rounded borders: Set `border-radius` to `4px`.
+2. Rounded borders: set `border-radius` to `4px`.
 
 3. The background should be `orange` when not hovered, and `darkorange` on hover (`:hover`).
 
-4. Find and apply the color: Use the color picker to find the color and apply make the background to that color.
+4. Remove underline: set `text-decoration` to `none`.
 
-5. Remove underline: Set `text-decoration` to `none`.
+5. Set the color of the text to `white`.
 
-6. Set the color of the text to `white`.
++ *To make the button look different when the user hovers over with the mouse, we use the `:hover` selector: https://www.w3schools.com/cssref/sel_hover.php*
 
-*To make the button look different when the user hovers over with the mouse, we use the `:hover` selector: http://lmgtfy.com/?q=how+to+use+the+hover*
-
-7. Inside of the `:hover` selector change the background of the button to `#cc7a00`.
+6. Inside of the `:hover` selector change the background of the button to `darkorange`.
 
 ## Expected result:
 
-![Example Image](../../.learn/assets/13-1.gif?raw=true)
+![Example Image](../../.learn/assets/13-1.gif?raw=true)
diff --git a/exercises/13-Anchor-Like-Button/solution-hide.css b/exercises/13-Anchor-Like-Button/solution-hide.css
diff --git a/exercises/13-Anchor-Like-Button/solution.hide.css b/exercises/13-Anchor-Like-Button/solution.hide.css
@@ -1,5 +1,6 @@
 .orange-btn {
-	/*your code here*/
+	display: inline-block;
+	/* your code below */
 	padding: 10px;
 	border-radius: 4px;
 	text-decoration: none;
@@ -8,6 +9,6 @@
 }
 
 .orange-btn:hover {
-	/*YOUR CODE HERE FOR THE HOVER STATE*/
+	/* YOUR CODE HERE FOR THE HOVER STATE */
 	background: darkorange;
 }
diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/13-Anchor-Like-Button/styles.css
@@ -1,9 +1,10 @@
 .orange-btn {
-	/*your code here*/
+	display: inline-block;
+	/* your code below */
     
 }
 
 .orange-btn:hover {
-	/*YOUR CODE HERE FOR THE HOVER STATE*/
+	/* YOUR CODE HERE FOR THE HOVER STATE */
 
-}
+}
diff --git a/exercises/13-Anchor-Like-Button/tests.js b/exercises/13-Anchor-Like-Button/tests.js
@@ -10,7 +10,7 @@ describe("All the styles should be applied", ()=>{
   const meta = document.querySelector("meta")
   const title = document.querySelector('title')
   const link = document.querySelector('link')
-  test("the  padding  should be '10px'", ()=>{
+  test("The padding should be '10px'", ()=>{
     document.querySelector(
       "head"
 
@@ -20,7 +20,7 @@ describe("All the styles should be applied", ()=>{
 
     expect(classTagStyles["padding"]).toBe("10px");
   });
-  test("the border radius should be '4px'", ()=>{
+  test("The border-radius should be '4px'", ()=>{
     document.querySelector(
       "head"
 
@@ -29,7 +29,7 @@ describe("All the styles should be applied", ()=>{
     let classTagStyles = window.getComputedStyle(divTag);
     expect(classTagStyles["border-radius"]).toBe("4px");
   });
-  test("the underline should be removed", ()=>{
+  test("The underline should be removed", ()=>{
     document.querySelector(
       "head"
 
@@ -47,7 +47,7 @@ describe("All the styles should be applied", ()=>{
     expect(cssArray).toBe(".orange-btn");
   }
   )
-  test("You should not change the existing head tag elements", ()=>{
+  test("You should not change the existing <head> tag elements", ()=>{
     let head = document.querySelector('head')
     expect(head).toBeTruthy()
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`.orange-btn {`
`2`		`- /your code here/`
	`2`	`+ display: inline-block;`
	`3`	`+ /* your code below */`
`3`	`4`	`padding: 10px;`
`4`	`5`	`border-radius: 4px;`
`5`	`6`	`text-decoration: none;`
`@@ -8,6 +9,6 @@`
`8`	`9`	`}`
`9`	`10`
`10`	`11`	`.orange-btn:hover {`
`11`		`- /YOUR CODE HERE FOR THE HOVER STATE/`
	`12`	`+ /* YOUR CODE HERE FOR THE HOVER STATE */`
`12`	`13`	`background: darkorange;`
`13`	`14`	`}`