Skip to content

Commit a44ecf5

Browse files
alesanchezralesanchezr
authored
Merge branch 'master' into master
2 parents 685c9a6 + bf98efb commit a44ecf5

File tree

28 files changed

+148
-155
lines changed

28 files changed

+148
-155
lines changed

‎.github/workflows/learnpack-audit.yml

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
2+
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3+
4+
name: Learnpack audit
5+
6+
on:
7+
push:
8+
branches: [ master ]
9+
pull_request:
10+
branches: [ master ]
11+
12+
jobs:
13+
build:
14+
15+
runs-on: ubuntu-latest
16+
17+
strategy:
18+
matrix:
19+
node-version: [14.x]
20+
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
21+
22+
steps:
23+
- uses: actions/checkout@v2
24+
- name: Use Node.js ${{ matrix.node-version }}
25+
uses: actions/setup-node@v2
26+
with:
27+
node-version: ${{ matrix.node-version }}
28+
- run: npm install learnpack -g
29+
- run: learnpack audit

‎.gitpod.Dockerfile

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ FROM gitpod/workspace-full:latest
44
USER gitpod
55

66
RUN npm i jest@24.8.0 -g
7-
RUN npm i learnpack@0.1.14 -g && learnpack plugins:install learnpack-html@0.0.20
7+
RUN npm i learnpack@0.1.17 -g && learnpack plugins:install learnpack-html@0.0.20

‎exercises/01.1-The-Style-Tag/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,4 @@ Add a `<style>` tag into your website and using CSS select all `<p>` tags to tur
2020

2121
It should look like this:
2222

23-
![01 Hello World Exercise Preview](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/01.1-1.png?raw=true)
23+
![01 Hello World Exercise Preview](../../.learn/assets/01.1-1.png?raw=true)

‎exercises/01.2-Your-First-Style/tests.js

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,8 @@ describe("All the styles should be applied", function() {
2626
// console.log(bodyInlineStyle[0].style._values.background);
2727
});
2828
it("You should not change the existing head tag elements", function () {
29-
30-
let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta c")
31-
let meta2 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta n")
32-
33-
expect(meta1).not.toBe(-1)
34-
expect(meta2).not.toBe(-1)
35-
36-
29+
let meta = document.querySelector('head').querySelector("meta")
30+
31+
expect(meta).toBe(null)
3732
})
3833
});

‎exercises/01.3-Your-Second-Style/tests.js

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,8 @@ describe("All the styles should be applied", function() {
2626
// console.log(bodyInlineStyle[0].style._values.background);
2727
});
2828
it("You should not change the existing head tag elements", function () {
29-
30-
let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta c")
31-
let meta2 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta n")
32-
33-
expect(meta1).not.toBe(-1)
34-
expect(meta2).not.toBe(-1)
35-
36-
29+
let meta = document.querySelector('head').querySelector("meta")
30+
31+
expect(meta).toBe(null)
3732
})
3833
});

‎exercises/02-Separate-Stylesheet/tests.js

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,11 @@ describe("All the styles should be applied", function () {
5151
let styles=window.getComputedStyle(body);
5252
expect(styles["background-repeat"]).toBe("inherit");
5353
});
54-
it("You should not change the head tag", function () {
55-
56-
let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta c")
57-
let meta2 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta n")
58-
let link = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<link")
59-
let title = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<title")
60-
expect(meta1).not.toBe(-1)
61-
expect(meta2).not.toBe(-1)
62-
expect(link).not.toBe(-1)
63-
expect(title).not.toBe(-1)
64-
expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
54+
it("You should not change the existing head tag elements", function () {
55+
let meta = document.querySelector('head').querySelector("meta")
56+
let link = document.querySelector('link').href
57+
58+
expect(meta).toBe(null)
59+
expect(link).toBe('http://localhost/styles.css')
6560
})
6661
});

‎exercises/02.1-Background/tests.js

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,14 @@ describe("All the styles should be applied", function () {
5151
let styles=window.getComputedStyle(body);
5252
expect(styles["background-repeat"]).toBe("inherit");
5353
});
54-
it("You should not change the head tag", function () {
55-
56-
let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta c")
57-
let meta2 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta n")
58-
let link = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<link")
59-
let title = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<title")
60-
expect(meta1).not.toBe(-1)
61-
expect(meta2).not.toBe(-1)
62-
expect(link).not.toBe(-1)
63-
expect(title).not.toBe(-1)
64-
expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
54+
it("You should not change the existing head tag elements", function () {
55+
let head = document.querySelector('head');
56+
let meta = head.querySelector("meta")
57+
let link = head.querySelector('link').href
58+
let title = head.querySelector('title').innerHTML
59+
60+
expect(meta).toBe(null)
61+
expect(link).toBe('http://localhost/styles.css')
62+
expect(title).toBe('02 Background')
6563
})
6664
});

