Skip to content

fixed text, link, styles exercises 12 and 13 #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Apr 12, 2023
Merged
10 changes: 6 additions & 4 deletions exercises/12-Relative-Length-EM-REM/README.es.md
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -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:

Expand Down
10 changes: 6 additions & 4 deletions exercises/12-Relative-Length-EM-REM/README.md
Original file line number Diff line number Diff line change
@@ -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:
Expand Down
6 changes: 3 additions & 3 deletions exercises/12-Relative-Length-EM-REM/tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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()

Expand Down
20 changes: 9 additions & 11 deletions exercises/13-Anchor-Like-Button/README.es.md
Original file line number Diff line number Diff line change
@@ -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)
18 changes: 8 additions & 10 deletions exercises/13-Anchor-Like-Button/README.md
Original file line number Diff line number Diff line change
@@ -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)
14 changes: 0 additions & 14 deletions exercises/13-Anchor-Like-Button/solution-hide.css

This file was deleted.

5 changes: 3 additions & 2 deletions exercises/13-Anchor-Like-Button/solution.hide.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.orange-btn {
/*your code here*/
display: inline-block;
/* your code below */
padding: 10px;
border-radius: 4px;
text-decoration: none;
Expand All @@ -8,6 +9,6 @@
}

.orange-btn:hover {
/*YOUR CODE HERE FOR THE HOVER STATE*/
/* YOUR CODE HERE FOR THE HOVER STATE */
background: darkorange;
}
7 changes: 4 additions & 3 deletions exercises/13-Anchor-Like-Button/styles.css
Original file line number Diff line number Diff line change
@@ -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 */

}
}
8 changes: 4 additions & 4 deletions exercises/13-Anchor-Like-Button/tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand All @@ -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"

Expand All @@ -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"

Expand All @@ -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()

Expand Down