should have the "heart" class', () => { + expect(div.classList.contains("heart")).toBe(true); + }); +}); diff --git a/exercises/04.3-id-Selector/README.es.md b/exercises/04.3-id-Selector/README.es.md index 30df0b3b..c9e5a36c 100644 --- a/exercises/04.3-id-Selector/README.es.md +++ b/exercises/04.3-id-Selector/README.es.md @@ -1,20 +1,21 @@ -# `04.3` Selector de ID +# `04.3` The ID CSS Selector También puedes seleccionar un elemento por su `#id` y aplicarle estilos. -#### El selector `#id` +## El selector `#id` ```css #small{ font-size: 9px; } ``` -Usa la propiedad id del elemento HTML para seleccionar. Las IDs deberían ser únicas, solo un elemento puede tener la misma ID. -Nota: La etiqueta HTML con `id="my_number_one"` tendrá un font-size de 9px. +Usa la propiedad `id` del elemento HTML para seleccionarlo. Los `id` deben ser únicos, así que no uses el mismo `id` en más de un elemento. -# 📝 Instrucciones: +*La etiqueta HTML con `id="small"` tendrá un font-size de `9px`.* -Añade el id `button1` a la etiqueta `` y compila para ver el resultado en la consola. +## 📝 Instrucciones: + +1. Añade el id `button1` a la etiqueta `` y compila para ver el resultado en la consola. diff --git a/exercises/04.3-id-Selector/README.md b/exercises/04.3-id-Selector/README.md index fd4a6f67..377f6c8c 100644 --- a/exercises/04.3-id-Selector/README.md +++ b/exercises/04.3-id-Selector/README.md @@ -4,18 +4,20 @@ tutorial: "https://www.youtube.com/watch?v=9906LCSQJ8M" # `04.3` The ID CSS Selector -You can also select an element by `#id` and apply stiles to it. +You can also select an element by `#id` and apply styles to it. -#### The `#id` selector +## The `#id` selector ```css #small{ font-size: 9px; } ``` -Use the id property of the HTML element to select it. IDs should be unique, only one element must have the same ID. -Note: The html tag with the `id="my_number_one"` will have a font-size of 9px. -# 📝 Instructions: +Use the `id` property of the HTML element to select it. `ids` should be unique, don't use the same `id` on more than one element. -Add the id `button1` on to the `` tag and compile to check the result on the console. +*The HTML tag with the `id="small"` will have a font-size of `9px`.* + +## 📝 Instructions: + +1. Add the id `button1` on to the `` tag and compile to check the result on the console. diff --git a/exercises/04.3-id-Selector/solution.hide.html b/exercises/04.3-id-Selector/solution.hide.html new file mode 100644 index 00000000..a7964559 --- /dev/null +++ b/exercises/04.3-id-Selector/solution.hide.html @@ -0,0 +1,13 @@ + + + + + + + + + I should look like a button + + diff --git a/exercises/04.3-id-Selector/styles.css b/exercises/04.3-id-Selector/styles.css index e020d28b..c6058338 100644 --- a/exercises/04.3-id-Selector/styles.css +++ b/exercises/04.3-id-Selector/styles.css @@ -1,5 +1,8 @@ #button1 { - background: #BDBDBD; - border: #5E5E5E; - border-radius: 5px; + background-color: #4caf50; /* Green */ + color: white; + padding: 15px 32px; + text-align: center; + display: inline-block; + border-radius: 5px; } diff --git a/exercises/04.3-id-Selector/test.js b/exercises/04.3-id-Selector/test.js new file mode 100644 index 00000000..ed2b823e --- /dev/null +++ b/exercises/04.3-id-Selector/test.js @@ -0,0 +1,37 @@ +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +document.documentElement.innerHTML = html.toString(); + +jest.dontMock('fs'); + +const span = document.querySelector("span"); +const link = document.querySelector("link"); + +test("There should be a tag", () => { + expect(span).toBeTruthy() +}); + +test("The tag should have the id 'button1'", () => { + expect(span).toBeTruthy(); + let id = span.id + expect(id).toBeTruthy(); + expect(id).toBe('button1'); +}); + +test("The tag should not contain any inline style", () => { + let emptyBodyInlineStyle = {}; + expect(span).toBeTruthy() + expect(span.style._values).toEqual(emptyBodyInlineStyle); +}); + +test("You should not change the existing tag elements", () => { + let head = document.querySelector('head'); + expect(head).toBeTruthy(); + + let meta = head.querySelector("meta"); + expect(meta).toBe(null); + + const href = link.getAttribute("href"); + expect(href).toBe('./styles.css'); +}); diff --git a/exercises/05-Specificity/README.es.md b/exercises/05-Specificity/README.es.md index 32721c69..ceeca044 100644 --- a/exercises/05-Specificity/README.es.md +++ b/exercises/05-Specificity/README.es.md @@ -1,20 +1,16 @@ -# `05` Especificidad +# `05` Specificity -Al crear un documento CSS, debe comenzar desde el selector más genérico y terminar con el más específico, esa es la forma en que funciona CSS. +Al crear un documento CSS, se debe comenzar desde el selector más genérico y terminar con el más específico, esa es la forma en que funciona CSS. -Se trata del nivel de especificidad. Si especificas que tu div con id="thirditem" tiene un fondo (background) azul, y más adelante en el documento especificas que todos los divs tendrán un fondo amarillo, #thirditem mantendrá su fondo azul. ¡y punto! +Se trata del nivel de **especificidad**. Si especificas que tu `div` con `id="thirditem"` tiene un fondo (`background-color`) azul (`blue`), y más adelante en el documento especificas que todos los `divs` tendrán un fondo amarillo (`yellow`), `#thirditem` mantendrá su fondo azul (`blue`). ¡Y punto! -Porque cuanto más específico, más prioridad tiene. -## 📝 Instrucciones: - -```Plain/Text -1. Anula el color de fondo (background-color) de #thirditem sin eliminar ningún código CSS, simplemente agrega al CSS una regla más específica al final del documento para anular el color de fondo a verde. -``` +*Porque cuanto más específico, más prioridad tiene.* -Tip: +## 📝 Instrucciones: -Puedes usar la anotación **!important** : -https://css-tricks.com/when-using-important-is-the-right-choice/ +1. Anula el color de fondo (`background`) de `#thirditem` sin eliminar ningún código CSS, simplemente agrega al CSS una regla más específica al final del documento para anular el color de fondo a verde. +## 💡 Pista: ++ Puedes usar la notación **!important** : https://css-tricks.com/when-using-important-is-the-right-choice/ diff --git a/exercises/05-Specificity/README.md b/exercises/05-Specificity/README.md index c64d7a8b..f1edfa0f 100644 --- a/exercises/05-Specificity/README.md +++ b/exercises/05-Specificity/README.md @@ -4,20 +4,19 @@ tutorial: "https://www.youtube.com/watch?v=3JxXkhxyAnI" # `05` Specificity -When creating a CSS document, you need to start from the most generic selector and end with the most specific ones, that is the way CSS works. +When creating a CSS document, you need to start from the most generic selectors and end with the most specific ones, that is the way CSS works. -It's all about the level of Specificity. -If you specify that your div with id="thirditem" has a blue background, and later in the document you specify that all divs will have yellow background, #thirditem will keep his blue background. punto! -Because the more specific, the more priority it has. +It's all about the level of **specificity**. If you specify that your `div` with `id="thirditem` has a yellow background, and later in the document you specify that all `divs` will have blue background, `#thirditem` will keep his yellow background. punto! -## 📝 Instrucciones: +*Because the more specific, the more priority it has.* -```Plain/Text -1. Override the background-color of #thirditem without deleting any css code, simply append to the css a more specific rule at the end of the document to override the background-color to green. -``` +## 📝 Instructions: -Tip: +1. Override the `background` of `#thirditem` without deleting any CSS code, simply append to the CSS a more specific rule at the end of the document to override the background-color to green. + + +## 💡 Hint: You can use the **!important** annotation: https://css-tricks.com/when-using-important-is-the-right-choice/ diff --git a/exercises/05-Specificity/index.html b/exercises/05-Specificity/index.html index 3d68946c..154a071a 100644 --- a/exercises/05-Specificity/index.html +++ b/exercises/05-Specificity/index.html @@ -11,7 +11,7 @@

My first item of the list

My second item of the list

My third item of the list

-

My forth item of the list

+

My fourth item of the list

My fifth item of the list