‎exercises/03-Inline-Styles/tests.js

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
12
const fs = require("fs");
23
const path = require("path");
34
const html = fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
45

6+
57
jest.dontMock("fs");
68

79
describe("The Table tag should contain inline style background: green", function() {
@@ -13,10 +15,14 @@ describe("The Table tag should contain inline style background: green", function
1315
jest.resetModules();
1416
});
1517

16-
it("You should not change the head tag", function () {
17-
let title = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<title")
18-
expect(title).not.toBe(-1)
19-
expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
18+
it("You should not change the existing head tag elements", function () {
19+
let head = document.querySelector('head');
20+
let meta = head.querySelector("meta")
21+
let title = head.querySelector('title').innerHTML
22+
23+
expect(meta).toBe(null)
24+
expect(title).toBe('03 Inline Styles')
25+
2026
})
2127

2228
it("The background should be green", function() {

‎exercises/04.1-Combined-Rules/tests.js

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ describe("All the styles should be applied", function () {
127127
expect(backImg).toBeFalsy();
128128
expect(backPos).toBeFalsy();
129129
expect(backRepeat).toBeFalsy();
130-
expect(orangeHoverSelector).toContain('#bdbdbd');
130+
expect(orangeHoverSelector).toContain('rgb(189, 189, 189)');
131131
expect(orangeHoverSelector).toContain('no-repeat');
132132
expect(orangeHoverSelector).toContain('100px');
133133
expect(orangeHoverSelector).toContain('url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true)');
@@ -160,16 +160,14 @@ describe("All the styles should be applied", function () {
160160
expect(padBottom).toBeFalsy();
161161
expect(padLeft).toBeFalsy();
162162
});
163-
it("You should not change the head tag", function () {
164-
165-
let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta c")
166-
let meta2 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta n")
167-
let link = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<link")
168-
let title = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<title")
169-
expect(meta1).not.toBe(-1)
170-
expect(meta2).not.toBe(-1)
171-
expect(link).not.toBe(-1)
172-
expect(title).not.toBe(-1)
173-
expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
163+
it("You should not change the existing head tag elements", function () {
164+
let head = document.querySelector('head');
165+
let meta = head.querySelector("meta")
166+
let link = head.querySelector('link').href
167+
let title = head.querySelector('title')
168+
169+
expect(meta).toBe(null)
170+
expect(link).toBe('http://localhost/styles.css')
171+
expect(title).not.toBe(null)
174172
})
175173
});

‎exercises/05-Specificity/tests.js

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,22 +16,15 @@ describe("All the styles should be applied", function () {
1616
});
1717

1818

19-
it("You should not change the head tag", function () {
20-
21-
let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta c")
22-
let meta2 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta n")
23-
let link = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<link")
24-
let title = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<title")
25-
expect(meta1).not.toBe(-1)
26-
expect(meta2).not.toBe(-1)
27-
expect(link).not.toBe(-1)
28-
expect(title).not.toBe(-1)
29-
expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
30-
31-
32-
33-
34-
19+
it("You should not change the existing head tag elements", function () {
20+
let head = document.querySelector('head');
21+
let meta = head.querySelector("meta")
22+
let link = head.querySelector('link').href
23+
let title = head.querySelector('title')
24+
25+
expect(meta).not.toBe(null)
26+
expect(link).toBe('http://localhost/styles.css')
27+
expect(title).not.toBe(null)
3528
})
3629
it("You should not delete or edit the existing code", function () {
3730

‎exercises/06-Practicing-Rules/README.es.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55

66
1. Establece esta URL como la imagen de fondo de la página y repítela solo verticalmente:
7-
https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true
7+
[06- backgrund vertical](../../.learn/assets/background-vertical.jpg?raw=true)
88

99
2. Cambia el tipo de fuente (`font-type`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`.
1010

‎exercises/06-Practicing-Rules/tests.js

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ describe("All the styles should be applied", function () {
2626
let body=document.querySelector("body");
2727
let styles=window.getComputedStyle(body);
2828
expect(styles["background"]).toBe(
29-
`url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/background-vertical.jpg?raw=true) repeat-y`
29+
`url(../../.learn/assets/background-vertical.jpg?raw=true) repeat-y`
3030
);
3131
});
3232
it("the font-family should be 'Times New Roman'", function () {
@@ -131,17 +131,15 @@ describe("All the styles should be applied", function () {
131131
}
132132
expect(orangeHoverSelector).toBe('green');
133133
});
134-
it("You should not change the head tag", function () {
135-
136-
let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta c")
137-
let meta2 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta n")
138-
let link = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<link")
139-
let title = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<title")
140-
expect(meta1).not.toBe(-1)
141-
expect(meta2).not.toBe(-1)
142-
expect(link).not.toBe(-1)
143-
expect(title).not.toBe(-1)
144-
expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
134+
it("You should not change the existing head tag elements", function () {
135+
let head = document.querySelector('head');
136+
let meta = head.querySelector("meta")
137+
let link = head.querySelector('link').href
138+
let title = head.querySelector('title')
139+
140+
expect(meta).not.toBe(null)
141+
expect(link).toBe('http://localhost/styles.css')
142+
expect(title).not.toBe(null)
145143
})
146144

147145
});

‎exercises/07-Very-Specific-Rules/README.es.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ En este ejercicio, puedes agregar tu código solo arriba del **READ ONLY BLOCK**
1414
3. Haz que las filas impares de las tablas tengan fondo amarillo usando `tr:nth-child`.
1515

1616

17-
![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/07-1.png?raw=true)
17+
![Example Image](../../.learn/assets/07-1.png?raw=true)
1818

1919

2020

‎exercises/07-Very-Specific-Rules/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ In this exercise, you can add your code only above the **READ ONLY BLOCK** of th
1818
3. Change the odd rows of the tables to a yellow background using `tr:nth-child`.
1919

2020

21-
![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/07-1.png?raw=true)
21+
![Example Image](../../.learn/assets/07-1.png?raw=true)
2222

2323

2424

‎exercises/07-Very-Specific-Rules/tests.js

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -77,17 +77,15 @@ describe("All the styles should be applied", function () {
7777
expect(cssBody).toBe("body");
7878
}
7979
)
80-
it("You should not change the head tag", function () {
81-
82-
let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta c")
83-
let meta2 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta n")
84-
let link = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<link")
85-
let title = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<title")
86-
expect(meta1).not.toBe(-1)
87-
expect(meta2).not.toBe(-1)
88-
expect(link).not.toBe(-1)
89-
expect(title).not.toBe(-1)
90-
expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
80+
it("You should not change the existing head tag elements", function () {
81+
let head = document.querySelector('head');
82+
let meta = head.querySelector("meta")
83+
let link = head.querySelector('link').href
84+
let title = head.querySelector('title')
85+
86+
expect(meta).not.toBe(null)
87+
expect(link).toBe('http://localhost/styles.css')
88+
expect(title).not.toBe(null)
9189
})
9290

9391

‎exercises/08-Rounded-Image/README.es.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Muchos sitios web usan imágenes de perfil redondeadas ¡una técnica que realme
44

55
La forma obvia de crear una imagen de perfil redondeada es crear una etiqueta de imagen y aplicar un `border-radius: 100%`. 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:
66

7-
![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/08-1.png?raw=true)
7+
![Example Image](../../.learn/assets/08-1.png?raw=true)
88

99
## 📝 Instrucciones:
1010

‎exercises/08-Rounded-Image/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ A lot of websites use rounded profile images, a technique that really makes a we
44

55
The obvious way create a rounded profile picture is to create an image tag and apply `border-radius:100%`. 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:
66

7-
![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/08-1.png?raw=true)
7+
![Example Image](../../.learn/assets/08-1.png?raw=true)
88

99
## 📝 Instructions:
1010

‎exercises/08-Rounded-Image/tests.js

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -83,16 +83,14 @@ describe("All the styles should be applied", function() {
8383
let idTagStyles = window.getComputedStyle(divTag);
8484
expect(idTagStyles["background-image"]).toBeTruthy();
8585
});
86-
it("You should not change the head tag", function () {
87-
88-
let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta c")
89-
let meta2 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta n")
90-
let link = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<link")
91-
let title = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<title")
92-
expect(meta1).not.toBe(-1)
93-
expect(meta2).not.toBe(-1)
94-
expect(link).not.toBe(-1)
95-
expect(title).not.toBe(-1)
96-
expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
86+
it("You should not change the existing head tag elements", function () {
87+
let head = document.querySelector('head');
88+
let meta = head.querySelector("meta")
89+
let link = head.querySelector('link').href
90+
let title = head.querySelector('title')
91+
92+
expect(meta).not.toBe(null)
93+
expect(link).toBe('http://localhost/styles.css')
94+
expect(title).not.toBe(null)
9795
})
9896
});

‎exercises/09-Anchor-Styles/README.es.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
A las personas les gusta sentir que están haciendo clic en algo, uuna manera de lograrlo es fingir un efecto 3D. Para hacerlo, los diseñadores normalmente juegan con los bordes, por ejemplo:
44

5-
![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/09-1.png?raw=true)
5+
![Example Image](../../.learn/assets/09-1.png?raw=true)
66

77
Puedes controlar qué reglas css se aplican a cada estado de un `anchor` utilizando los selectores: `:hover` (para el mouse) o `active` (para presionar el mouse), por ejemplo:
88

‎exercises/09-Anchor-Styles/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
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:
44

5-
![Example Image](https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/09-1.png?raw=true)
5+
![Example Image](../../.learn/assets/09-1.png?raw=true)
66

77
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:
88

0 commit comments

Comments
 (0)