9 | Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology
10 | around them. Having children learn to code at a young age prepares them for the future. Coding helps children with communication, creativity,
11 | math, writing, and confidence.
12 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/exercises/07-practicing-rules/solution.hide.css:
--------------------------------------------------------------------------------
1 | /* add your styles here */
2 | body {
3 | background: url("../../.learn/assets/background-vertical.jpg?raw=true") repeat-y;
4 | font-family: "Times New Roman";
5 | padding-left: 20px;
6 | }
7 |
8 | #id1 {
9 | background: rgba(255, 255, 255, 0.2);
10 | padding: 5px;
11 | }
12 |
13 | h1 {
14 | font-family: "Courier";
15 | color: red;
16 | }
17 |
18 | h2 {
19 | text-decoration: underline;
20 | }
21 |
22 | a:hover {
23 | color: green;
24 | text-decoration: none;
25 | }
26 |
--------------------------------------------------------------------------------
/exercises/07-practicing-rules/styles.css:
--------------------------------------------------------------------------------
1 | /* add your styles here */
2 |
--------------------------------------------------------------------------------
/exercises/07-practicing-rules/tests.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4 | const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
5 | document.documentElement.innerHTML = html.toString();
6 |
7 | jest.dontMock('fs');
8 |
9 | describe("All the styles should be applied", () => {
10 | let meta = document.querySelector("meta")
11 | let link = document.querySelector("link")
12 | let title = document.querySelector('title')
13 |
14 | test("The background should match", () => {
15 | document.querySelector(
16 | "head"
17 | ).innerHTML = ``;
18 | let body = document.querySelector("body");
19 | let styles = window.getComputedStyle(body);
20 | expect(styles["background"]).toBe(
21 | `url(../../.learn/assets/background-vertical.jpg?raw=true) repeat-y`
22 | );
23 | });
24 | test("The font-family should be 'Times New Roman'", () => {
25 | document.querySelector(
26 | "head"
27 | ).innerHTML = ``;
28 | let body = document.querySelector("body");
29 | let styles = window.getComputedStyle(body);
30 | expect(styles["font-family"].toLowerCase()).toBe("\"times new roman\"");
31 | });
32 | test("The padding-left should be '20px'", () => {
33 | document.querySelector(
34 | "head"
35 | ).innerHTML = ``;
36 | let body = document.querySelector("body");
37 | let styles = window.getComputedStyle(body);
38 | expect(styles["padding-left"]).toBe("20px");
39 | });
40 | test("The font-family in the
tag should be 'Courier'", () => {
41 | document.querySelector(
42 | "head"
43 | ).innerHTML = ``;
44 | let h1Tag = document.querySelector("h1");
45 | let h1TagStyles = window.getComputedStyle(h1Tag);
46 | // get computed styles of any element you like
47 | expect(h1TagStyles["font-family"].toLowerCase()).toBe("\"courier\"");
48 | });
49 | test("The color in the
tag should be 'red'", () => {
50 | document.querySelector(
51 | "head"
52 | ).innerHTML = ``;
53 | let h1Tag = document.querySelector("h1");
54 | let h1TagStyles = window.getComputedStyle(h1Tag);
55 | // get computed styles of any element you like
56 | expect(h1TagStyles["color"]).toBe("red");
57 | });
58 | test("The text-decoration in the
tag should be 'underline'", () => {
59 | document.querySelector(
60 | "head"
61 | ).innerHTML = ``;
62 | // get computed styles of any element you like
63 | const h2Tag = document.querySelector("h2");
64 | let h2TagStyles = window.getComputedStyle(h2Tag);
65 | expect(h2TagStyles["text-decoration"]).toBe("underline");
66 | });
67 | test("The padding in the p tag should be '5px'", () => {
68 | document.querySelector(
69 | "head"
70 | ).innerHTML = ``;
71 | // get computed styles of any element you like
72 | const idTag = document.querySelector("#id1");
73 | let idTagStyles = window.getComputedStyle(idTag);
74 | expect(idTagStyles["padding"]).toBe("5px");
75 | });
76 |
77 | test("The a:hover underline should be removed", () => {
78 | document.querySelector(
79 | "head"
80 | ).innerHTML = ``;
81 | let cssArray = document.styleSheets[0].cssRules;
82 | let orangeHoverSelector = "";
83 | for (let i = 0; i < cssArray.length; i++) {
84 | if (cssArray[i].selectorText === "a:hover") {
85 | orangeHoverSelector = cssArray[i].style['text-decoration'];
86 | }
87 | }
88 | expect(orangeHoverSelector).toBe("none");
89 | });
90 |
91 | test("The a:hover color should be green", () => {
92 | document.querySelector(
93 | "head"
94 | ).innerHTML = ``;
95 | let cssArray = document.styleSheets[0].cssRules;
96 | let orangeHoverSelector = "";
97 |
98 | for (let i = 0; i < cssArray.length; i++) {
99 | if (cssArray[i].selectorText === "a:hover") {
100 | orangeHoverSelector = cssArray[i].style.color;
101 | }
102 | }
103 | expect(orangeHoverSelector).toBe('green');
104 | });
105 | test("You should not change the existing tag elements", () => {
106 | let head = document.querySelector('head')
107 | expect(head).toBeTruthy()
108 |
109 | expect(meta).toBeTruthy()
110 |
111 | let pathname = link.getAttribute("href")
112 | expect(pathname).toBe('./styles.css')
113 |
114 | expect(title).toBeTruthy()
115 | })
116 |
117 | });
118 |
--------------------------------------------------------------------------------
/exercises/08-very-specific-rules/README.es.md:
--------------------------------------------------------------------------------
1 | # `08` Very Specific Rules
2 |
3 | ## 🔎 Importante:
4 |
5 | En este ejercicio, puedes agregar tu código solo arriba del **READ-ONLY BLOCK** del código, puedes agregar tantas líneas como desees, pero siempre arriba.
6 |
7 | ## 📝 Instrucciones:
8 |
9 | 1. Establece el color de texto `ul li` a rojo (`red`) (anula los conflictos siendo más específico).
10 |
11 | 2. Establece el color de fondo (`background-color`) del segundo `li` del `ol` a verde (`green`) (no uses el selector #id ni el .class).
12 |
13 | 3. Haz que las filas impares de la tabla tengan fondo amarillo usando `tr:nth-child`.
14 |
15 | 
16 |
17 | > Importante: **NO** debes modificar el archivo `index.html`.
18 |
19 | ## 💡 Pista:
20 |
21 | - El atributo `!important` ayuda a sobreescribir estilos.
22 |
--------------------------------------------------------------------------------
/exercises/08-very-specific-rules/README.md:
--------------------------------------------------------------------------------
1 | ---
2 | tutorial: "https://www.youtube.com/watch?v=2YkLDRZFk40"
3 | ---
4 |
5 | # `08` Very Specific Rules
6 |
7 | ## 🔎 Important:
8 |
9 | In this exercise, you can add your code only above the **READ-ONLY BLOCK** of the code, you can add as many lines as you want, but always above.
10 |
11 | ## 📝 Instructions:
12 |
13 | 1. Set the `ul li` text color to `red` (override conflicts with specificity).
14 |
15 | 2. Set the `background-color` of the second `li` of the `ol` to `green` (don't use the #id selector or .class selector).
16 |
17 | 3. Change the odd rows of the tables to a yellow background using `tr:nth-child`.
18 |
19 | 
20 |
21 | > Important: You should **NOT** modify the `index.html` file.
22 |
23 | ## 💡 Hint:
24 |
25 | - The `!important` attribute helps to override other attributes.
26 |
--------------------------------------------------------------------------------
/exercises/08-very-specific-rules/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 08 Very Specific Rules
8 |
9 |
10 |
The learning essay
11 |
3 reasons you know you are learning
12 |
13 | We are going to explain in this paragraph the 3 most common signs that you should look into yourself to recognize if you are learning.
14 |
15 |
16 |
You are able to complete the exercises by yourself.
17 |
You understand what the teacher is talking about
18 |
You are able to have conversations about the topic
19 |
20 |
3 reasons you know love what you are learning
21 |
22 |
Time passes fast.
23 |
You are anxious to finish this exercise and start the next one.
24 |
It's 12am and you don't want to go to sleep.
25 |
26 |
27 | If you can't sleep, what better than watching videos of cats?
28 | click here
29 |
30 |
31 |
32 |
33 |
Age
34 |
Gender
35 |
36 |
37 |
12
38 |
Male
39 |
40 |
41 |
22
42 |
Female
43 |
44 |
45 |
11
46 |
Male
47 |
48 |
49 |
21
50 |
Male
51 |
52 |
53 |
22
54 |
Female
55 |
56 |
57 |
10
58 |
Male
59 |
60 |
61 |
13
62 |
Female
63 |
64 |
65 |
13
66 |
Male
67 |
68 |
69 |
10
70 |
Male
71 |
72 |
73 |
11
74 |
Male
75 |
76 |
77 |
11
78 |
Male
79 |
80 |
81 |
82 |
83 |
--------------------------------------------------------------------------------
/exercises/08-very-specific-rules/solution.hide.css:
--------------------------------------------------------------------------------
1 | /** Insert your code here **/
2 |
3 | ul li {
4 | color: red !important;
5 | }
6 |
7 | ol li:nth-child(2) {
8 | background-color: green;
9 | }
10 |
11 | tr:nth-child(odd) {
12 | background: yellow;
13 | }
14 |
15 | /*********** READ-ONLY BLOCK ******
16 | You CANNOT UPDATE anything from here on,
17 | only add lines of code on top of these lines
18 | **/
19 |
20 | body {
21 | color: blue;
22 | }
23 |
24 | ul li,
25 | ol li {
26 | color: green;
27 | }
28 |
--------------------------------------------------------------------------------
/exercises/08-very-specific-rules/styles.css:
--------------------------------------------------------------------------------
1 | /** Insert your code here **/
2 |
3 | /********** READ-ONLY BLOCK ******
4 | You CANNOT UPDATE anything from here on,
5 | only add lines of code on top of these lines
6 | **/
7 |
8 | body {
9 | color: blue;
10 | }
11 |
12 | ul li,
13 | ol li {
14 | color: green;
15 | }
16 |
--------------------------------------------------------------------------------
/exercises/08-very-specific-rules/tests.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4 | const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
5 | document.documentElement.innerHTML = html.toString();
6 |
7 | jest.dontMock('fs');
8 |
9 | describe("All the styles should be applied", ()=>{
10 | const meta = document.querySelector("meta")
11 | const title = document.querySelector('title')
12 | const link = document.querySelector('link')
13 |
14 | test("The ul li color has to be red using !important", ()=>{
15 | document.querySelector(
16 | "head"
17 | ).innerHTML = ``;
18 |
19 | let cssArray = document.styleSheets[0].cssRules;
20 | let color = ""
21 |
22 | for (let i = 0; i < cssArray.length; i++) {
23 | if (cssArray[i].selectorText === "ul li" || cssArray[i].selectorText === "ul > li") {
24 | color = cssArray[i].cssText;
25 | }
26 | }
27 | let reg = new RegExp(/color:\s*red\s*!important\s*;/gm)
28 |
29 | expect(reg.test(color.toLowerCase())).toBeTruthy();
30 | });
31 |
32 | test("The ol second element background should be green", ()=>{
33 | document.querySelector(
34 | "head"
35 | ).innerHTML = ``;
36 | let cssArray = document.styleSheets[0].cssRules;
37 |
38 | let background = "";
39 | let backgroundColor="";
40 | for (let i = 0; i < cssArray.length; i++) {
41 | if (cssArray[i].selectorText === "ol li:nth-child(2)" || cssArray[i].selectorText === "ol > li:nth-child(2)") {
42 | background = cssArray[i].style['background'];
43 | backgroundColor = cssArray[i].style['background-color'];
44 |
45 | }
46 |
47 | if(background){
48 | background = background.toLowerCase()
49 | }
50 |
51 | if(backgroundColor){
52 | backgroundColor = backgroundColor.toLowerCase()
53 | }
54 |
55 | } expect((background && background === 'green') || (backgroundColor && backgroundColor === 'green')).toBeTruthy();
56 | })
57 |
58 | test("The odd rows of the table should have yellow background", ()=>{
59 | document.querySelector(
60 | "head"
61 | ).innerHTML = ``;
62 | let cssArray = document.styleSheets[0].cssRules;
63 |
64 | let background = "";
65 | let backgroundColor = "";
66 | for (let i = 0; i < cssArray.length; i++) {
67 | if (cssArray[i].selectorText.includes( "tr:nth-child(odd)")) {
68 | background = cssArray[i].style['background'];
69 | backgroundColor = cssArray[i].style['background-color'];
70 |
71 | }
72 |
73 | } expect((background && background.toLowerCase() === "yellow") || (backgroundColor && backgroundColor.toLowerCase() === "yellow")).toBeTruthy();
74 | })
75 |
76 | test("Write all your rules above the existing code", ()=>{
77 | document.querySelector(
78 | "head"
79 | ).innerHTML = ``;
80 | let cssBody = document.styleSheets[0].cssRules[3].selectorText;
81 | let cssArray = document.styleSheets[0].cssRules[4].selectorText;
82 | expect(cssArray).toBe("ul li,\nol li");
83 | expect(cssBody).toBe("body");
84 | })
85 |
86 | test("You should not change the existing head tag elements", ()=>{
87 | let head = document.querySelector('head')
88 | expect(head).toBeTruthy()
89 |
90 | expect(meta).toBeTruthy()
91 |
92 | let href = link.getAttribute('href')
93 | expect(href).toBe('./styles.css')
94 |
95 | expect(title).toBeTruthy()
96 | })
97 |
98 | });
99 |
--------------------------------------------------------------------------------
/exercises/09-rounded-image/README.es.md:
--------------------------------------------------------------------------------
1 | # `09` Rounded Image
2 |
3 | Muchos sitios web usan imágenes de perfil redondeadas, ¡una técnica que realmente hace que un sitio web sea más hermoso!
4 |
5 | La forma obvia de crear una imagen de perfil redondeada es crear una etiqueta de imagen y aplicar un `border-radius: 100%`.
6 |
7 | El problema con este enfoque es que solo funciona para imágenes cuadradas... Las imágenes de perfil generalmente tienen diferente altura y ancho, no se verán como un círculo, se verán como óvalos:
8 |
9 | 
10 |
11 | ## 📝 Instrucciones:
12 |
13 | 1. Usa `border-radius`.
14 |
15 | 2. Usa las propiedades `width` y `height` para hacer que la imagen sea cuadrada.
16 |
17 | 3. Además de `border-radius`, tenemos que utilizar también la propiedad `object-fit`, [aquí hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721).
18 |
19 | ## 💡 Pistas:
20 |
21 | + Si la imagen es más grande que su contenedor y quieres centrarla o enfocarte en una zona en particular, puedes utilizar `object-position`.
22 |
23 | + En este artículo puedes leer más [sobre la propiedad `object-fit`](https://css-tricks.com/on-object-fit-and-object-position/).
24 |
25 | + Adicionalmente, puedes [leer la documentación de `object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) y [la documentación de `object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
26 |
--------------------------------------------------------------------------------
/exercises/09-rounded-image/README.md:
--------------------------------------------------------------------------------
1 | # `09` Rounded Image
2 |
3 | A lot of websites use rounded profile images, a technique that really makes a website more beautiful!
4 |
5 | The obvious way to create a rounded profile picture is to create an image tag and apply `border-radius:100%`.
6 |
7 | The problem with this approach is that it only works for squared pictures... Profile pictures with different height and width will not look like a circle, they will look like ovals:
8 |
9 | 
10 |
11 | ## 📝 Instructions:
12 |
13 | 1. Use `border-radius`.
14 |
15 | 2. Use the properties `width` and `height` to make the image a square shape.
16 |
17 | 3. In this case, in addition to `border-radius`, you will have to use the `object-fit` CSS property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721).
18 |
19 |
20 | ## 💡 Hints:
21 |
22 | + If the image ends up being bigger than its container (or with different proportions) you can adjust the `object-position` to choose what part of the image you want to display inside of the circle.
23 |
24 | + You can also read [this great article about `object-fit`](https://css-tricks.com/on-object-fit-and-object-position/).
25 |
26 | + Additionally you can [read the documentation on `object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) and [the documentation on `object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
27 |
--------------------------------------------------------------------------------
/exercises/09-rounded-image/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 09 Rounded Image
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/exercises/09-rounded-image/solution.hide.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #bdbdbd;
3 | }
4 | .rounded {
5 | object-fit: cover;
6 | object-position: top;
7 | width: 250px;
8 | height: 250px;
9 | border-radius: 100%;
10 | }
11 |
--------------------------------------------------------------------------------
/exercises/09-rounded-image/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #bdbdbd;
3 | }
4 | .rounded {
5 | border-radius: 100%;
6 | }
7 |
--------------------------------------------------------------------------------
/exercises/09-rounded-image/tests.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4 | const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
5 | document.documentElement.innerHTML = html.toString();
6 |
7 | jest.dontMock('fs');
8 |
9 | describe("All the styles should be applied", () => {
10 | const meta = document.querySelector("meta")
11 | const title = document.querySelector('title')
12 | const link = document.querySelector('link')
13 |
14 | const img = document.querySelector(".rounded")
15 |
16 | test("The tag should exist", () => {
17 | expect(img).toBeTruthy();
18 | })
19 |
20 | test("The width of the tag should be equal to its height and vice versa", () => {
21 | document.querySelector(
22 | "head"
23 | ).innerHTML = ``;
24 |
25 | let cssArray = document.styleSheets[0].cssRules;
26 |
27 | let width = "";
28 | let height = "";
29 |
30 | for (let i = 0; i < cssArray.length; i++) {
31 | if (cssArray[i].selectorText === ".rounded") {
32 | width = cssArray[i].style["width"];
33 | height = cssArray[i].style["height"];
34 | }
35 | }
36 |
37 | // checks if styles return empty string "" or undefined
38 | expect(width).toBeTruthy();
39 | expect(height).toBeTruthy();
40 |
41 | expect(width).toBe(height);
42 | expect(height).toBe(width);
43 | });
44 |
45 | test("The object-fit value of the tag should be 'cover'", () => {
46 | document.querySelector(
47 | "head"
48 | ).innerHTML = ``;
49 |
50 | let imgStyle = window.getComputedStyle(img);
51 | expect(imgStyle["object-fit"]).toBe("cover");
52 | });
53 |
54 | test("The object-position value of the tag should be 'top'", () => {
55 | document.querySelector(
56 | "head"
57 | ).innerHTML = ``;
58 |
59 | let imgStyle = window.getComputedStyle(img);
60 | expect(imgStyle["object-position"]).toBe("top");
61 | });
62 |
63 | test("You should not change the existing tag elements", () => {
64 | let head = document.querySelector('head')
65 | expect(head).toBeTruthy()
66 |
67 | expect(meta).toBeTruthy()
68 |
69 | let href = link.getAttribute('href')
70 | expect(href).toBe('./styles.css')
71 |
72 | expect(title).toBeTruthy()
73 | })
74 | });
75 |
--------------------------------------------------------------------------------
/exercises/10-anchor-styles/README.es.md:
--------------------------------------------------------------------------------
1 | # `10` 3D Anchor Styles
2 |
3 | A las personas les gusta sentir que están haciendo clic en algo, una manera de lograrlo es fingir un efecto 3D. Para hacerlo, los diseñadores normalmente juegan con los bordes, por ejemplo:
4 |
5 | 
6 |
7 | Puedes controlar qué reglas CSS se aplican a cada estado de un `anchor` utilizando los selectores: `:hover` (cuando pasas por encima con el mouse) o `active` (cuando haces clic), por ejemplo:
8 |
9 | ```css
10 | a:active {
11 | /* aquí puedes especificar cualquier regla de CSS que aplique al anchor mientras se 'presiona' */
12 | }
13 | ```
14 |
15 | ## 📝 Instrucciones:
16 |
17 | 1. Cambia los colores del borde del anchor, cuando le das clic, a lo siguiente:
18 |
19 | ```css
20 | border-color: #000 #aaa #aaa #000;
21 | ```
22 |
--------------------------------------------------------------------------------
/exercises/10-anchor-styles/README.md:
--------------------------------------------------------------------------------
1 | # `10` 3D Anchor Styles
2 |
3 | People like to feel that they are clicking on something, a great approach to accomplish that is by faking a 3D effect. To do so, designers normally play with the borders, for example:
4 |
5 | 
6 |
7 | You can control what CSS rules apply to each state of an anchor by using the `:hover` (for mouse hover) or `:active` (for mouse pressing) selectors, example:
8 |
9 | ```css
10 | a:active {
11 | /* here you can specify whatever CSS rule that applies
12 | to the anchor while being 'pressed' */
13 | }
14 | ```
15 |
16 | ## 📝 Instructions:
17 |
18 | 1. Change the border colors of the anchor, when being pressed, to the following:
19 |
20 | ```css
21 | border-color: #000 #aaa #aaa #000;
22 | ```
23 |
--------------------------------------------------------------------------------
/exercises/10-anchor-styles/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | 10 Anchor Styles
8 |
9 |
10 |
11 | Click me
12 |
13 |
14 |
--------------------------------------------------------------------------------
/exercises/10-anchor-styles/solution.hide.css:
--------------------------------------------------------------------------------
1 | .threeDimension {
2 | display: block;
3 | border: 1px solid;
4 | border-color: #aaa #000 #000 #aaa;
5 | width: 8em;
6 | background: #fc0;
7 | text-decoration: none;
8 | text-align: center;
9 | color: black;
10 | font-size: 22px;
11 | }
12 |
13 | a.threeDimension:active {
14 | /* your code here*/
15 | border-color: #000 #aaa #aaa #000;
16 | }
17 |
--------------------------------------------------------------------------------
/exercises/10-anchor-styles/styles.css:
--------------------------------------------------------------------------------
1 |
2 | .threeDimension {
3 | display: block;
4 | border: 1px solid;
5 | border-color: #aaa #000 #000 #aaa;
6 | width: 8em;
7 | background: #fc0;
8 | text-decoration: none;
9 | text-align: center;
10 | color: black;
11 | font-size: 22px;
12 | }
13 |
14 | a.threeDimension:active {
15 | /* your code here*/
16 |
17 | }
18 |
--------------------------------------------------------------------------------
/exercises/10-anchor-styles/tests.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4 | const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
5 | document.documentElement.innerHTML = html.toString();
6 |
7 | jest.dontMock('fs');
8 |
9 | let cssArray = null;
10 |
11 | describe("All the styles should be applied", () => {
12 | const meta = document.querySelector("meta")
13 | const title = document.querySelector('title')
14 | const link = document.querySelector('link')
15 | test("You should not add your rules above the existing code", () => {
16 | document.querySelector(
17 | "head"
18 | ).innerHTML = ``;
19 | let cssArray = document.styleSheets[0].cssRules[0].selectorText;
20 | expect(cssArray).toBe(".threeDimension");
21 | })
22 |
23 | test("The tag in the index.html should not be deleted", () => {
24 | // we can read from the source code
25 | // console.log(html.toString());
26 | expect(html.toString().indexOf(` -1).toBeTruthy();
27 | });
28 |
29 |
30 | test("The border-color rule for the 'a.threeDimension:active' selector should match the instruction color", () => {
31 | // get computed styles of any element you like
32 | // let cssArray=document.styleSheets[0].cssRules;
33 | document.querySelector(
34 | "head"
35 | ).innerHTML = ``;
36 | let cssArray = document.styleSheets[0].cssRules;
37 |
38 | let orangeHoverSelector = "";
39 | for (let i = 0; i < cssArray.length; i++) {
40 | if (cssArray[i].selectorText === "a.threeDimension:active") {
41 | orangeHoverSelector = cssArray[i].style['border-color'];
42 | }
43 | }
44 | expect(orangeHoverSelector).toBe("#000 #aaa #aaa #000");
45 |
46 | });
47 | test("You should not change the default styles", () => {
48 | // get computed styles of any element you like
49 | // let cssArray=document.styleSheets[0].cssRules;
50 | document.querySelector(
51 | "head"
52 | ).innerHTML = ``;
53 | let cssArray = document.styleSheets[0].cssRules;
54 |
55 | let borderColor = "";
56 | let color = "";
57 | let background = "";
58 | let width = "";
59 | for (let i = 0; i < cssArray.length; i++) {
60 | if (cssArray[i].selectorText === ".threeDimension") {
61 | borderColor = cssArray[i].style["border-color"];
62 | color = cssArray[i].style['color'];
63 | background = cssArray[i].style['background'];
64 | width = cssArray[i].style['width'];
65 | expect(borderColor).toBe("#aaa #000 #000 #aaa");
66 | expect(color).toBe("black");
67 | expect(background).toBe("#fc0");
68 | expect(width).toBe("8em");
69 | }
70 | }
71 |
72 | });
73 |
74 | test("You should not change the existing tag elements", () => {
75 | let head = document.querySelector('head')
76 | expect(head).toBeTruthy()
77 |
78 | expect(meta).toBeTruthy()
79 |
80 | let href = link.getAttribute('href')
81 | expect(href).toBe('./styles.css')
82 |
83 | expect(title).toBeTruthy()
84 | })
85 | });
86 |
87 |
88 |
--------------------------------------------------------------------------------
/exercises/11-your-own-font/README.es.md:
--------------------------------------------------------------------------------
1 | # `11` Your Own Font
2 |
3 | Aquí puedes encontrar las fuentes de Google: https://fonts.google.com
4 |
5 | Elige la que más te guste, y úsala vinculando tu sitio web con la URL en la que se almacena la fuente. Tienes que hacer eso en la etiqueta `` del documento HTML de esta manera:
6 |
7 | ```html
8 |
9 | ```
10 |
11 | Después de vincular tu fuente, debes asignar la regla CSS `font-family` a lo que quieras aplicarle la fuente, por ejemplo, un `
8 | 
9 | 
10 | 
11 | 
12 |
13 |
14 |
--------------------------------------------------------------------------------
/exercises/09-rounded-image/solution.hide.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #bdbdbd;
3 | }
4 | .rounded {
5 | object-fit: cover;
6 | object-position: top;
7 | width: 250px;
8 | height: 250px;
9 | border-radius: 100%;
10 | }
11 |
--------------------------------------------------------------------------------
/exercises/09-rounded-image/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background: #bdbdbd;
3 | }
4 | .rounded {
5 | border-radius: 100%;
6 | }
7 |
--------------------------------------------------------------------------------
/exercises/09-rounded-image/tests.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8');
4 | const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8");
5 | document.documentElement.innerHTML = html.toString();
6 |
7 | jest.dontMock('fs');
8 |
9 | describe("All the styles should be applied", () => {
10 | const meta = document.querySelector("meta")
11 | const title = document.querySelector('title')
12 | const link = document.querySelector('link')
13 |
14 | const img = document.querySelector(".rounded")
15 |
16 | test("The