diff --git a/exercises/05-Specificity/solution.hide.css b/exercises/05-Specificity/solution.hide.css new file mode 100644 index 00000000..fabc5750 --- /dev/null +++ b/exercises/05-Specificity/solution.hide.css @@ -0,0 +1,12 @@ +ul li { + background: blue; +} + +li + #thirditem { + background: yellow; +} +/**** DO NOT EDIT ANYTHING ABOVE THIS LINE ****/ + +#thirditem { + background: green !important; +} diff --git a/exercises/05-Specificity/styles.css b/exercises/05-Specificity/styles.css index db471c2b..1255fbbc 100644 --- a/exercises/05-Specificity/styles.css +++ b/exercises/05-Specificity/styles.css @@ -1,9 +1,8 @@ -ul li{ +ul li { background: blue; } -#thirditem{ +li + #thirditem { background: yellow; -} -/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/ - \ No newline at end of file +} +/**** DO NOT EDIT ANYTHING ABOVE THIS LINE ****/ diff --git a/exercises/05-Specificity/tests.js b/exercises/05-Specificity/tests.js index 407a91f8..3ea381ec 100644 --- a/exercises/05-Specificity/tests.js +++ b/exercises/05-Specificity/tests.js @@ -1,69 +1,54 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); -const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); -jest.dontMock("fs"); +jest.dontMock('fs'); describe("All the styles should be applied", function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML=html.toString(); - }); - afterEach(() => { - jest.resetModules(); - }); - - - it("You should not change the head tag", function () { - - let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("-1).toBeFalsy(); + test("You should not change the existing tag elements", function () { + let head = document.querySelector('head') + expect(head).toBeTruthy() + let meta = head.querySelector("meta") + expect(meta).not.toBe(null) + const pathname = new URL(document.querySelector('link').href).pathname + expect(pathname).toBe('/styles.css') + let title = head.querySelector('title') + expect(title).not.toBe(null) + }) + test("You should not delete or edit the existing code", function () { + document.querySelector("head").innerHTML = ``; - }) - it("You should not delete or edit the existing code", function () { + let cssArray = document.styleSheets[0].cssRules[0].selectorText; + let cssArrayBackground = document.styleSheets[0].cssRules[0].style.background; + let thirdItSelector = document.styleSheets[0].cssRules[1].selectorText; + let thirdItBackground = document.styleSheets[0].cssRules[1].style.background; - document.querySelector( - "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules[0].selectorText; - // console.log("cssArray:",cssArray) - let cssArrayBackground= document.styleSheets[0].cssRules[0].style.background - console.log("back:",cssArrayBackground) - let thirdItSelector=document.styleSheets[0].cssRules[1].selectorText; - let thirdItBackground = document.styleSheets[0].cssRules[1].style.background - expect(thirdItSelector).toBe("#thirditem"); + expect(thirdItSelector).toBe("li + #thirditem"); expect(thirdItBackground).toBe("yellow"); expect(cssArray).toBe("ul li"); expect(cssArrayBackground).toBe("blue"); }) - it("You should use a more specific rule using the !important annotation ", function () { + test("You should use a more specific rule using the !important annotation", function () { document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules; - // console.log("NEW", cssArray[2].style._importants) - let orangeHoverSelector=""; - for (let i=0; i${css.toString()}`; + let cssArray = document.styleSheets[0].cssRules; + let orangeHoverSelector = ""; + for (let i = 0; i < cssArray.length; i++) { + if (cssArray[i].selectorText.endsWith("#thirditem") && cssArray[i].style._importants.background === "important" || cssArray[i].style._importants["background-color"] === "important") { + orangeHoverSelector = cssArray[i].style.background || cssArray[i].style["background-color"]; } } expect(orangeHoverSelector).toBe("green"); }); -}); \ No newline at end of file +}); diff --git a/exercises/06-Practicing-Rules/README.es.md b/exercises/06-Practicing-Rules/README.es.md index 61dfd055..78942479 100644 --- a/exercises/06-Practicing-Rules/README.es.md +++ b/exercises/06-Practicing-Rules/README.es.md @@ -1,28 +1,23 @@ -# `06` Practicando las reglas +# `06` Practicing Rules ## 📝 Instrucciones: +1. Establece esta URL como la imagen de fondo de la página y repítela solo verticalmente: `../../.learn/assets/background-vertical.jpg?raw=true` -1. Establece esta URL como la imagen de fondo de la página y repítela solo verticalmente: - https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true +2. Cambia el tipo de fuente (`font-family`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`. -2. Cambia el tipo de fuente (font-size) del h1 a Courier - y el resto del sitio web a Times New Roman. +3. Cambia el color del `h1` a rojo (`red`). -3. Cambia el color del h1 a rojo. +4. Haz que todos los `h2` tengan subrayado (`underline`). -4. Haz todos los h2 con un subrayado. +5. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer. -5. Centra el h1 en el medio. +6. Agrega un fondo blanco semitransparente (`semi-transparent background (0.2)`) al **primer párrafo** para que sea más fácil de leer (tienes que usar `rgba` para esto). -6. Agrega un left padding a todo el documento de 20px para que sea más fácil de leer. +7. Luego aplica un `padding` de `5px` a todos los lados de ese párrafo. -7. Agrega un fondo blanco semitransparente (0.2) al primer párrafo de "3 reasons you know you are learning" para que sea más fácil de leer (tienes que usar rgba para esto), y luego aplica un padding de 5px a todos los lados de ese párrafo. +8. Cambia el color del `anchor` **hover** a verde (`green`) y elimina el subrayado (tienes que pasar el cursor encima del anchor para probarlo). -8. Cambia el color del anchor/enlace "hover" a verde (green) y elimina el subrayado. -    (tienes que colocar el anchor para probarlo). +## El resultado debería ser algo como esto: - -El resultado debería ser algo como esto: - - + diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md index 5d3e6e4c..2beed784 100644 --- a/exercises/06-Practicing-Rules/README.md +++ b/exercises/06-Practicing-Rules/README.md @@ -6,31 +6,22 @@ tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" ## 📝 Instructions: +1. Set this URL as the background image of the page, and repeat it vertically only: `../../.learn/assets/background-vertical.jpg?raw=true` -1. Set this URL as the background image of the page, and repeat it vertically only: - https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/.learn/assets/background-vertical.jpg?raw=true +2. Change the `font-family` of the `h1` to `Courier` and the rest of the website to `Times new Roman`. -2. Change the font-type of the h1 to Courier - and the rest of the website to Times new Roman. +3. Change the color of `h1` to `red`. -3. Change the color of h1 to red. +4. Make all the `h2` have an `underline`. -4. Make all the h2's with an underline. +5. Add a `left padding` to the whole document of `20px` to make it easier to read. -5. Center the h1 to the middle. +6. Add a white `semi-transparent background (0.2)` to the **first paragraph** to make it easier to read (you have to use `rgba` for that). -6. Add a left padding to the whole document - of 20px to make it easier to read. +7. Then apply a `padding` of `5px` to all sides of that paragraph. -7. Add a white semi-transparent background (0.2) to the first paragraph - of "3 reasons you know you are learning" to make it easier to - read (you have tu use rgba for that), and then apply a padding - of 5px to all sides of that paragraph. +8. Change the `anchor` **hover** color to `green` and remove the underline (you have to actually hover the anchor to test it). -8. Change the anchor "hover" color to green and remove the underline. - (you have to actually hover the anchor to test it). +## The result should be something like this: - -The result should be something like this: - - + diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html index 4119acb5..8c0b2b50 100644 --- a/exercises/06-Practicing-Rules/index.html +++ b/exercises/06-Practicing-Rules/index.html @@ -8,27 +8,27 @@ -

The learning essay

-

3 reasons you know you are learning

-

- We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning. -

-

-
1. You are able to complete the exercises by yourself.
-
2. You understand what the teacher is talking about
-
3. Your are able to have conversations about the topic
-

-

3 reasons you know love what you are learning

-

-
• Time passes fast.
-
• - You are anxious to finish this excercise and start the next one. -
-
• Is 12am and you don't want to go to sleep.
-

-

- If you can't sleep, what better than watching videos of cats? - click here -

