Skip to content

Commit 0e6b3e4

Browse files
tommygonzalezatommygonzaleza
authored
Merge pull request 4GeeksAcademy#110 from josemoracard/jose3-12-and-13
fixed text, link, styles exercises 12 and 13
2 parents d3d1cb8 + 5ac8d24 commit 0e6b3e4

File tree

9 files changed

+43
-55
lines changed

9 files changed

+43
-55
lines changed

‎exercises/12-Relative-Length-EM-REM/README.es.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# `12` Longitud Relativa em, rem:
1+
# `12` Longitud Relativa em, rem
22

33
Hasta ahora, hemos trabajado con píxeles como unidad de medida, por ejemplo, diciendo que un contenedor o caja tiene `100px` de ancho.
44

@@ -8,11 +8,13 @@ Hay otros tipos de unidades que no son absolutas, sino relativas. Las usamos cua
88

99
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.
1010

11-
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.
11+
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.
1212

13-
em: Relativo al `font-size` actual del padre.
13+
## En resumen:
1414

15-
rem: Relativo al `font-size` original de la página.
15+
+ em: Relativo al `font-size` actual del padre.
16+
17+
+ rem: Relativo al `font-size` original de la página.
1618

1719
## 📝 Instrucciones:
1820

‎exercises/12-Relative-Length-EM-REM/README.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
# `12` Relative Length em, rem
22

3-
By now, we are used to working with pixels as measurement unit, for example, saying that a box has `100px` of width.
3+
By now, we are used to working with pixels as a measurement unit, for example, saying that a box has `100px` of width.
44

55
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.
66

77
## Example using em:
88

99
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.
1010

11-
Since the first `div` has a bigger based `font-size`, then the heading resizes accordingly.
11+
Since the second `div` has a bigger based `font-size`, then the heading resizes accordingly.
1212

13-
em: Relative to the current font-size of the parent.
13+
## In short:
1414

15-
rem: Relative to the original font-size of the page.
15+
+ em: Relative to the current font-size of the parent.
16+
17+
+ rem: Relative to the original font-size of the page.
1618

1719

1820
## 📝 Instructions:

‎exercises/12-Relative-Length-EM-REM/tests.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ describe("All the styles should be applied", ()=>{
1010
const meta = document.querySelector("meta")
1111
const title = document.querySelector('title')
1212
const link = document.querySelector('link')
13-
test("The H2 Tag should have a font-size: 0.8em", ()=>{
13+
test("The <h2> tag should have a font-size: 0.8em", ()=>{
1414
// get computed styles of any element you like
1515
document.querySelector(
1616
"head"
@@ -19,7 +19,7 @@ describe("All the styles should be applied", ()=>{
1919
var styles = window.getComputedStyle(h2Tag);
2020
expect(styles["font-size"]).toBe("0.8em");
2121
});
22-
test("The H3 Tag should haave a font-size: 0.8rem", ()=>{
22+
test("The <h3> tag should have a font-size: 0.8rem", ()=>{
2323
// get computed styles of any element you like
2424
document.querySelector(
2525
"head"
@@ -28,7 +28,7 @@ describe("All the styles should be applied", ()=>{
2828
var styles = window.getComputedStyle(h3Tag);
2929
expect(styles["font-size"]).toBe("0.8rem");
3030
});
31-
test("You should not change the existing head tag elements", ()=>{
31+
test("You should not change the existing <head> tag elements", ()=>{
3232
let head = document.querySelector('head')
3333
expect(head).toBeTruthy()
3434

‎exercises/13-Anchor-Like-Button/README.es.md‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
1-
# `13` Enlace (anchor) como botón:
1+
# `13` Enlace (anchor) como botón
22

3-
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.
3+
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.
44

55
## 📝 Instrucciones:
66

7-
Siga estos pasos para que tu enlace (`anchor`) se vea así:
7+
Sigue estos pasos para que tu enlace (`anchor`) se vea así:
88

99
1. Haz que se vea como una caja: establece el `padding` en `10px`.
1010

1111
2. Bordes redondeados: establece el `border-radius` en `4px`.
1212

13-
3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange`
13+
3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange`.
1414

15-
4. Encuentra y aplica el color: usa el selector de `color` (color picker) para encontrar el color exacto y aplicárselo al `background`.
15+
4. Eliminar subrayado: establece `text-decoration` a `none`.
1616

17-
5. Eliminar subrayado: establece `text-decoration` a `none`.
17+
5. Establece el color del texto a blanco (`white`)
1818

19-
6. Establecer el color del texto en blanco (`white`)
19+
+ *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*
2020

21-
*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*
21+
6. Dentro del selector `:hover` cambia el fondo del botón a `darkorange`.
2222

23-
7. Dentro del selector `:hover` cambia el fondo del botón a `#cc7a00`.
24-
25-
## Reultado esperado:
23+
## Resultado esperado:
2624

2725
![Example Image](../../.learn/assets/13-1.gif?raw=true)

‎exercises/13-Anchor-Like-Button/README.md‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
11
# `13` Anchor Like Button
22

3-
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.
3+
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.
44

55
## 📝 Instructions:
66

7-
1. Make it look like a box: Set `padding` to `10px`.
7+
1. Make it look like a box: set `padding` to `10px`.
88

9-
2. Rounded borders: Set `border-radius` to `4px`.
9+
2. Rounded borders: set `border-radius` to `4px`.
1010

1111
3. The background should be `orange` when not hovered, and `darkorange` on hover (`:hover`).
1212

13-
4. Find and apply the color: Use the color picker to find the color and apply make the background to that color.
13+
4. Remove underline: set `text-decoration` to `none`.
1414

15-
5. Remove underline: Set `text-decoration` to `none`.
15+
5. Set the color of the text to `white`.
1616

17-
6. Set the color of the text to `white`.
17+
+ *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*
1818

19-
*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*
20-
21-
7. Inside of the `:hover` selector change the background of the button to `#cc7a00`.
19+
6. Inside of the `:hover` selector change the background of the button to `darkorange`.
2220

2321
## Expected result:
2422

25-
![Example Image](../../.learn/assets/13-1.gif?raw=true)
23+
![Example Image](../../.learn/assets/13-1.gif?raw=true)

‎exercises/13-Anchor-Like-Button/solution-hide.css‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎exercises/13-Anchor-Like-Button/solution.hide.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.orange-btn {
2-
/*your code here*/
2+
display: inline-block;
3+
/* your code below */
34
padding: 10px;
45
border-radius: 4px;
56
text-decoration: none;
@@ -8,6 +9,6 @@
89
}
910

1011
.orange-btn:hover {
11-
/*YOUR CODE HERE FOR THE HOVER STATE*/
12+
/* YOUR CODE HERE FOR THE HOVER STATE */
1213
background: darkorange;
1314
}

‎exercises/13-Anchor-Like-Button/styles.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
.orange-btn {
2-
/*your code here*/
2+
display: inline-block;
3+
/* your code below */
34

45
}
56

67
.orange-btn:hover {
7-
/*YOUR CODE HERE FOR THE HOVER STATE*/
8+
/* YOUR CODE HERE FOR THE HOVER STATE */
89

9-
}
10+
}

‎exercises/13-Anchor-Like-Button/tests.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ describe("All the styles should be applied", ()=>{
1010
const meta = document.querySelector("meta")
1111
const title = document.querySelector('title')
1212
const link = document.querySelector('link')
13-
test("the padding should be '10px'", ()=>{
13+
test("The padding should be '10px'", ()=>{
1414
document.querySelector(
1515
"head"
1616

@@ -20,7 +20,7 @@ describe("All the styles should be applied", ()=>{
2020

2121
expect(classTagStyles["padding"]).toBe("10px");
2222
});
23-
test("the border radius should be '4px'", ()=>{
23+
test("The border-radius should be '4px'", ()=>{
2424
document.querySelector(
2525
"head"
2626

@@ -29,7 +29,7 @@ describe("All the styles should be applied", ()=>{
2929
let classTagStyles = window.getComputedStyle(divTag);
3030
expect(classTagStyles["border-radius"]).toBe("4px");
3131
});
32-
test("the underline should be removed", ()=>{
32+
test("The underline should be removed", ()=>{
3333
document.querySelector(
3434
"head"
3535

@@ -47,7 +47,7 @@ describe("All the styles should be applied", ()=>{
4747
expect(cssArray).toBe(".orange-btn");
4848
}
4949
)
50-
test("You should not change the existing head tag elements", ()=>{
50+
test("You should not change the existing <head> tag elements", ()=>{
5151
let head = document.querySelector('head')
5252
expect(head).toBeTruthy()
5353

0 commit comments

Comments
 (0)