+ - \ No newline at end of file + diff --git a/exercises/06-Practicing-Rules/solution.hide.css b/exercises/06-Practicing-Rules/solution.hide.css new file mode 100644 index 00000000..4026152e --- /dev/null +++ b/exercises/06-Practicing-Rules/solution.hide.css @@ -0,0 +1,25 @@ +/* add your styles here */ +body { + background: url("../../.learn/assets/background-vertical.jpg?raw=true") repeat-y; + font-family: "Times New Roman"; + padding-left: 20px; +} + +#id1 { + background: rgba(255, 255, 255, 0.2); + padding: 5px; +} + +h1 { + font-family: "Courier"; + color: red; +} + +h2 { + text-decoration: underline; +} + +a:hover { + color: green; + text-decoration: none; +} diff --git a/exercises/06-Practicing-Rules/styles.css b/exercises/06-Practicing-Rules/styles.css index d89b1a47..9a7fae86 100644 --- a/exercises/06-Practicing-Rules/styles.css +++ b/exercises/06-Practicing-Rules/styles.css @@ -1 +1 @@ -/* add your styles here */ \ No newline at end of file +/* add your styles here */ diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js index 65c75a18..3bcecea6 100644 --- a/exercises/06-Practicing-Rules/tests.js +++ b/exercises/06-Practicing-Rules/tests.js @@ -1,147 +1,117 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); -const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); -jest.dontMock("fs"); +jest.dontMock('fs'); -describe("All the styles should be applied", function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML=html.toString(); +describe("All the styles should be applied", () => { + let meta = document.querySelector("meta") + let link = document.querySelector("link") + let title = document.querySelector('title') - // apply the styles from the stylesheet if needed - - }); - afterEach(() => { - jest.resetModules(); - }); - - - - it("the background should match", function () { + test("The background should match", () => { document.querySelector( "head" - ).innerHTML=``; - let body=document.querySelector("body"); - let styles=window.getComputedStyle(body); + ).innerHTML = ``; + let body = document.querySelector("body"); + let styles = window.getComputedStyle(body); expect(styles["background"]).toBe( - `url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/background-vertical.jpg?raw=true) repeat-y` + `url(../../.learn/assets/background-vertical.jpg?raw=true) repeat-y` ); }); - it("the font-family should be 'Times New Roman'", function () { + test("The font-family should be 'Times New Roman'", () => { document.querySelector( "head" - ).innerHTML=``; - let body=document.querySelector("body"); - let styles=window.getComputedStyle(body); - expect(styles["font-family"]).toBe("Times New Roman"); + ).innerHTML = ``; + let body = document.querySelector("body"); + let styles = window.getComputedStyle(body); + expect(styles["font-family"].toLowerCase()).toBe("\"times new roman\""); }); - it("the padding-left should be '20px'", function () { + test("The padding-left should be '20px'", () => { document.querySelector( "head" - ).innerHTML=``; - let body=document.querySelector("body"); - let styles=window.getComputedStyle(body); + ).innerHTML = ``; + let body = document.querySelector("body"); + let styles = window.getComputedStyle(body); expect(styles["padding-left"]).toBe("20px"); }); - it("the font-family in the H1 Tag should be 'Courier'", function () { + test("The font-family in the

tag should be 'Courier'", () => { document.querySelector( "head" - ).innerHTML=``; - let h1Tag=document.querySelector("h1"); - let h1TagStyles=window.getComputedStyle(h1Tag); + ).innerHTML = ``; + let h1Tag = document.querySelector("h1"); + let h1TagStyles = window.getComputedStyle(h1Tag); // get computed styles of any element you like - expect(h1TagStyles["font-family"]).toBe("Courier"); + expect(h1TagStyles["font-family"].toLowerCase()).toBe("\"courier\""); }); - it("the color in the H1 Tag should be 'red'", function () { + test("The color in the

tag should be 'red'", () => { document.querySelector( "head" - ).innerHTML=``; - let h1Tag=document.querySelector("h1"); - let h1TagStyles=window.getComputedStyle(h1Tag); + ).innerHTML = ``; + let h1Tag = document.querySelector("h1"); + let h1TagStyles = window.getComputedStyle(h1Tag); // get computed styles of any element you like expect(h1TagStyles["color"]).toBe("red"); }); - it("the text-align in the H1 Tag should be 'center'", function () { + test("the text-decoration in the

tag should be 'underline'", () => { document.querySelector( "head" - ).innerHTML=``; - let h1Tag=document.querySelector("h1"); - let h1TagStyles=window.getComputedStyle(h1Tag); + ).innerHTML = ``; // get computed styles of any element you like - expect(h1TagStyles["text-align"]).toBe("center"); - }); - it("the text-decoration in the H2 Tag should be 'underline'", function () { - document.querySelector( - "head" - ).innerHTML=``; - // get computed styles of any element you like - const h2Tag=document.querySelector("h2"); - let h2TagStyles=window.getComputedStyle(h2Tag); + const h2Tag = document.querySelector("h2"); + let h2TagStyles = window.getComputedStyle(h2Tag); expect(h2TagStyles["text-decoration"]).toBe("underline"); }); - it("the padding in the #id1 Tag should be '5px'", function () { + test("The padding in the p tag should be '5px'", () => { document.querySelector( "head" - ).innerHTML=``; + ).innerHTML = ``; // get computed styles of any element you like - const idTag=document.querySelector("#id1"); - let idTagStyles=window.getComputedStyle(idTag); + const idTag = document.querySelector("#id1"); + let idTagStyles = window.getComputedStyle(idTag); expect(idTagStyles["padding"]).toBe("5px"); }); - it("the background-color in the #id1 Tag should be 'semi transparent white'", function () { - document.querySelector( - "head" - ).innerHTML=``; - // get computed styles of any element you like - const idTag=document.querySelector("#id1"); - let idTagStyles=window.getComputedStyle(idTag); - console.log("$$$:", idTagStyles) - expect(idTagStyles["background-color"]).toBe("rgba(255, 255, 255, 0.2)"); - }); - it("The a hover underline should be removed", function () { + + test("The a:hover underline should be removed", () => { document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules; - // console.log("$$$:", cssArray) - let orangeHoverSelector=""; - for (let i=0; i${css.toString()}`; + let cssArray = document.styleSheets[0].cssRules; + let orangeHoverSelector = ""; + for (let i = 0; i < cssArray.length; i++) { + if (cssArray[i].selectorText === "a:hover") { + orangeHoverSelector = cssArray[i].style['text-decoration']; } } expect(orangeHoverSelector).toBe("none"); }); - it("The a hover color should be green", function () { + test("The a:hover color should be green", () => { document.querySelector( "head" - ).innerHTML=``; + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules; + let orangeHoverSelector = ""; - let cssArray=document.styleSheets[0].cssRules; - console.log("$$$:", cssArray[0]) - let orangeHoverSelector=""; - for (let i=0; i< cssArray.length; i++) { + if (cssArray[i].selectorText === "a:hover") { + orangeHoverSelector = cssArray[i].style.color; } } expect(orangeHoverSelector).toBe('green'); }); - it("You should not change the head tag", function () { + test("You should not change the existing tag elements", () => { + let head = document.querySelector('head') + expect(head).toBeTruthy() + + expect(meta).toBeTruthy() + + let pathname = link.getAttribute("href") + expect(pathname).toBe('./styles.css') - let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("-1).toBeFalsy(); + expect(title).toBeTruthy() }) }); diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/07-Very-Specific-Rules/README.es.md index a8b31623..df781b9a 100644 --- a/exercises/07-Very-Specific-Rules/README.es.md +++ b/exercises/07-Very-Specific-Rules/README.es.md @@ -1,18 +1,21 @@ -# `07` Reglas Muy Especificas +# `07` Very Specific Rules -# **Importante:** +## 🔎 Importante: -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. +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. ## 📝 Instrucciones: +1. Establece el color de texto `ul li` a rojo (`red`) (anula los conflictos siendo más específico). -1. Establece el color de texto **ul** a rojo (red) (anula los conflictos siendo más específico). -2. Establece el color de fondo (backgrounf-color) del segundo **li** del **ol** a verde (green) (no uses el selector #id). -3. Haz que las filas impares de las tablas tengan fondo amarillo usando **tr:nth-child**. +2. Establece el color de fondo (`background-color`) del segundo `li` del `ol` a verde (`green`) (no uses el selector #id ni el .class). +3. Haz que las filas impares de la tabla tengan fondo amarillo usando `tr:nth-child`. - + +>Importante: **NO** debes modificar el archivo index.html +## 💡 Pista: +1. El atributo `!important` ayuda a sobreescribir estilos. diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/07-Very-Specific-Rules/README.md index 57bd680b..72f38d2c 100644 --- a/exercises/07-Very-Specific-Rules/README.md +++ b/exercises/07-Very-Specific-Rules/README.md @@ -4,19 +4,23 @@ tutorial: "https://www.youtube.com/watch?v=2YkLDRZFk40" # `07` Very Specific Rules -# **Important:** +## 🔎 Important: -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. +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. ## 📝 Instructions: -1. Set the **ul** text color to red (override conflicts with specificity). -2. Set the background color of the second **li** of the **ol** to green (don't use the #id selector). -3. Make the odd rows of the tables with yellow background using **tr:nth-child**. +1. Set the `ul li` text color to `red` (override conflicts with specificity). +2. Set the `background-color` of the second `li` of the `ol` to `green` (don't use the #id selector or .class selector). - +3. Change the odd rows of the tables to a yellow background using `tr:nth-child`. + +>Important: You should **NOT** modify the index.html file. +## 💡 Hint: + +1. The `!important` attribute helps to override other attributes. diff --git a/exercises/07-Very-Specific-Rules/index.html b/exercises/07-Very-Specific-Rules/index.html index 9c691446..09fef243 100644 --- a/exercises/07-Very-Specific-Rules/index.html +++ b/exercises/07-Very-Specific-Rules/index.html @@ -10,22 +10,22 @@

The learning essay

3 reasons you know you are learning

- We are going to explain in this pharagraph the 3 most comon signs that you should look into yourself to recognize if you are learning. + 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.

1. You are able to complete the exercises by yourself.
2. You understand what the teacher is talking about
-
3. Your are able to have conversations about the topic
+
4. You are able to have conversations about the topic

3 reasons you know love what you are learning

• Time passes fast.
-
• You are anxious to finish this excercise and start the next one.
-
• Is 12am and you don't want to go to sleep.
+
• You are anxious to finish this exercise and start the next one.
+
• It's 12am and you don't want to go to sleep.

If you can't sleep, what better than watching videos of cats? - click here + click here

@@ -34,47 +34,47 @@

3 reasons you know love what you are learning

- + - + - + - + - + - + - + - + - + - + - +

Gender
12 years	12	Male
22 years	22	Female
11 years	11	Male
21 years	21	Male
22 years	22	Female
10 years	10	Male
13 years	13	Female
13 years	13	Male
10 years	10	Male
11 years	11	Male
11 years	11	Male

diff --git a/exercises/07-Very-Specific-Rules/solution.hide.css b/exercises/07-Very-Specific-Rules/solution.hide.css new file mode 100644 index 00000000..232aa480 --- /dev/null +++ b/exercises/07-Very-Specific-Rules/solution.hide.css @@ -0,0 +1,27 @@ +/** Insert your code here **/ + +ul li { + color: red !important; +} + +ol li:nth-child(2) { + background-color: green; +} + +tr:nth-child(odd) { + background: yellow; +} + +/*********** READ-ONLY BLOCK ****** +You CANNOT UPDATE anything from here on, +only add lines of code on top of these lines +**/ + +body { + color: blue; +} + +ul li, +ol li { + color: green; +} diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css index defdb77a..164b694b 100644 --- a/exercises/07-Very-Specific-Rules/styles.css +++ b/exercises/07-Very-Specific-Rules/styles.css @@ -1,8 +1,8 @@ /** Insert your code here **/ -/*********** READ ONLY BLOCK ****** -You CAN NOT UPDATE anything from here on, -only add lines of code on top of this lines +/********** READ-ONLY BLOCK ****** +You CANNOT UPDATE anything from here on, +only add lines of code on top of these lines **/ body { diff --git a/exercises/07-Very-Specific-Rules/tests.js b/exercises/07-Very-Specific-Rules/tests.js index 5f68ba04..f141c357 100644 --- a/exercises/07-Very-Specific-Rules/tests.js +++ b/exercises/07-Very-Specific-Rules/tests.js @@ -1,97 +1,98 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); -const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); - -jest.dontMock("fs"); - -describe("All the styles should be applied", function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML=html.toString(); - - //apply the styles from the stylesheet if needed - - }); - afterEach(() => { - jest.resetModules(); - }); - - - it("The ul li color has to be red", function () { +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); + +jest.dontMock('fs'); + +describe("All the styles should be applied", ()=>{ + const meta = document.querySelector("meta") + const title = document.querySelector('title') + const link = document.querySelector('link') + + test("The ul li color has to be red using !important", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules; + ).innerHTML = ``; - let orangeHoverSelector=""; - for (let i=0; i< cssArray.length; i++) { + if (cssArray[i].selectorText === "ul li" || cssArray[i].selectorText === "ul > li") { + color = cssArray[i].cssText; } - expect(orangeHoverSelector).toBe("red"); } + let reg = new RegExp(/color:\s*red\s*!important\s*;/gm) - + expect(reg.test(color.toLowerCase())).toBeTruthy(); }); - it("The ul second element background should be green", function () { + + test("The ol second element background should be green", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules; + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules; + + let background = ""; + let backgroundColor=""; + for (let i = 0; i < cssArray.length; i++) { + if (cssArray[i].selectorText === "ol li:nth-child(2)" || cssArray[i].selectorText === "ol > li:nth-child(2)") { + background = cssArray[i].style['background']; + backgroundColor = cssArray[i].style['background-color']; - let orangeHoverSelector=""; - for (let i=0; i{ document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules; - - let orangeHoverSelector=""; - for (let i=0; i${css.toString()}`; + let cssArray = document.styleSheets[0].cssRules; + + let background = ""; + let backgroundColor = ""; + for (let i = 0; i < cssArray.length; i++) { + if (cssArray[i].selectorText.includes( "tr:nth-child(odd)")) { + background = cssArray[i].style['background']; + backgroundColor = cssArray[i].style['background-color']; + } - }expect(orangeHoverSelector).toBe("yellow"); + } expect((background && background.toLowerCase() === "yellow") || (backgroundColor && backgroundColor.toLowerCase() === "yellow")).toBeTruthy(); }) - it("Write all your rules above the existing code", function () { + test("Write all your rules above the existing code", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let cssBody=document.styleSheets[0].cssRules[3].selectorText; - let cssArray=document.styleSheets[0].cssRules[4].selectorText; + ).innerHTML = ``; + let cssBody = document.styleSheets[0].cssRules[3].selectorText; + let cssArray = document.styleSheets[0].cssRules[4].selectorText; expect(cssArray).toBe("ul li,\nol li"); expect(cssBody).toBe("body"); - } - ) - it("You should not change the head tag", function () { - - let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("-1).toBeFalsy(); }) + test("You should not change the existing head tag elements", ()=>{ + let head = document.querySelector('head') + expect(head).toBeTruthy() + expect(meta).toBeTruthy() + let href = link.getAttribute('href') + expect(href).toBe('./styles.css') + expect(title).toBeTruthy() + }) -}); \ No newline at end of file +}); diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md index 98d140a0..bd88ef5d 100644 --- a/exercises/08-Rounded-Image/README.es.md +++ b/exercises/08-Rounded-Image/README.es.md @@ -1,15 +1,25 @@ -# `08` Imagen Redondeada +# `08` Rounded Image -Muchos sitios web usan imágenes de perfil redondeadas ¡una técnica que realmente hace que un sitio web sea más hermoso! +Muchos sitios web usan imágenes de perfil redondeadas, ¡una técnica que realmente hace que un sitio web sea más hermoso! -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 con diferentes altura y ancho no se verán como un círculo, se verán como óvalos: +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: + + ## 📝 Instrucciones: -Adicionalmente a border-radius tenemos que tambien utilizar la propiedad `object-fit`, [aqui hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). +1. Usa `border-radius`. + +2. Usa las propiedades `width` y `height` para hacer que la imagen sea cuadrada. + +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). + +## 💡 Pista: + ++ Si la imagen es más grande que su contenedor y quieres centrarla o enfocarte en una zona en particular, puedes utilizar `object-position`. -Si la es mas grande que el div y quieres centrarla o enfocarte en una zona en particular puedes utilizar `object-position`. ++ En este artículo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/). -En este articulo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/) ++ 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). diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md index 22bf00c9..886e41f1 100644 --- a/exercises/08-Rounded-Image/README.md +++ b/exercises/08-Rounded-Image/README.md @@ -2,16 +2,25 @@ A lot of websites use rounded profile images, a technique that really makes a website more beautiful! -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: +The obvious way to 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: + + ## 📝 Instructions: +1. Use `border-radius`. + +2. Use the properties `width` and `height` to make the image a square shape. + +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). + -In addition to the border-radius you have to use the `object-fit` css property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721). +## 💡 Hint: -If the image ends up being bigger than the div (or with different proportions) we can adjust the object-position to choose what part of the image we want to display inside of the circle. ++ 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. -You can also read [this great article about object fit](https://css-tricks.com/on-object-fit-and-object-position/) ++ You can also read [this great article about object fit](https://css-tricks.com/on-object-fit-and-object-position/). ++ 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). diff --git a/exercises/08-Rounded-Image/solution.hide.css b/exercises/08-Rounded-Image/solution.hide.css new file mode 100644 index 00000000..86a38c22 --- /dev/null +++ b/exercises/08-Rounded-Image/solution.hide.css @@ -0,0 +1,10 @@ +body { + background: #bdbdbd; +} +.rounded { + object-fit: cover; + object-position: top; + width: 250px; + height: 250px; + border-radius: 100%; +} diff --git a/exercises/08-Rounded-Image/tests.js b/exercises/08-Rounded-Image/tests.js index d2c7c36f..13cd170e 100644 --- a/exercises/08-Rounded-Image/tests.js +++ b/exercises/08-Rounded-Image/tests.js @@ -1,98 +1,74 @@ -const fs = require("fs"); -const path = require("path"); -const html = fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); -jest.dontMock("fs"); +jest.dontMock('fs'); -describe("All the styles should be applied", function() { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML = html.toString(); +describe("All the styles should be applied", () => { + const meta = document.querySelector("meta") + const title = document.querySelector('title') + const link = document.querySelector('link') - //apply the styles from the stylesheet if needed + const img = document.querySelector(".rounded") - }); - afterEach(() => { - jest.resetModules(); - }); + test("The tag should exist", () => { + expect(img).toBeTruthy(); + }) - it("The tag has to be removed", function() { - document.querySelector( - "head" - ).innerHTML = ``; - expect(document.querySelector("img")).toBeFalsy(); - }); - it("The

tag should exists", function() { - document.querySelector( - "head" - ).innerHTML = ``; - expect(document.querySelector("div")).toBeTruthy(); - }); - it("the width in the div Tag should be '200px'", function() { - // get computed styles of any element you like + test("The width of the tag should be equal to its height and vice versa", () => { document.querySelector( "head" ).innerHTML = ``; - const divTag = document.querySelector("div"); - let idTagStyles = window.getComputedStyle(divTag); - expect(idTagStyles["width"]).toBe("200px"); - }); - it("the height in the div Tag should be '200px'", function() { - // get computed styles of any element you like - document.querySelector( - "head" - ).innerHTML = ``; - const divTag = document.querySelector("div"); - let idTagStyles = window.getComputedStyle(divTag); - expect(idTagStyles["height"]).toBe("200px"); - }); - it("the border radius in the div Tag should be '100%'", function() { - // get computed styles of any element you like - document.querySelector( - "head" - ).innerHTML = ``; - const divTag = document.querySelector("div"); - let idTagStyles = window.getComputedStyle(divTag); - expect(idTagStyles["border-radius"]).toBe("100%"); - }); - it("the background position x in the div Tag should be 'center'", function() { - // get computed styles of any element you like - document.querySelector( - "head" - ).innerHTML = ``; - const divTag = document.querySelector("div"); - let idTagStyles = window.getComputedStyle(divTag); - expect(idTagStyles["background-position-x"]).toBe("center"); + + let cssArray = document.styleSheets[0].cssRules; + + let width = ""; + let height = ""; + + for (let i = 0; i < cssArray.length; i++) { + if (cssArray[i].selectorText === ".rounded") { + width = cssArray[i].style["width"]; + height = cssArray[i].style["height"]; + } + } + + // checks if styles return empty string "" or undefined + expect(width).toBeTruthy(); + expect(height).toBeTruthy(); + + expect(width).toBe(height); + expect(height).toBe(width); }); - it("the background position y in the div Tag should be 'center'", function() { - // get computed styles of any element you like + + test("The object-fit value of the tag should be 'cover'", () => { document.querySelector( "head" ).innerHTML = ``; - const divTag = document.querySelector("div"); - let idTagStyles = window.getComputedStyle(divTag); - expect(idTagStyles["background-position-y"]).toBe("center"); + + let imgStyle = window.getComputedStyle(img); + expect(imgStyle["object-fit"]).toBe("cover"); }); - it("the background image in the div Tag should exists", function() { - // get computed styles of any element you like + + test("The object-position value of the tag should be 'top'", () => { document.querySelector( "head" ).innerHTML = ``; - const divTag = document.querySelector("div"); - let idTagStyles = window.getComputedStyle(divTag); - expect(idTagStyles["background-image"]).toBeTruthy(); + + let imgStyle = window.getComputedStyle(img); + expect(imgStyle["object-position"]).toBe("top"); }); - it("You should not change the head tag", function () { - - let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("-1).toBeFalsy(); + + test("You should not change the existing tag elements", () => { + let head = document.querySelector('head') + expect(head).toBeTruthy() + + expect(meta).toBeTruthy() + + let href = link.getAttribute('href') + expect(href).toBe('./styles.css') + + expect(title).toBeTruthy() }) }); diff --git a/exercises/09-Anchor-Styles/README.es.md b/exercises/09-Anchor-Styles/README.es.md index 49e7507d..94e03e07 100644 --- a/exercises/09-Anchor-Styles/README.es.md +++ b/exercises/09-Anchor-Styles/README.es.md @@ -1,22 +1,20 @@ -# `09` Estilos de enlaces (anchor) 3D +# `09` 3D Anchor Styles -A las personas les gusta sentir que están haciendo clic en algo, un gran enfoque para lograrlo es fingir un efecto 3D. Para hacerlo, los diseñadores normalmente juegan con los bordes. Ejemplo: +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: - + -Puedes controlar qué reglas css se aplican a cada estado de un enlace utilizando los selectores: ":hover" (para el mouse) o "active" (para presionar el mouse), por ejemplo: +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: ```css a:active { - /* aquí puedes especificar cualquier regla de css que aplique -   al anchor mientras se presiona' */ + /* aquí puedes especificar cualquier regla de CSS que aplique al anchor mientras se presiona' */ } ``` ## 📝 Instrucciones: - -1. Cambia los colores del borde del enlace (anchor), cuando la presionas, a lo siguiente: +1. Cambia los colores del borde del anchor, cuando le das clic, a lo siguiente: ```css border-color: #000 #aaa #aaa #000; diff --git a/exercises/09-Anchor-Styles/README.md b/exercises/09-Anchor-Styles/README.md index abf0bc33..a4b23419 100644 --- a/exercises/09-Anchor-Styles/README.md +++ b/exercises/09-Anchor-Styles/README.md @@ -1,21 +1,20 @@ # `09` 3D Anchor Styles -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. Example: +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: - + -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: +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: ```css a:active { - /* here you can specify whatever css rule that applies + /* here you can specify whatever CSS rule that applies to the anchor while being 'pressed' */ } ``` ## 📝 Instructions: - 1. Change the border colors of the anchor, when being pressed, to the following: diff --git a/exercises/09-Anchor-Styles/index.html b/exercises/09-Anchor-Styles/index.html index 984ca01e..30e00691 100644 --- a/exercises/09-Anchor-Styles/index.html +++ b/exercises/09-Anchor-Styles/index.html @@ -6,7 +6,7 @@ - + Click me diff --git a/exercises/09-Anchor-Styles/solution.hide.css b/exercises/09-Anchor-Styles/solution.hide.css new file mode 100644 index 00000000..8c12ea5b --- /dev/null +++ b/exercises/09-Anchor-Styles/solution.hide.css @@ -0,0 +1,16 @@ +.threeDimension { + display: block; + border: 1px solid; + border-color: #aaa #000 #000 #aaa; + width: 8em; + background: #fc0; + text-decoration: none; + text-align: center; + color: black; + font-size: 22px; +} + +a.threeDimension:active { + /* your code here*/ + border-color: #000 #aaa #aaa #000; +} diff --git a/exercises/09-Anchor-Styles/styles.css b/exercises/09-Anchor-Styles/styles.css index 7eaa9bea..895dc3d6 100644 --- a/exercises/09-Anchor-Styles/styles.css +++ b/exercises/09-Anchor-Styles/styles.css @@ -8,9 +8,10 @@ text-decoration: none; text-align: center; color: black; + font-size: 22px; } a.threeDimension:active { /* your code here*/ -} \ No newline at end of file +} diff --git a/exercises/09-Anchor-Styles/tests.js b/exercises/09-Anchor-Styles/tests.js index 8e4baa92..1dea80c1 100644 --- a/exercises/09-Anchor-Styles/tests.js +++ b/exercises/09-Anchor-Styles/tests.js @@ -1,67 +1,86 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); -const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); -let cssArray=null; -jest.dontMock("fs"); +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); -describe("All the styles should be applied", function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML=html.toString(); +jest.dontMock('fs'); - //apply the styles from the stylesheet if needed +let cssArray = null; - - }); - afterEach(() => { - jest.resetModules(); - }); - - it("You should not add your rules above the existing code", function () { +describe("All the styles should be applied", () => { + const meta = document.querySelector("meta") + const title = document.querySelector('title') + const link = document.querySelector('link') + test("You should not add your rules above the existing code", () => { document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules[0].selectorText; + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules[0].selectorText; expect(cssArray).toBe(".threeDimension"); }) - it("the 'a' tag in the index.html should not be deleted", function () { + test("The tag in the index.html should not be deleted", () => { // we can read from the source code // console.log(html.toString()); - expect(html.toString().indexOf(`-1).toBeTruthy(); + expect(html.toString().indexOf(` -1).toBeTruthy(); }); - it("The border-color rule for the 'threeDimension active ' property should match the instruction color", function () { + test("The border-color rule for the 'a.threeDimension:active' selector should match the instruction color", () => { // get computed styles of any element you like // let cssArray=document.styleSheets[0].cssRules; document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules; + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules; - let orangeHoverSelector=""; - for (let i=0; i< cssArray.length; i++) { + if (cssArray[i].selectorText === "a.threeDimension:active") { + orangeHoverSelector = cssArray[i].style['border-color']; } } - expect(orangeHoverSelector).toBe("#000 #aaa #aaa #000"); + + }); + test("You should not change the default styles", () => { + // get computed styles of any element you like + // let cssArray=document.styleSheets[0].cssRules; + document.querySelector( + "head" + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules; + + let borderColor = ""; + let color = ""; + let background = ""; + let width = ""; + for (let i = 0; i < cssArray.length; i++) { + if (cssArray[i].selectorText === ".threeDimension") { + borderColor = cssArray[i].style["border-color"]; + color = cssArray[i].style['color']; + background = cssArray[i].style['background']; + width = cssArray[i].style['width']; + expect(borderColor).toBe("#aaa #000 #000 #aaa"); + expect(color).toBe("black"); + expect(background).toBe("#fc0"); + expect(width).toBe("8em"); + } + } + }); - it("You should not change the head tag", function () { - - let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("-1).toBeFalsy(); + test("You should not change the existing tag elements", () => { + let head = document.querySelector('head') + expect(head).toBeTruthy() + + expect(meta).toBeTruthy() + + let href = link.getAttribute('href') + expect(href).toBe('./styles.css') + + expect(title).toBeTruthy() }) }); diff --git a/exercises/10-Your-Own-Font/README.es.md b/exercises/10-Your-Own-Font/README.es.md index 978ca31c..dd58b215 100644 --- a/exercises/10-Your-Own-Font/README.es.md +++ b/exercises/10-Your-Own-Font/README.es.md @@ -1,18 +1,18 @@ -# `10` Tu Propia Fuente +# `10` Your Own Font -Las fuentes de Google se pueden encontrar aquí: https://fonts.google.com +Aquí puedes encontrar las fuentes de Google: https://fonts.google.com -Después de elegir su favorita, puedes usarla al vincular su 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: +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: ```Plain/Text - + ``` -Después de vincular tu fuente, debes asignar la regla CSS "font-family" a lo que quieras aplicarle la fuente, por ejemplo, un

. +Después de vincular tu fuente, debes asignar la regla CSS `font-family` a lo que quieras aplicarle la fuente, por ejemplo, un `

`. ## 📝 Instrucciones: - 1. Enlaza cualquier fuente de google que desee en el sitio web. -2. Aplica esa familia de fuentes específica a #myTitle. + +2. Aplica esa `font-family` (familia de fuentes) específica a `.myTitle`. diff --git a/exercises/10-Your-Own-Font/README.md b/exercises/10-Your-Own-Font/README.md index a872e4be..e2632833 100644 --- a/exercises/10-Your-Own-Font/README.md +++ b/exercises/10-Your-Own-Font/README.md @@ -1,18 +1,18 @@ # `10` Your Own Font -Google Fonts can be found here: https://fonts.google.com +You can find Google Fonts here: https://fonts.google.com -After you pick your favorite one, you can use it by linking your website with the URL in which the font is stored. You have to do that in the tag of the HTML document like this: +Pick your favorite one, and then use it by linking your website with the URL in which the font is stored. You have to do that in the `` tag of the HTML document like this: ```Plain/Text - + ``` -After your font is linked you need to assign the "font-family" CSS rule to whatever you want to apply the font, for example an `

`. +After your font is linked, you need to assign the `font-family` CSS rule to whatever you want to apply the font, for example an `

`. ## 📝 Instructions: - 1. Link any google-font that you like into the website. -2. Apply that specific font-family to #myTitle. + +2. Apply that specific `font-family` to `.myTitle`. diff --git a/exercises/10-Your-Own-Font/index.html b/exercises/10-Your-Own-Font/index.html index a0e7f25a..b4005187 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/10-Your-Own-Font/index.html @@ -1,15 +1,14 @@ - - - - + + + + - - - - - -

My unique font

- + + + + +

My unique font

+ diff --git a/exercises/10-Your-Own-Font/solution.hide.css b/exercises/10-Your-Own-Font/solution.hide.css new file mode 100644 index 00000000..85e3a7c3 --- /dev/null +++ b/exercises/10-Your-Own-Font/solution.hide.css @@ -0,0 +1,4 @@ +.myTitle { + /* Add your code below this line */ + font-family: "Montserrat"; /* Varies depending on the font you chose */ +} diff --git a/exercises/10-Your-Own-Font/solution.hide.html b/exercises/10-Your-Own-Font/solution.hide.html new file mode 100644 index 00000000..eeb1c059 --- /dev/null +++ b/exercises/10-Your-Own-Font/solution.hide.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + +

My unique font

+ + diff --git a/exercises/10-Your-Own-Font/styles.css b/exercises/10-Your-Own-Font/styles.css index de7160fd..0335a322 100644 --- a/exercises/10-Your-Own-Font/styles.css +++ b/exercises/10-Your-Own-Font/styles.css @@ -1,3 +1,3 @@ .myTitle { - /*your code here*/ + /* Add your code below this line */ } diff --git a/exercises/10-Your-Own-Font/tests.js b/exercises/10-Your-Own-Font/tests.js index 6109a451..f7c2460b 100644 --- a/exercises/10-Your-Own-Font/tests.js +++ b/exercises/10-Your-Own-Font/tests.js @@ -1,53 +1,44 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); -const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); - -jest.dontMock("fs"); - -describe("All the styles should be applied", function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML=html.toString(); - - //apply the styles from the stylesheet if needed - // document.querySelector( - // "head" - // ).innerHTML=``; - }); - afterEach(() => { - jest.resetModules(); - }); +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); + +jest.dontMock('fs'); + +let cssArray = null; + +describe("All the styles should be applied", ()=>{ + const link = document.querySelectorAll("link") + test("the font-family in the .myTitle should exists", ()=>{ + document.querySelector( + "head" + ).innerHTML = ``; - it("the font-family in the #myTitle should exists", function () { // get computed styles of any element you like - let cssArray=document.styleSheets[0].cssRules; - // console.log("%%% ", cssArray) - let orangeHoverSelector=""; - for (let i=0; i< cssArray.length; i++) { + if (cssArray[i].selectorText === ".myTitle") { + orangeHoverSelector = cssArray[i].style['font-family']; } } expect(orangeHoverSelector).toBeTruthy(); }); - it('the h1 tag should have a class "myTitle"', function () { + test('The h1 tag should have a class "myTitle"', ()=>{ //or use query selector to compare hoy mane scriptags do we have - const h=document.querySelector("h1"); + const h = document.querySelector("h1"); expect(h.classList.contains("myTitle")).toBeTruthy(); }); - it("The link should be included in the head tag", function () { + test("The google-font link should be included in the head tag", ()=>{ // let headContent=document.getElementsByTagName("*") - // console.log("###", headContent[1].innerHTML) - console.log("###", document.head.childNodes) - expect(document.querySelectorAll("link").length).toBe(2); + expect(link.length).toBeGreaterThanOrEqual(2); }); - it("The Head tag should not includes a Style tag", function () { - expect(html.toString().indexOf(`-1).toBeFalsy(); + test("The head tag should not include a style tag", ()=>{ + expect(html.toString().indexOf(` -1).toBeFalsy(); }); }); diff --git a/exercises/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md index 8dedafe1..d02884e6 100644 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ b/exercises/11-Font-Awesome-Icons/README.es.md @@ -1,20 +1,22 @@ -# `11` Iconos Font Awesome +# `11` Font Awesome Icons -Como desarrollador / diseñador, desea utilizar ciertos iconos para que tu sitio web sea fácil de entender; Por ejemplo, sabemos que un icono de "papelera" significa "eliminar". +Como desarrollador, querrás utilizar ciertos iconos para que tu sitio web sea fácil de entender. Por ejemplo, sabemos que el icono de "papelera" significa "eliminar". -¡Pero usar iconos puede ser frustrante y llevar mucho tiempo! porque cada icono es una imagen y trabajar con imágenes ¡es horrible! +¡Pero usar iconos puede ser frustrante y llevar mucho tiempo! Porque cada icono es una imagen y trabajar con imágenes ¡es horrible! -Font-awesome resuelve el problema de la "imagen" creando una nueva fuente: cada letra es un ícono diferente y ahora puedes importar toda la fuente en su sitio web y usar el ícono que desees. +Font Awesome resuelve el problema de la "imagen" creando una nueva fuente en donde cada letra es un icono diferente y ahora puedes importar toda la fuente a tu sitio web y usar el icono que quieras. Después de vincular tu sitio web con font-awesome, puedes usar lo siguiente para codificar e insertar un icono específico: ```html - "camera-retro" será el nombre de tu icono, -puedes encontrar todos los nombres disponibles aquí: http://fontawesome.io/icons/ + + ``` -## 📝 Instrucciones: +> *Puedes encontrar todos los iconos disponibles aquí: https://fontawesome.com/search?o=r&m=free* + +## 📝 Instrucciones: -Agrega dos elementos más a tu lista y agregua un icono diferente al comienzo de cada elemento. +Agrega dos elementos (`li`) más a tu lista y agrega un icono diferente al comienzo de cada elemento. diff --git a/exercises/11-Font-Awesome-Icons/README.md b/exercises/11-Font-Awesome-Icons/README.md index 7a03a637..f9c7c09f 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/11-Font-Awesome-Icons/README.md @@ -4,17 +4,18 @@ As a developer/designer, you want to use certain icons to make your website easy But using icons can be frustrating and time-consuming because each icon is an image and working with images is horrible! -Font-awesome solve the "image" problem by creating a new font- each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. +Font Awesome solves the "image" problem by creating a new font where each letter is a different icon and you can now import the whole font into your website and use whatever icon you want. -After linking your website with font-awesome, you can use the following to code to insert a specific icon: +After linking your website with font-awesome, you can use the following code to insert a specific icon: ```html - "camera-retro" will be the name of the icon, -you can find all the available names here: http://fontawesome.io/icons/ + + ``` -## 📝 Instructions: +> *You can find all the available icons here: https://fontawesome.com/search?o=r&m=free* +## 📝 Instructions: -Add two more items into your list and add a different icon at the beginning of each item. +1. Add two more items (`li`) into your list and add a different icon at the beginning of each item. diff --git a/exercises/11-Font-Awesome-Icons/index.html b/exercises/11-Font-Awesome-Icons/index.html index a619ff63..1401d5da 100644 --- a/exercises/11-Font-Awesome-Icons/index.html +++ b/exercises/11-Font-Awesome-Icons/index.html @@ -1,14 +1,15 @@ - - - - - - - -

-
• Hello
-

- + + + + + + + + +

+
• Hello
+

+ diff --git a/exercises/11-Font-Awesome-Icons/solution.hide.html b/exercises/11-Font-Awesome-Icons/solution.hide.html new file mode 100644 index 00000000..431e6b22 --- /dev/null +++ b/exercises/11-Font-Awesome-Icons/solution.hide.html @@ -0,0 +1,17 @@ + + + + + + + + + + +

+
• Hello
+
• Hello
+
• Hello
+

+ + diff --git a/exercises/11-Font-Awesome-Icons/styles.css b/exercises/11-Font-Awesome-Icons/styles.css index b22aedca..52fe9b9c 100644 --- a/exercises/11-Font-Awesome-Icons/styles.css +++ b/exercises/11-Font-Awesome-Icons/styles.css @@ -1,3 +1,4 @@ li { + font-size: 2.5rem; list-style: none; } diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js index 10afe9c1..b481bcfc 100644 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ b/exercises/11-Font-Awesome-Icons/tests.js @@ -1,46 +1,38 @@ -const fs = require("fs"); -const path = require("path"); -const html = fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); -jest.dontMock("fs"); +jest.dontMock('fs'); -describe("All the styles should be applied", function() { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML = html.toString(); +let cssArray = null; - //apply the styles from the stylesheet if needed - document.querySelector( - "head" - ).innerHTML = ``; - }); - afterEach(() => { - jest.resetModules(); - }); - - it("ul tag should exists", function() { +describe("All the styles should be applied", ()=>{ + const icons = document.querySelectorAll("i"); + test("The

tag should exist", ()=>{ expect(document.querySelector("ul")).toBeTruthy(); }); - it("At least 3 li tags should exist", function() { + test("At least 3
• tags should exist", ()=>{ expect(document.querySelectorAll("li").length).toBe(3); }); - it("At least 3 i tags should exist", function() { + test("At least 3 tags should exist", ()=>{ expect(document.querySelectorAll("i").length).toBe(3); }); - it(" LI innerHTML exist", function() { - const li = document.querySelectorAll("li"); + test("The tags should be inside the
• tags", ()=>{ expect(document.querySelector("li")).toBeTruthy(); + const li = document.querySelectorAll("li"); for (let i = 0; i < li.length; i++) { expect(li[i].innerHTML).toBeTruthy(); } }); - it('the i tag should have a class "fa"', function() { + test('The tags should have any Font Awesome class starting with "fa" | ex. "fa-solid"', ()=>{ //or use query selector to compare hoy mane scriptags do we have - const icon = document.querySelectorAll("i"); - expect(document.querySelector("i")).toBeTruthy(); - for (let i = 0; i < icon.length; i++) { - expect(icon[i].classList.contains("fa")).toBeTruthy(); - } + expect(icons).toBeTruthy(); + + icons.forEach(icon=>{ + let hasFa = icon.classList.toString().includes("fa-") + expect(hasFa).toBeTruthy(); + }) }); }); diff --git a/exercises/12-Relative-Length-EM-REM/README.es.md b/exercises/12-Relative-Length-EM-REM/README.es.md index 48b13c26..a10a425d 100644 --- a/exercises/12-Relative-Length-EM-REM/README.es.md +++ b/exercises/12-Relative-Length-EM-REM/README.es.md @@ -1,24 +1,30 @@ -# `12` Longitud Relativa EM, REM +# `12` Relative Length em, rem -Hasta ahora, hemos trabajado con píxeles como unidad de medida, por ejemplo, diciendo que una caja tiene 100 px de ancho. +Hasta ahora, hemos trabajado con píxeles como unidad de medida, por ejemplo, diciendo que un contenedor o caja tiene `100px` de ancho. -Hay otros tipos de unidades que no son fijas, sino relativas. Las usamos cuando queremos que el tamaño del elemento esté relacionado con otro elemento o unidad de medida. +Hay otros tipos de unidades que no son absolutas, sino relativas. Las usamos cuando queremos que el tamaño del elemento esté relacionado con otro elemento o unidad de medida. -### Ejemplo usando EM: +## Ejemplo usando em: -En este ejercicio tenemos dos encabezados

  . Ambos son

  , 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. +En este ejercicio tenemos dos encabezados `

  `. Ambos son `

  `, pero uno es más grande que el otro porque los encabezados tienen `font-size` relativos por defecto. + +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. + +## En resumen: + ++ em: Relativo al `font-size` actual del padre. + ++ rem: Relativo al `font-size` original de la página. -```Plain/Text -em: Relativo al font-size actual del padre. -rem: Relativo al font-size original de la página. -``` ## 📝 Instrucciones: -1. Proporciona un font-size de 0.8 em a ambos h2 -2. Ahora asigna un font-size de 0.8rem a ambos h3 +1. Proporciona un `font-size` de `0.8em` a ambos `h2` + +2. Ahora asigna un `font-size` de `0.8rem` a ambos `h3` + +## El resultado debería verse así: -El resultado debería verse así: - + diff --git a/exercises/12-Relative-Length-EM-REM/README.md b/exercises/12-Relative-Length-EM-REM/README.md index 009bfc87..51613b62 100644 --- a/exercises/12-Relative-Length-EM-REM/README.md +++ b/exercises/12-Relative-Length-EM-REM/README.md @@ -1,24 +1,31 @@ -# `12` Relative Length EM, REM +# `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 `

  ` headings. They are both `

  `, 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. +## Example using em: + +In this exercise we have two `

  ` headings. They are both `

  `, but one is bigger than the other because headings have relative font-sizes by default. + +Since the second `div` has a bigger based `font-size`, then the heading resizes accordingly. + +## In short: + ++ em: Relative to the current `font-size` of the parent. + ++ rem: Relative to the original `font-size` of the page. -```Plain/Text -em: Relative to the current font-size of the parent. -rem: Relative to the original font-size of the page. -``` ## 📝 Instructions: -1. Give a font-size of 0.8em to both h2's -2. Now give a font-size of 0.8rem to both h3's +1. Give a `font-size` of `0.8em` to both `h2`'s + +2. Now give a `font-size` of `0.8rem` to both `h3`'s + +## The result should look like this: -The result should look like this: - + diff --git a/exercises/12-Relative-Length-EM-REM/index.html b/exercises/12-Relative-Length-EM-REM/index.html index 60a98594..f4d745fd 100644 --- a/exercises/12-Relative-Length-EM-REM/index.html +++ b/exercises/12-Relative-Length-EM-REM/index.html @@ -12,6 +12,7 @@

  First h2 heading

  First h3 heading

  Here is some nice fake content

+

Second h2 heading

Second h3 heading

diff --git a/exercises/12-Relative-Length-EM-REM/solution.hide.css b/exercises/12-Relative-Length-EM-REM/solution.hide.css new file mode 100644 index 00000000..eeb04334 --- /dev/null +++ b/exercises/12-Relative-Length-EM-REM/solution.hide.css @@ -0,0 +1,15 @@ +#my-first-div { + font-size: 15px; +} +#the-second-one { + font-size: 25px; +} + +/* YOUR CODE BELOW THIS LINE */ +h2{ + font-size: 0.8em; +} + +h3{ + font-size: 0.8rem; +} \ No newline at end of file diff --git a/exercises/12-Relative-Length-EM-REM/tests.js b/exercises/12-Relative-Length-EM-REM/tests.js index 33fd71a0..326eb9b0 100644 --- a/exercises/12-Relative-Length-EM-REM/tests.js +++ b/exercises/12-Relative-Length-EM-REM/tests.js @@ -1,68 +1,43 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); -const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); - -jest.dontMock("fs"); - -describe("All the styles should be applied", function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML=html.toString(); - - //apply the styles from the stylesheet if needed - - }); - afterEach(() => { - jest.resetModules(); - }); - - it("The H2 Tag should have a font-size: 0.8em", function () { +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); + +jest.dontMock('fs'); + +describe("All the styles should be applied", ()=>{ + const meta = document.querySelector("meta") + const title = document.querySelector('title') + const link = document.querySelector('link') + test("The

tag should have a font-size: 0.8em", ()=>{ // get computed styles of any element you like document.querySelector( "head" - ).innerHTML=``; - const h2Tag=document.querySelector("h2"); - var styles=window.getComputedStyle(h2Tag); + ).innerHTML = ``; + const h2Tag = document.querySelector("h2"); + var styles = window.getComputedStyle(h2Tag); expect(styles["font-size"]).toBe("0.8em"); }); - it("The H3 Tag should haave a font-size: 0.8rem", function () { + test("The

tag should have a font-size: 0.8rem", ()=>{ // get computed styles of any element you like document.querySelector( "head" - ).innerHTML=``; - const h3Tag=document.querySelector("h3"); - var styles=window.getComputedStyle(h3Tag); + ).innerHTML = ``; + const h3Tag = document.querySelector("h3"); + var styles = window.getComputedStyle(h3Tag); expect(styles["font-size"]).toBe("0.8rem"); }); - it("You should add your rules below the existing code", function () { - document.querySelector( - "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules[0].selectorText; + test("You should not change the existing tag elements", ()=>{ + let head = document.querySelector('head') + expect(head).toBeTruthy() - expect(cssArray).toBe("#my-first-div"); - } - ) - it("You should add your rules below the existing code", function () { - document.querySelector( - "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules[1].selectorText; - expect(cssArray).toBe("#the-second-one"); - } - ) - it("You should not change the head tag", function () { + expect(meta).toBeTruthy() + + let href = link.getAttribute('href') + expect(href).toBe('./styles.css') - let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("-1).toBeFalsy(); + expect(title).toBeTruthy() }) }); diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/13-Anchor-Like-Button/README.es.md index d9291540..998e9ba7 100644 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ b/exercises/13-Anchor-Like-Button/README.es.md @@ -1,21 +1,25 @@ -# `13` Enlace (anchor) como botón +# `13` Anchor Like Button -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 su 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. Encuentra y aplica el color: usa el selector de color para encontrar el color y aplicar el background de ese color. -4. Eliminar subrayado: establece text-decoration a none -5. Establecer el color del texto en blanco +1. Haz que se vea como una caja: establece el `padding` en `10px`. - +2. Bordes redondeados: establece el `border-radius` en `4px`. -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 +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. Eliminar subrayado: establece `text-decoration` a `none`. -1. Dentro del selector de hover: cambie el fondo del botón a un color naranja más oscuro. +5. Establece el color del texto a 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* + +6. Dentro del selector `:hover` cambia el fondo del botón a `darkorange`. + +## 💻 Resultado esperado: + + diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md index 5ef9e812..b5002e2f 100644 --- a/exercises/13-Anchor-Like-Button/README.md +++ b/exercises/13-Anchor-Like-Button/README.md @@ -1,21 +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 -3. 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. Set the color of the text to white +2. Rounded borders: set `border-radius` to `4px`. +3. The `background` should be `orange` when not hovered, and `darkorange` on hover (`:hover`). - +4. Remove underline: set `text-decoration` to `none`. -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 +5. 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* -1.Inside of the :hover selector change the background of the button to a darker orange. +6. Inside of the `:hover` selector change the background of the button to `darkorange`. +## 💻 Expected result: + + diff --git a/exercises/13-Anchor-Like-Button/solution.hide.css b/exercises/13-Anchor-Like-Button/solution.hide.css new file mode 100644 index 00000000..3e80d404 --- /dev/null +++ b/exercises/13-Anchor-Like-Button/solution.hide.css @@ -0,0 +1,14 @@ +.orange-btn { + display: inline-block; + /* your code below */ + padding: 10px; + border-radius: 4px; + text-decoration: none; + color: white; + background: orange; +} + +.orange-btn:hover { + /* 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 index 93996cbd..76fd5b9c 100644 --- a/exercises/13-Anchor-Like-Button/styles.css +++ b/exercises/13-Anchor-Like-Button/styles.css @@ -1,7 +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 index a3de631a..1006a565 100644 --- a/exercises/13-Anchor-Like-Button/tests.js +++ b/exercises/13-Anchor-Like-Button/tests.js @@ -1,111 +1,62 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); -const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); - - -jest.dontMock("fs"); - - - -describe("All the styles should be applied", function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML=html.toString(); - - - }); - afterEach(() => { - jest.resetModules(); - }); - - it("the padding should be '10px'", function () { +const fs = require('fs'); +const path = require('path'); +const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +document.documentElement.innerHTML = html.toString(); + +jest.dontMock('fs'); + +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'", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let divTag=document.querySelector(".orange-btn"); - let classTagStyles=window.getComputedStyle(divTag); + ).innerHTML = ``; + let divTag = document.querySelector(".orange-btn"); + let classTagStyles = window.getComputedStyle(divTag); expect(classTagStyles["padding"]).toBe("10px"); }); - it("the border radius should be '4px'", function () { + test("The border-radius should be '4px'", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let divTag=document.querySelector(".orange-btn"); - let classTagStyles=window.getComputedStyle(divTag); + ).innerHTML = ``; + let divTag = document.querySelector(".orange-btn"); + let classTagStyles = window.getComputedStyle(divTag); expect(classTagStyles["border-radius"]).toBe("4px"); }); - it("the border should be '1px solid #ffffff;'", function () { - document.querySelector( - "head" - - ).innerHTML=``; - let divTag=document.querySelector(".orange-btn"); - let classTagStyles=window.getComputedStyle(divTag); - expect(classTagStyles["border"]).toBe("1px solid #ffffff"); - }); - it("the background should be 'rgb(255, 153, 51)'", function () { + test("The underline should be removed", ()=>{ document.querySelector( "head" - ).innerHTML=``; - let divTag=document.querySelector(".orange-btn"); - let classTagStyles=window.getComputedStyle(divTag); - expect(classTagStyles["background"]).toBe("rgb(255, 153, 51)"); - }); - it("the underline should to be removed", function () { - document.querySelector( - "head" - - ).innerHTML=``; - let divTag=document.querySelector(".orange-btn"); - let classTagStyles=window.getComputedStyle(divTag); + ).innerHTML = ``; + let divTag = document.querySelector(".orange-btn"); + let classTagStyles = window.getComputedStyle(divTag); expect(classTagStyles["text-decoration"]).toBe("none"); }); - it("The mouse hover property should be #cc7a00", function () { - // get computed styles of any element you like - document.querySelector( - "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules; - let orangeHoverSelector=""; - for (let i=0; i{ document.querySelector( "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules[0].selectorText; + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules[0].selectorText; expect(cssArray).toBe(".orange-btn"); } ) -it("You should not change the head tag", function () { - - let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("-1).toBeFalsy(); - - + test("You should not change the existing tag elements", ()=>{ + let head = document.querySelector('head') + expect(head).toBeTruthy() + expect(meta).toBeTruthy() + let href = link.getAttribute('href') + expect(href).toBe('./styles.css') + expect(title).toBeTruthy() }) }); diff --git a/learn.json b/learn.json index eb6139f0..c06fdf38 100644 --- a/learn.json +++ b/learn.json @@ -4,11 +4,24 @@ "skills": ["css-styling"], "preview": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/master/preview.png?raw=true", "repository": "https://github.com/4GeeksAcademy/css-tutorial-exercises-course", - "title": "Learn CSS Interactively", + "title": { + "us": "Learn CSS Interactively", + "es": "Aprende CSS Interactivamente" + }, "intro": "https://www.youtube.com/watch?v=BDKdUPDez-U", - "description": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises.", + "description": { + "us": "Learn CSS with an interactive and auto-graded tutorial with dozens of exercises.", + "es": "Aprende CSS con una docena de ejercicios interactivos y auto-corregidos" + }, "duration": 8, "difficulty": "easy", - "video-solutions": true, - "graded": true -} \ No newline at end of file + "videoSolutions": true, + "bugsLink": "https://github.com/learnpack/learnpack/issues/new", + "projectType": "tutorial", + "graded": true, + "disabledActions": [], + "disableGrading": false, + "editor": { + "version": "1.0.73" + } +}