-``` - -La clase `card` contiene las reglas de estilo para hacer que el div se vea como una carta: bordes, ancho, etc. - -La clase `spades` contienes las reglas de estilo requeridas para convertir la carta a la pinta de picas (negra con el símbolo de picas). - -Hay dos posibles clases de palos/pintas que puedes aplicar al elemento html y hará que se vea como una carta de poker real. - -## 📝 Instrucciones: - -Remmplaza la propiedad `spades` de la clase del `

`. diff --git a/exercises/05-class-selector/README.md b/exercises/05-class-selector/README.md new file mode 100644 index 00000000..eea336a9 --- /dev/null +++ b/exercises/05-class-selector/README.md @@ -0,0 +1,29 @@ +--- +tutorial: "https://www.youtube.com/watch?v=moLgdg7x84U" +--- + +# `05` Class Selector + +There are many ways to select HTML elements to apply styles to them, so far we have only used the `tag` selector, so let's talk about the `.class` selector: + +## `.class` Selector + +It is the most popular CSS selector, you will probably use it every 5 minutes. + +Use the class property of the HTML element to select it. Styling rules will apply to all elements with the same class value + +```css +.small{ + font-size: 9px; +} +``` + +*Any HTML tag with the `class="small"` will have a font-size of `9px`.* + +## 📝 Instructions: + +1. Right now there is a class selected on the CSS that is called `b-blue`. + +2. Please apply that class to both of the HTML `

` tags. + + diff --git a/exercises/04-Class-Selector/index.html b/exercises/05-class-selector/index.html similarity index 79% rename from exercises/04-Class-Selector/index.html rename to exercises/05-class-selector/index.html index e3abd1bd..03662721 100644 --- a/exercises/04-Class-Selector/index.html +++ b/exercises/05-class-selector/index.html @@ -2,9 +2,7 @@ - - 04 Class selector - + 05 Class selector diff --git a/exercises/05-class-selector/solution.hide.html b/exercises/05-class-selector/solution.hide.html new file mode 100644 index 00000000..b9223582 --- /dev/null +++ b/exercises/05-class-selector/solution.hide.html @@ -0,0 +1,12 @@ + + + + + 05 Class selector + + + +

Hello!

World!

+ + diff --git a/exercises/04-Class-Selector/styles.css b/exercises/05-class-selector/styles.css similarity index 100% rename from exercises/04-Class-Selector/styles.css rename to exercises/05-class-selector/styles.css diff --git a/exercises/05-class-selector/test.js b/exercises/05-class-selector/test.js new file mode 100644 index 00000000..36108cbd --- /dev/null +++ b/exercises/05-class-selector/test.js @@ -0,0 +1,40 @@ +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("Both

tags should have a blue background", () => { + const body = document.querySelector("body") + const p = document.querySelectorAll("p"); + 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) + + let title = head.querySelector('title').innerHTML + expect(title).toBe('05 Class selector') + }); + + test("The tag should not contain any inline style", () => { + document.querySelector( + "head" + ).innerHTML = ``; + let emptyBodyInlineStyle = {}; + expect(body.style._values).toEqual(emptyBodyInlineStyle) + }); + + test("There should be two

tags", () => { + expect(p.length).toBe(2) + }); + test("Both

tags should have a class name 'b-blue'", () => { + p.forEach(e=>{ + let eClass = e.getAttribute("class"); + expect(eClass).toBe("b-blue") + }) + }); +}); diff --git a/exercises/05.1-combined-rules/README.es.md b/exercises/05.1-combined-rules/README.es.md new file mode 100644 index 00000000..8e735e07 --- /dev/null +++ b/exercises/05.1-combined-rules/README.es.md @@ -0,0 +1,42 @@ +--- +tutorial: "https://www.youtube.com/watch?v=NYlPhkmqgmU" +--- + +# `05.1` Combined Rules + +Los archivos CSS ocupan espacio en tu servidor y también tardan en descargarse (como todo); es otro documento de texto que el navegador debe descargar antes de mostrar la página, por lo que es importante mantener el documento CSS lo más pequeño posible. + +Una forma de hacerlo es combinando varias propiedades en una, como con `border`: + +```css +border-color: black; +border-style: solid; +border-width: 1px; +``` + +Las propiedades de border se pueden consolidar en una sola línea así: + +```css +border: black 1px solid; +``` + +## 📝 Instrucciones: + + +1. Combina las 4 reglas de padding en una sola utilizando la regla `padding`. + +2. Combina todas las reglas de background en una sola línea usando la regla `background`. + +*Las propiedades `background-position` y `background-size` pueden usar el mismo tipo de datos por lo que entrarán en conflicto, así que en vez de separar estas propiedades con un **espacio**, debes separarlas con una barra `/` de esta forma:* + +```css +background: 50px / cover +``` + +Donde el valor de la izquierda de la barra `/` es la propiedad `background-position` y la derecha es el `background-size`. + +## 💡 Pistas: + +- Cómo usar `background`: https://www.w3schools.com/cssref/css3_pr_background.php + +- Cómo usar `padding`: https://www.w3schools.com/css/css_padding.asp diff --git a/exercises/05.1-combined-rules/README.md b/exercises/05.1-combined-rules/README.md new file mode 100644 index 00000000..55bd0c87 --- /dev/null +++ b/exercises/05.1-combined-rules/README.md @@ -0,0 +1,41 @@ +--- +tutorial: "https://www.youtube.com/watch?v=VTOwd98T6FY" +--- + +# `05.1` Combined Rules + +CSS files take up space on your server and also take time to download (like everything); it is yet another text document that the browser has to download before rendering the page, which is why it's important to keep the CSS document as small as possible. + +One way to do that is by combining several properties into one, such as with `border`: + +```css +border-color: black; +border-style: solid; +border-width: 1px; +``` + +Border's properties can be consolidated into a single line like this: + +```css +border: black 1px solid; +``` + +## 📝 Instructions: + +1. Combine the 4 padding rules into only one using the `padding` rule. + +2. Combine all background rules into only one using the `background` rule. + +*The `background-position` and the `background-size` properties will conflict because they can handle the same type of values, so instead of separating these properties with a `space` you must separate them with a forward slash `/` as follows:* + +```css +background: 50px / cover +``` + +Where the left side value of the forward slash `/` is the `background-position` rule and the right value is the `background-size` rule. + +## 💡 Hints: + +- How to use `background`: https://www.w3schools.com/cssref/css3_pr_background.php + +- How to use `padding`: https://www.w3schools.com/css/css_padding.asp diff --git a/exercises/04.1-Combined-Rules/index.html b/exercises/05.1-combined-rules/index.html similarity index 79% rename from exercises/04.1-Combined-Rules/index.html rename to exercises/05.1-combined-rules/index.html index 2af5a24c..bca34a30 100644 --- a/exercises/04.1-Combined-Rules/index.html +++ b/exercises/05.1-combined-rules/index.html @@ -2,9 +2,7 @@ - - 04 Combined Rules - + 05.1 Combined Rules diff --git a/exercises/05.1-combined-rules/solution.hide.css b/exercises/05.1-combined-rules/solution.hide.css new file mode 100644 index 00000000..fb1bc3ee --- /dev/null +++ b/exercises/05.1-combined-rules/solution.hide.css @@ -0,0 +1,9 @@ +.myBox { + width: 50px; + height: 50px; + padding: 10px 190px 50px 30px; + + background: rgb(189, 189, 189) + url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true) + no-repeat 100px / contain; +} diff --git a/exercises/04.1-Combined-Rules/styles.css b/exercises/05.1-combined-rules/styles.css similarity index 100% rename from exercises/04.1-Combined-Rules/styles.css rename to exercises/05.1-combined-rules/styles.css diff --git a/exercises/05.1-combined-rules/tests.js b/exercises/05.1-combined-rules/tests.js new file mode 100644 index 00000000..e325ce5f --- /dev/null +++ b/exercises/05.1-combined-rules/tests.js @@ -0,0 +1,128 @@ +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 body = document.querySelector("body"); + const link = document.querySelector("link"); + const title = document.querySelector('title'); + + test("The tag should not contain any inline style", ()=> { + document.querySelector( + "head" + ).innerHTML = ``; + let emptyBodyInlineStyle = {}; + expect(body.style._values).toEqual(emptyBodyInlineStyle); + }); + + test("The width should be '50px'", ()=> { + // 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 < cssArray.length; i++) { + if (cssArray[i].selectorText === ".myBox") { + orangeHoverSelector = cssArray[i].style.width; + } + } + + expect(orangeHoverSelector).toBe('50px'); + }); + + test("The height should be '50px'", ()=> { + // 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 < cssArray.length; i++) { + if (cssArray[i].selectorText === ".myBox") { + orangeHoverSelector = cssArray[i].style.height; + } + } + + expect(orangeHoverSelector).toBe('50px'); + }); + + test("The background should include the shorthand property", ()=> { + document.querySelector( + "head" + ).innerHTML = ``; + + let cssArray = document.styleSheets[0].cssRules; + let orangeHoverSelector = ""; + let backImg = ""; + let backColor = ""; + let backPos = ""; + let backRepeat = ""; + for (let i = 0; i < cssArray.length; i++) { + if (cssArray[i].selectorText === ".myBox") { + orangeHoverSelector = cssArray[i].style.background; + backImg = cssArray[i].style['background-image']; + backColor = cssArray[i].style['background-color']; + backPos = cssArray[i].style['background-position-x']; + backRepeat = cssArray[i].style['background-repeat']; + } + } + expect(backColor).toBeFalsy(); + expect(backImg).toBeFalsy(); + expect(backPos).toBeFalsy(); + expect(backRepeat).toBeFalsy(); + expect(orangeHoverSelector).toContain('rgb(189, 189, 189)'); + expect(orangeHoverSelector).toContain('no-repeat'); + expect(orangeHoverSelector).toContain('100px'); + expect(orangeHoverSelector).toContain('url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true)'); + }); + + test("The padding should include the shorthand property in the right order (top, right, bottom, left)", ()=> { + document.querySelector( + "head" + ).innerHTML = ``; + + let cssArray = document.styleSheets[0].cssRules; + // console.log("$$$:", cssArray) + let orangeHoverSelector = ""; + let padTop = ""; + let padRight = ""; + let padBottom = ""; + let padLeft = ""; + for (let i = 0; i < cssArray.length; i++) { + if (cssArray[i].selectorText === ".myBox") { + orangeHoverSelector = cssArray[i].style.padding; + padTop = cssArray[i].style['padding-top'] + padRight = cssArray[i].style['padding-right'] + padBottom = cssArray[i].style['padding-bottom'] + padLeft = cssArray[i].style['padding-left'] + } + } + expect(orangeHoverSelector).toBe('10px 190px 50px 30px'); + expect(padTop).toBeFalsy(); + expect(padRight).toBeFalsy(); + expect(padBottom).toBeFalsy(); + expect(padLeft).toBeFalsy(); + }); + + 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') + + expect(title).toBeTruthy() + }) +}); diff --git a/exercises/05.2-apply-several-classes/README.es.md b/exercises/05.2-apply-several-classes/README.es.md new file mode 100644 index 00000000..89efee60 --- /dev/null +++ b/exercises/05.2-apply-several-classes/README.es.md @@ -0,0 +1,28 @@ +--- +tutorial: "https://www.youtube.com/watch?v=CaSytmRcVGM" +--- + + +# `05.2` Apply several classes + +Hemos preparado una pequeña hoja de estilos CSS que contiene estilos CSS para replicar cartas de poker. + +Vamos a usar dos clases y aplicarlas al mismo elemento `

`. + +```html +

+``` + +La clase `card` contiene las reglas de estilo para hacer que el div se vea como una carta: bordes, ancho, alto, etc. + +La clase `spades` contiene las reglas de estilo requeridas para convertir la carta a la pinta de picas (negra con el símbolo de picas). + +Hay dos posibles clases de palos/pintas que puedes aplicar al elemento html y hará que se vea como una carta de poker real. + +## 📝 Instrucciones: + +1. Reemplaza la propiedad `spades` de la clase del `

` por la clase `heart` y observa los resultados. + +## 💻 Resultado esperado: + +![Poker Card Heart](../../.learn/assets/04.2-1.png?raw=true) diff --git a/exercises/04.2-Apply-several-classes/README.md b/exercises/05.2-apply-several-classes/README.md similarity index 62% rename from exercises/04.2-Apply-several-classes/README.md rename to exercises/05.2-apply-several-classes/README.md index 2bcfbd77..009f5997 100644 --- a/exercises/04.2-Apply-several-classes/README.md +++ b/exercises/05.2-apply-several-classes/README.md @@ -1,27 +1,27 @@ --- -tutorial: "https://www.youtube.com/watch?v=da4tJDx48CY" +tutorial: "https://www.youtube.com/watch?v=RISEpELEzEk" --- -# `04.2` Apply several classes +# `05.2` Apply several classes We have prepared a small CSS Stylesheet that contains the CSS styles to replicate poker cards. -We are going to use to classes and apply them to the same `

` element. +We are going to use two classes and apply them to the same `

` element. ```html

``` -The class `card` contains the styling rules to make the div look like a card: Borders, Height, Width, etc. +The class `card` contains the styling rules to make the div look like a card: borders, height, width, etc. + The class `spades` contains the styling rules needed to make the card turn into a spades suite (black and with a spades symbol). There are two possible suite classes you can apply to the html element to make it look like a real poker card. ## 📝 Instructions: -Replace the class property `spades` of the `

` with the class `heart` and look at the results. - +1. Replace the class property `spades` of the `

` with the class `heart` and look at the results. -## Expected result: +## 💻 Expected result: ![Poker Card Heart](../../.learn/assets/04.2-1.png?raw=true) diff --git a/exercises/04.2-Apply-several-classes/index.html b/exercises/05.2-apply-several-classes/index.html similarity index 78% rename from exercises/04.2-Apply-several-classes/index.html rename to exercises/05.2-apply-several-classes/index.html index a64723af..3a293815 100644 --- a/exercises/04.2-Apply-several-classes/index.html +++ b/exercises/05.2-apply-several-classes/index.html @@ -2,9 +2,7 @@ - - 04 Class selector - + 04.2 Apply several classes diff --git a/exercises/05.2-apply-several-classes/solution.hide.html b/exercises/05.2-apply-several-classes/solution.hide.html new file mode 100644 index 00000000..3ded6c25 --- /dev/null +++ b/exercises/05.2-apply-several-classes/solution.hide.html @@ -0,0 +1,11 @@ + + + + + 05.2 Apply several classes + + + +

+ + diff --git a/exercises/04.2-Apply-several-classes/styles.css b/exercises/05.2-apply-several-classes/styles.css similarity index 67% rename from exercises/04.2-Apply-several-classes/styles.css rename to exercises/05.2-apply-several-classes/styles.css index efacee56..9995d367 100644 --- a/exercises/04.2-Apply-several-classes/styles.css +++ b/exercises/05.2-apply-several-classes/styles.css @@ -1,15 +1,14 @@ .card { - display: inline-block; - width: 50px; - height: 80px; - position: relative; + width: 150px; + height: 240px; border: 1px solid black; text-align: center; - line-height: 80px; + line-height: 240px; border-radius: 5px; + font-size: 1.5rem; } .card:after { - font-size: 70%; + font-size: 80%; font-weight: bold; } diff --git a/exercises/05.2-apply-several-classes/test.js b/exercises/05.2-apply-several-classes/test.js new file mode 100644 index 00000000..cb04bc16 --- /dev/null +++ b/exercises/05.2-apply-several-classes/test.js @@ -0,0 +1,18 @@ +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"); + +describe("You should change the class on the div tag", () => { + const div = document.querySelector("div"); + + test('The

should NOT have the "spades" class', () => { + expect(div.classList.contains("spade")).toBe(false); + }); + + test('The

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

You are able to complete the exercises by yourself.
You understand what the teacher is talking about
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 -

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

The learning essay

3 reasons you know 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. +

You are able to complete the exercises by yourself.
You understand what the teacher is talking about.
You are able to have conversations about the topic.

3 reasons you love what you are learning

Time passes fast.
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's better than watching videos of cats? + click here +

+ + diff --git a/exercises/07-practicing-rules/solution.hide.css b/exercises/07-practicing-rules/solution.hide.css new file mode 100644 index 00000000..4026152e --- /dev/null +++ b/exercises/07-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/07-practicing-rules/styles.css b/exercises/07-practicing-rules/styles.css new file mode 100644 index 00000000..9a7fae86 --- /dev/null +++ b/exercises/07-practicing-rules/styles.css @@ -0,0 +1 @@ +/* add your styles here */ diff --git a/exercises/07-practicing-rules/tests.js b/exercises/07-practicing-rules/tests.js new file mode 100644 index 00000000..5c375d55 --- /dev/null +++ b/exercises/07-practicing-rules/tests.js @@ -0,0 +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"); +document.documentElement.innerHTML = html.toString(); + +jest.dontMock('fs'); + +describe("All the styles should be applied", () => { + let meta = document.querySelector("meta") + let link = document.querySelector("link") + let title = document.querySelector('title') + + test("The background should match", () => { + document.querySelector( + "head" + ).innerHTML = ``; + let body = document.querySelector("body"); + let styles = window.getComputedStyle(body); + expect(styles["background"]).toBe( + `url(../../.learn/assets/background-vertical.jpg?raw=true) repeat-y` + ); + }); + 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"].toLowerCase()).toBe("\"times new roman\""); + }); + test("The padding-left should be '20px'", () => { + document.querySelector( + "head" + ).innerHTML = ``; + let body = document.querySelector("body"); + let styles = window.getComputedStyle(body); + expect(styles["padding-left"]).toBe("20px"); + }); + test("The font-family in the

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

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

tag should be 'underline'", () => { + document.querySelector( + "head" + ).innerHTML = ``; + // get computed styles of any element you like + const h2Tag = document.querySelector("h2"); + let h2TagStyles = window.getComputedStyle(h2Tag); + expect(h2TagStyles["text-decoration"]).toBe("underline"); + }); + test("The padding in the p tag should be '5px'", () => { + document.querySelector( + "head" + ).innerHTML = ``; + // get computed styles of any element you like + const idTag = document.querySelector("#id1"); + let idTagStyles = window.getComputedStyle(idTag); + expect(idTagStyles["padding"]).toBe("5px"); + }); + + test("The a:hover underline should be removed", () => { + document.querySelector( + "head" + ).innerHTML = ``; + 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"); + }); + + test("The a:hover color should be green", () => { + document.querySelector( + "head" + ).innerHTML = ``; + 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.color; + } + } + expect(orangeHoverSelector).toBe('green'); + }); + 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') + + expect(title).toBeTruthy() + }) + +}); diff --git a/exercises/08-Rounded-Image/README.es.md b/exercises/08-Rounded-Image/README.es.md deleted file mode 100644 index 956bcbb7..00000000 --- a/exercises/08-Rounded-Image/README.es.md +++ /dev/null @@ -1,21 +0,0 @@ -# `08` Imagen Redondeada - -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 generalmente tienen diferente altura y ancho no se verán como un círculo, se verán como óvalos: - -![Example Image](../../.learn/assets/08-1.png?raw=true) - -## 📝 Instrucciones: - -1. Usa `border-radius`. - -2. Adicionalmente a `border-radius`, tenemos que también utilizar la propiedad `object-fit`, [aqui hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). - -## 💡 Pista: - -+ Si la imagen es más grande que el `div` y quieres centrarla o enfocarte en una zona en particular puedes utilizar `object-position`. - -+ En este articulo puedes leer más [sobre la propiedad object fit](https://css-tricks.com/on-object-fit-and-object-position/) diff --git a/exercises/08-Rounded-Image/README.md b/exercises/08-Rounded-Image/README.md deleted file mode 100644 index 7fedd48e..00000000 --- a/exercises/08-Rounded-Image/README.md +++ /dev/null @@ -1,21 +0,0 @@ -# `08` Rounded Image - -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: - -![Example Image](../../.learn/assets/08-1.png?raw=true) - -## 📝 Instructions: - -1. Use `border-radius`. - -2. 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). - - -## 💡 Hint: - -+ If the image ends up being bigger than the `div` (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/) - diff --git a/exercises/08-Rounded-Image/tests.js b/exercises/08-Rounded-Image/tests.js deleted file mode 100644 index fc2abaa5..00000000 --- a/exercises/08-Rounded-Image/tests.js +++ /dev/null @@ -1,99 +0,0 @@ -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 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 - 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"); - }); - it("the background position y 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-y"]).toBe("center"); - }); - it("the background image in the div Tag should exists", 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-image"]).toBeTruthy(); - }); - it("You should not change the existing head 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) - }) -}); diff --git a/exercises/08-very-specific-rules/README.es.md b/exercises/08-very-specific-rules/README.es.md new file mode 100644 index 00000000..dd02d734 --- /dev/null +++ b/exercises/08-very-specific-rules/README.es.md @@ -0,0 +1,21 @@ +# `08` Very Specific Rules + +## 🔎 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. + +## 📝 Instrucciones: + +1. Establece el color de texto `ul li` a rojo (`red`) (anula los conflictos siendo más específico). + +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`. + +![Resultado esperado](../../.learn/assets/07-1.png?raw=true) + +> Importante: NO debes modificar el archivo `index.html`. + +## 💡 Pista: + +- El atributo `!important` ayuda a sobreescribir estilos. diff --git a/exercises/08-very-specific-rules/README.md b/exercises/08-very-specific-rules/README.md new file mode 100644 index 00000000..91bcaf0c --- /dev/null +++ b/exercises/08-very-specific-rules/README.md @@ -0,0 +1,25 @@ +--- +tutorial: "https://www.youtube.com/watch?v=2YkLDRZFk40" +--- + +# `08` Very Specific Rules + +## 🔎 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. + +## 📝 Instructions: + +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`. + +![Expected result](../../.learn/assets/07-1.png?raw=true) + +> Important: You should NOT modify the `index.html` file. + +## 💡 Hint: + +- The `!important` attribute helps to override other attributes. diff --git a/exercises/07-Very-Specific-Rules/index.html b/exercises/08-very-specific-rules/index.html similarity index 65% rename from exercises/07-Very-Specific-Rules/index.html rename to exercises/08-very-specific-rules/index.html index 9c691446..3909949d 100644 --- a/exercises/07-Very-Specific-Rules/index.html +++ b/exercises/08-very-specific-rules/index.html @@ -4,28 +4,28 @@ - 07 Very Specific Rules + 08 Very Specific Rules
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.

You are able to complete the exercises by yourself.

You understand what the teacher is talking about
-
Your are able to have conversations about the topic
+
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/08-very-specific-rules/solution.hide.css b/exercises/08-very-specific-rules/solution.hide.css new file mode 100644 index 00000000..232aa480 --- /dev/null +++ b/exercises/08-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/08-very-specific-rules/styles.css b/exercises/08-very-specific-rules/styles.css new file mode 100644 index 00000000..164b694b --- /dev/null +++ b/exercises/08-very-specific-rules/styles.css @@ -0,0 +1,15 @@ +/ Insert your code here / + +/ 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/08-very-specific-rules/tests.js b/exercises/08-very-specific-rules/tests.js new file mode 100644 index 00000000..f141c357 --- /dev/null +++ b/exercises/08-very-specific-rules/tests.js @@ -0,0 +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"); +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; + let color = "" + + for (let i = 0; i < cssArray.length; i++) { + if (cssArray[i].selectorText === "ul li" || cssArray[i].selectorText === "ul > li") { + color = cssArray[i].cssText; + } + } + let reg = new RegExp(/color:\sred\s!important\s;/gm) + + expect(reg.test(color.toLowerCase())).toBeTruthy(); + }); + + test("The ol second element background should be green", ()=>{ + document.querySelector( + "head" + ).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']; + + } + + if(background){ + background = background.toLowerCase() + } + + if(backgroundColor){ + backgroundColor = backgroundColor.toLowerCase() + } + + } expect((background && background === 'green') || (backgroundColor && backgroundColor === 'green')).toBeTruthy(); + }) + + test("The odd rows of the table should have yellow background", ()=>{ + document.querySelector( + "head" + ).innerHTML = ``; + 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((background && background.toLowerCase() === "yellow") || (backgroundColor && backgroundColor.toLowerCase() === "yellow")).toBeTruthy(); + }) + + 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; + expect(cssArray).toBe("ul li,\nol li"); + expect(cssBody).toBe("body"); + }) + + 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() + }) + +}); diff --git a/exercises/09-Anchor-Styles/README.es.md b/exercises/09-Anchor-Styles/README.es.md deleted file mode 100644 index b6625646..00000000 --- a/exercises/09-Anchor-Styles/README.es.md +++ /dev/null @@ -1,21 +0,0 @@ -# `09` Estilos de enlaces (anchor) 3D - -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: - -![Example Image](../../.learn/assets/09-1.png?raw=true) - -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: - -```css -a:active { - / aquí puedes especificar cualquier regla de css que aplique al anchor mientras se presiona' / -} -``` - -## 📝 Instrucciones: - -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/tests.js b/exercises/09-Anchor-Styles/tests.js deleted file mode 100644 index cab43954..00000000 --- a/exercises/09-Anchor-Styles/tests.js +++ /dev/null @@ -1,69 +0,0 @@ -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"); - -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("You should not add your rules above the existing code", function () { - document.querySelector( - "head" - ).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 () { - // we can read from the source code - // console.log(html.toString()); - expect(html.toString().indexOf(`-1).toBeTruthy(); - }); - - - it("The border-color rule for the 'threeDimension active ' property should match the instruction color", function () { - // 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 orangeHoverSelector=""; - for (let i=0; i - 08 Rounded Image + 09 Rounded Image diff --git a/exercises/09-rounded-image/solution.hide.css b/exercises/09-rounded-image/solution.hide.css new file mode 100644 index 00000000..86a38c22 --- /dev/null +++ b/exercises/09-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/styles.css b/exercises/09-rounded-image/styles.css similarity index 100% rename from exercises/08-Rounded-Image/styles.css rename to exercises/09-rounded-image/styles.css diff --git a/exercises/09-rounded-image/tests.js b/exercises/09-rounded-image/tests.js new file mode 100644 index 00000000..13cd170e --- /dev/null +++ b/exercises/09-rounded-image/tests.js @@ -0,0 +1,74 @@ +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') + + const img = document.querySelector(".rounded") + + test("The tag should exist", () => { + expect(img).toBeTruthy(); + }) + + test("The width of the tag should be equal to its height and vice versa", () => { + document.querySelector( + "head" + ).innerHTML = ``; + + 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); + }); + + test("The object-fit value of the tag should be 'cover'", () => { + document.querySelector( + "head" + ).innerHTML = ``; + + let imgStyle = window.getComputedStyle(img); + expect(imgStyle["object-fit"]).toBe("cover"); + }); + + test("The object-position value of the tag should be 'top'", () => { + document.querySelector( + "head" + ).innerHTML = ``; + + let imgStyle = window.getComputedStyle(img); + expect(imgStyle["object-position"]).toBe("top"); + }); + + 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/index.html b/exercises/10-Your-Own-Font/index.html deleted file mode 100644 index a0e7f25a..00000000 --- a/exercises/10-Your-Own-Font/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - 10 Your Own Font - - -
My unique font
- - diff --git a/exercises/10-Your-Own-Font/styles.css b/exercises/10-Your-Own-Font/styles.css deleted file mode 100644 index de7160fd..00000000 --- a/exercises/10-Your-Own-Font/styles.css +++ /dev/null @@ -1,3 +0,0 @@ -.myTitle { - /your code here/ -} diff --git a/exercises/10-Your-Own-Font/tests.js b/exercises/10-Your-Own-Font/tests.js deleted file mode 100644 index 6109a451..00000000 --- a/exercises/10-Your-Own-Font/tests.js +++ /dev/null @@ -1,54 +0,0 @@ -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(); - }); - - 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-1).toBeFalsy(); - }); -}); - - diff --git a/exercises/10-anchor-styles/README.es.md b/exercises/10-anchor-styles/README.es.md new file mode 100644 index 00000000..b4e2d130 --- /dev/null +++ b/exercises/10-anchor-styles/README.es.md @@ -0,0 +1,21 @@ +# `10` 3D Anchor Styles + +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: + +![Botón siendo presionado ejemplo](../../.learn/assets/09-1.png?raw=true) + +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' / +} +``` + +## 📝 Instrucciones: + +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/10-anchor-styles/README.md similarity index 58% rename from exercises/09-Anchor-Styles/README.md rename to exercises/10-anchor-styles/README.md index 3ce04f9a..28134918 100644 --- a/exercises/09-Anchor-Styles/README.md +++ b/exercises/10-anchor-styles/README.md @@ -1,22 +1,21 @@ -# `09` 3D Anchor Styles +# `10` 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, for example: -![Example Image](../../.learn/assets/09-1.png?raw=true) +![Button being pressed example](../../.learn/assets/09-1.png?raw=true) -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: +1. Change the border colors of the anchor, when being pressed, to the following: ```css border-color: #000 #aaa #aaa #000; diff --git a/exercises/09-Anchor-Styles/index.html b/exercises/10-anchor-styles/index.html similarity index 87% rename from exercises/09-Anchor-Styles/index.html rename to exercises/10-anchor-styles/index.html index 984ca01e..baf7c9ba 100644 --- a/exercises/09-Anchor-Styles/index.html +++ b/exercises/10-anchor-styles/index.html @@ -4,9 +4,9 @@ - 09 Anchor Styles + 10 Anchor Styles - + Click me diff --git a/exercises/10-anchor-styles/solution.hide.css b/exercises/10-anchor-styles/solution.hide.css new file mode 100644 index 00000000..8c12ea5b --- /dev/null +++ b/exercises/10-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/10-anchor-styles/styles.css similarity index 92% rename from exercises/09-Anchor-Styles/styles.css rename to exercises/10-anchor-styles/styles.css index 7eaa9bea..895dc3d6 100644 --- a/exercises/09-Anchor-Styles/styles.css +++ b/exercises/10-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/10-anchor-styles/tests.js b/exercises/10-anchor-styles/tests.js new file mode 100644 index 00000000..1dea80c1 --- /dev/null +++ b/exercises/10-anchor-styles/tests.js @@ -0,0 +1,87 @@ +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 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; + expect(cssArray).toBe(".threeDimension"); + }) + + 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(); + }); + + + 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; + + 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"); + } + } + + }); + + 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/11-Font-Awesome-Icons/README.es.md b/exercises/11-Font-Awesome-Icons/README.es.md deleted file mode 100644 index 23c21ced..00000000 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ /dev/null @@ -1,22 +0,0 @@ -# `11` Iconos Font Awesome - -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! - -Font-awesome resuelve el problema de la "imagen" creando una nueva fuente en donde cada letra es un ícono diferente y ahora puedes importar toda la fuente desde el sitio web y usar el ícono 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 - - - -Puedes encontrar todos los nombres disponibles aquí: http://fontawesome.io/icons/ -``` - - -## 📝 Instrucciones: - -Agrega dos elementos más a tu lista(`li`) y agrega un icono diferente al comienzo de cada elemento. - diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js deleted file mode 100644 index 3fa966cb..00000000 --- a/exercises/11-Font-Awesome-Icons/tests.js +++ /dev/null @@ -1,46 +0,0 @@ -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(); - }); - - it("ul tag should exists", function() { - expect(document.querySelector("ul")).toBeTruthy(); - }); - it("At least 3 li tags should exist", function() { - expect(document.querySelectorAll("li").length).toBe(3); - }); - it("At least 3 i tags should exist", function() { - expect(document.querySelectorAll("i").length).toBe(3); - }); - it(" LI innerHTML exist", function() { - const li = document.querySelectorAll("li"); - expect(document.querySelector("li")).toBeTruthy(); - for (let i = 0; i < li.length; i++) { - expect(li[i].innerHTML).toBeTruthy(); - } - }); - it('the i tag should have a class "fas"', function() { - //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(); - } - }); -}); diff --git a/exercises/10-Your-Own-Font/README.es.md b/exercises/11-your-own-font/README.es.md similarity index 90% rename from exercises/10-Your-Own-Font/README.es.md rename to exercises/11-your-own-font/README.es.md index eab36187..ef1ce4a7 100644 --- a/exercises/10-Your-Own-Font/README.es.md +++ b/exercises/11-your-own-font/README.es.md @@ -1,11 +1,11 @@ -# `10` Tu Propia Fuente +# `11` Your Own Font Aquí puedes encontrar las fuentes de Google: https://fonts.google.com 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 - +```html + ``` Después de vincular tu fuente, debes asignar la regla CSS `font-family` a lo que quieras aplicarle la fuente, por ejemplo, un `
`. @@ -14,5 +14,5 @@ Después de vincular tu fuente, debes asignar la regla CSS `font-family` a lo qu 1. Enlaza cualquier fuente de google que desee en el sitio web. -2. Aplica esa `font-family` (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/11-your-own-font/README.md similarity index 53% rename from exercises/10-Your-Own-Font/README.md rename to exercises/11-your-own-font/README.md index 8c1dfa92..234ad01c 100644 --- a/exercises/10-Your-Own-Font/README.md +++ b/exercises/11-your-own-font/README.md @@ -1,18 +1,18 @@ -# `10` Your Own Font +# `11` Your Own Font -Yo canfind Google Fonts here: https://fonts.google.com +You can find Google Fonts here: https://fonts.google.com 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 - +```html + ``` -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/11-your-own-font/index.html b/exercises/11-your-own-font/index.html new file mode 100644 index 00000000..971a51b4 --- /dev/null +++ b/exercises/11-your-own-font/index.html @@ -0,0 +1,14 @@ + + + + + + + + + 11 Your Own Font + + +
My unique font
+ + diff --git a/exercises/11-your-own-font/solution.hide.css b/exercises/11-your-own-font/solution.hide.css new file mode 100644 index 00000000..98aa61be --- /dev/null +++ b/exercises/11-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 choose / +} diff --git a/exercises/11-your-own-font/solution.hide.html b/exercises/11-your-own-font/solution.hide.html new file mode 100644 index 00000000..62fd02c5 --- /dev/null +++ b/exercises/11-your-own-font/solution.hide.html @@ -0,0 +1,19 @@ + + + + + + + + + + + 11 Your Own Font + + +
My unique font
+ + diff --git a/exercises/11-your-own-font/styles.css b/exercises/11-your-own-font/styles.css new file mode 100644 index 00000000..0335a322 --- /dev/null +++ b/exercises/11-your-own-font/styles.css @@ -0,0 +1,3 @@ +.myTitle { + / Add your code below this line / +} diff --git a/exercises/11-your-own-font/tests.js b/exercises/11-your-own-font/tests.js new file mode 100644 index 00000000..71d2d707 --- /dev/null +++ b/exercises/11-your-own-font/tests.js @@ -0,0 +1,45 @@ +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 = ``; + + // get computed styles of any element you like + let cssArray = document.styleSheets[0].cssRules; + let orangeHoverSelector = ""; + for (let i = 0; i < cssArray.length; i++) { + if (cssArray[i].selectorText === ".myTitle") { + orangeHoverSelector = cssArray[i].style['font-family']; + } + } + + expect(orangeHoverSelector).toBeTruthy(); + }); + 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"); + expect(h.classList.contains("myTitle")).toBeTruthy(); + }); + test("The google-font link should be included in the head tag", ()=>{ + // let headContent=document.getElementsByTagName("") + expect(link.length).toBeGreaterThanOrEqual(2); + }); + + + test("The head tag should not include a style tag", ()=>{ + expect(html.toString().indexOf(` -1).toBeFalsy(); + }); +}); + + diff --git a/exercises/12-Relative-Length-EM-REM/README.md b/exercises/12-Relative-Length-EM-REM/README.md deleted file mode 100644 index e57186e4..00000000 --- a/exercises/12-Relative-Length-EM-REM/README.md +++ /dev/null @@ -1,29 +0,0 @@ -# `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. - -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. - -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 - - -## The result should look like this: - -![Example Image](../../.learn/assets/12-1.png?raw=true) - - diff --git a/exercises/12-Relative-Length-EM-REM/tests.js b/exercises/12-Relative-Length-EM-REM/tests.js deleted file mode 100644 index 2f884753..00000000 --- a/exercises/12-Relative-Length-EM-REM/tests.js +++ /dev/null @@ -1,69 +0,0 @@ -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 () { - // get computed styles of any element you like - document.querySelector( - "head" - ).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 () { - // get computed styles of any element you like - document.querySelector( - "head" - ).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; - - 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 existing head 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) - }) - -}); diff --git a/exercises/12-font-awesome-icons/README.es.md b/exercises/12-font-awesome-icons/README.es.md new file mode 100644 index 00000000..87f6835c --- /dev/null +++ b/exercises/12-font-awesome-icons/README.es.md @@ -0,0 +1,22 @@ +# `12` Font Awesome Icons + +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! + +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 el siguiente código para insertar un icono en específico: + +```html + + +``` + +> Puedes encontrar todos los iconos disponibles aquí: https://fontawesome.com/search?o=r&m=free + + +## 📝 Instrucciones: + +1. 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/12-font-awesome-icons/README.md similarity index 55% rename from exercises/11-Font-Awesome-Icons/README.md rename to exercises/12-font-awesome-icons/README.md index 2c09dbcd..c37d7496 100644 --- a/exercises/11-Font-Awesome-Icons/README.md +++ b/exercises/12-font-awesome-icons/README.md @@ -1,21 +1,21 @@ -# `11` Font Awesome Icons +# `12` Font Awesome Icons As a developer/designer, you want to use certain icons to make your website easy to understand; for example, we know that a "trash" icon means "delete". 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 code to insert a specific icon: ```html - -You can find all the available names here: http://fontawesome.io/icons/ ``` +> You can find all the available icons here: https://fontawesome.com/search?o=r&m=free + ## 📝 Instructions: -1. 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/12-font-awesome-icons/index.html similarity index 62% rename from exercises/11-Font-Awesome-Icons/index.html rename to exercises/12-font-awesome-icons/index.html index b3533f72..3495c6b5 100644 --- a/exercises/11-Font-Awesome-Icons/index.html +++ b/exercises/12-font-awesome-icons/index.html @@ -4,12 +4,12 @@ - - 11 Font Awesome + + 12 Font Awesome
-
Hello
+
Hello

diff --git a/exercises/12-font-awesome-icons/solution.hide.html b/exercises/12-font-awesome-icons/solution.hide.html new file mode 100644 index 00000000..4a3d255e --- /dev/null +++ b/exercises/12-font-awesome-icons/solution.hide.html @@ -0,0 +1,17 @@ + + + + + + + + 12 Font Awesome + + +
+
Hello
+
Hello
+
Hello
+
+ + diff --git a/exercises/11-Font-Awesome-Icons/styles.css b/exercises/12-font-awesome-icons/styles.css similarity index 56% rename from exercises/11-Font-Awesome-Icons/styles.css rename to exercises/12-font-awesome-icons/styles.css index b22aedca..52fe9b9c 100644 --- a/exercises/11-Font-Awesome-Icons/styles.css +++ b/exercises/12-font-awesome-icons/styles.css @@ -1,3 +1,4 @@ li { + font-size: 2.5rem; list-style: none; } diff --git a/exercises/12-font-awesome-icons/tests.js b/exercises/12-font-awesome-icons/tests.js new file mode 100644 index 00000000..b481bcfc --- /dev/null +++ b/exercises/12-font-awesome-icons/tests.js @@ -0,0 +1,38 @@ +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 icons = document.querySelectorAll("i"); + test("The
tag should exist", ()=>{ + expect(document.querySelector("ul")).toBeTruthy(); + }); + test("At least 3
tags should exist", ()=>{ + expect(document.querySelectorAll("li").length).toBe(3); + }); + test("At least 3 tags should exist", ()=>{ + expect(document.querySelectorAll("i").length).toBe(3); + }); + 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(); + } + }); + 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 + expect(icons).toBeTruthy(); + + icons.forEach(icon=>{ + let hasFa = icon.classList.toString().includes("fa-") + expect(hasFa).toBeTruthy(); + }) + }); +}); diff --git a/exercises/13-Anchor-Like-Button/README.es.md b/exercises/13-Anchor-Like-Button/README.es.md deleted file mode 100644 index a1fda469..00000000 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ /dev/null @@ -1,25 +0,0 @@ -# `13` Enlace (anchor) como botón: - -Los enlaces (`anchors`) no solo se usan dentro del texto: cuando va a usar enlaces (`anchors`) fuera del texto, es mejor hacer que se vean como botones para que sea experiencia más amigable. - -## 📝 Instrucciones: - -Siga 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` (color picker) para encontrar el color exacto y aplicárselo al `background`. - -4. Eliminar subrayado: establece `text-decoration` a `none`. - -5. Establecer el color del texto en blanco (`white`) - -Para que el botón se vea diferente cuando el usuario pasa el mouse por encima, usamos el selector `:hover`: http://lmgtfy.com/?q=how+to+use+the+hover - -6. Dentro del selector `:hover` cambia el fondo del botón a un color naranja más oscuro. - -## Reultado esperado: - -![Example Image](../../.learn/assets/13-1.gif?raw=true) diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md deleted file mode 100644 index 40327be6..00000000 --- a/exercises/13-Anchor-Like-Button/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# `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. - -## 📝 Instructions: - -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`. - -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 - -6. Inside of the `:hover` selector change the background of the button to a `darker orange`. - -## Expected result: - -![Example Image](../../.learn/assets/13-1.gif?raw=true) \ No newline at end of file diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/13-Anchor-Like-Button/styles.css deleted file mode 100644 index 93996cbd..00000000 --- a/exercises/13-Anchor-Like-Button/styles.css +++ /dev/null @@ -1,7 +0,0 @@ -.orange-btn { - /your code here/ -} - -.orange-btn:hover { - /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 deleted file mode 100644 index 32f0c21e..00000000 --- a/exercises/13-Anchor-Like-Button/tests.js +++ /dev/null @@ -1,107 +0,0 @@ -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 () { - document.querySelector( - "head" - - ).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 () { - document.querySelector( - "head" - - ).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 () { - 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); - 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${css.toString()}`; - let cssArray=document.styleSheets[0].cssRules[0].selectorText; - expect(cssArray).toBe(".orange-btn"); - } - ) - it("You should not change the existing head 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) - }) - -}); diff --git a/exercises/12-Relative-Length-EM-REM/README.es.md b/exercises/13-relative-length-em-rem/README.es.md similarity index 50% rename from exercises/12-Relative-Length-EM-REM/README.es.md rename to exercises/13-relative-length-em-rem/README.es.md index 9603c625..445d2c7f 100644 --- a/exercises/12-Relative-Length-EM-REM/README.es.md +++ b/exercises/13-relative-length-em-rem/README.es.md @@ -1,28 +1,29 @@ -# `12` Longitud Relativa em, rem: +# `13` Relative Length em, rem Hasta ahora, hemos trabajado con píxeles como unidad de medida, por ejemplo, diciendo que un contenedor o caja tiene `100px` de ancho. 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. +Dado que el segundo `div` tiene un `font-size` más grande, el título cambia de tamaño en consecuencia y el `heading` se adapta. -em: Relativo al `font-size` actual del padre. +## En resumen: -rem: Relativo al `font-size` original de la página. ++ `em`: Relativo al `font-size` actual del padre. -## 📝 Instrucciones: ++ `rem`: Relativo al `font-size` original de la página. -1. Proporciona un `font-size` de `0.8em` a ambos `h2` +## 📝 Instrucciones: -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í: +## 💻 Resultado esperado: -![Example Image](../../.learn/assets/12-1.png?raw=true) +![Resultado esperado](../../.learn/assets/12-1.png?raw=true) diff --git a/exercises/13-relative-length-em-rem/README.md b/exercises/13-relative-length-em-rem/README.md new file mode 100644 index 00000000..e1805278 --- /dev/null +++ b/exercises/13-relative-length-em-rem/README.md @@ -0,0 +1,30 @@ +# `13` Relative Length em, rem + +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 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. + + +## 📝 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. + +## 💻 Expected result: + +![Expected result](../../.learn/assets/12-1.png?raw=true) + + diff --git a/exercises/12-Relative-Length-EM-REM/index.html b/exercises/13-relative-length-em-rem/index.html similarity index 91% rename from exercises/12-Relative-Length-EM-REM/index.html rename to exercises/13-relative-length-em-rem/index.html index 60a98594..24290996 100644 --- a/exercises/12-Relative-Length-EM-REM/index.html +++ b/exercises/13-relative-length-em-rem/index.html @@ -4,7 +4,7 @@ - 12 Relative Length EM REM + 13 Relative Length EM REM
@@ -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/13-relative-length-em-rem/solution.hide.css b/exercises/13-relative-length-em-rem/solution.hide.css new file mode 100644 index 00000000..eeb04334 --- /dev/null +++ b/exercises/13-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/styles.css b/exercises/13-relative-length-em-rem/styles.css similarity index 100% rename from exercises/12-Relative-Length-EM-REM/styles.css rename to exercises/13-relative-length-em-rem/styles.css diff --git a/exercises/13-relative-length-em-rem/tests.js b/exercises/13-relative-length-em-rem/tests.js new file mode 100644 index 00000000..326eb9b0 --- /dev/null +++ b/exercises/13-relative-length-em-rem/tests.js @@ -0,0 +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"); +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); + expect(styles["font-size"]).toBe("0.8em"); + }); + 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); + expect(styles["font-size"]).toBe("0.8rem"); + }); + 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/14-anchor-like-button/README.es.md b/exercises/14-anchor-like-button/README.es.md new file mode 100644 index 00000000..f85665ea --- /dev/null +++ b/exercises/14-anchor-like-button/README.es.md @@ -0,0 +1,25 @@ +# `14` Anchor Like Button + +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: + +Sigue estos pasos para que tu enlace (`anchor`) se vea así: + +1. Haz que se vea como una caja: establece el `padding` en `10px`. + +2. Bordes redondeados: establece el `border-radius` en `4px`. + +3. El `background` debe ser de color `orange`, y cuando el ratón esté sobre el botón (`:hover`), el `background` debe ser `darkorange`. + +4. Eliminar subrayado: establece `text-decoration` a `none`. + +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: + +![Resultado esperado](../../.learn/assets/13-1.gif?raw=true) diff --git a/exercises/14-anchor-like-button/README.md b/exercises/14-anchor-like-button/README.md new file mode 100644 index 00000000..7491285c --- /dev/null +++ b/exercises/14-anchor-like-button/README.md @@ -0,0 +1,23 @@ +# `14` 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. + +## 📝 Instructions: + +1. Make it look like a box: set `padding` to `10px`. + +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`. + +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 + +6. Inside of the `:hover` selector change the background of the button to `darkorange`. + +## 💻 Expected result: + +![Expected result](../../.learn/assets/13-1.gif?raw=true) diff --git a/exercises/13-Anchor-Like-Button/index.html b/exercises/14-anchor-like-button/index.html similarity index 87% rename from exercises/13-Anchor-Like-Button/index.html rename to exercises/14-anchor-like-button/index.html index aaaa7740..853cce76 100644 --- a/exercises/13-Anchor-Like-Button/index.html +++ b/exercises/14-anchor-like-button/index.html @@ -4,7 +4,7 @@ - 13 Anchor Like Button + 14 Anchor Like Button Beautiful Button diff --git a/exercises/14-anchor-like-button/solution.hide.css b/exercises/14-anchor-like-button/solution.hide.css new file mode 100644 index 00000000..3e80d404 --- /dev/null +++ b/exercises/14-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/14-anchor-like-button/styles.css b/exercises/14-anchor-like-button/styles.css new file mode 100644 index 00000000..76fd5b9c --- /dev/null +++ b/exercises/14-anchor-like-button/styles.css @@ -0,0 +1,10 @@ +.orange-btn { + display: inline-block; + / your code below / + +} + +.orange-btn:hover { + / YOUR CODE HERE FOR THE HOVER STATE */ + +} diff --git a/exercises/14-anchor-like-button/tests.js b/exercises/14-anchor-like-button/tests.js new file mode 100644 index 00000000..1006a565 --- /dev/null +++ b/exercises/14-anchor-like-button/tests.js @@ -0,0 +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"); +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); + + expect(classTagStyles["padding"]).toBe("10px"); + }); + test("The border-radius should be '4px'", ()=>{ + document.querySelector( + "head" + + ).innerHTML = ``; + let divTag = document.querySelector(".orange-btn"); + let classTagStyles = window.getComputedStyle(divTag); + expect(classTagStyles["border-radius"]).toBe("4px"); + }); + test("The underline should be removed", ()=>{ + document.querySelector( + "head" + + ).innerHTML = ``; + let divTag = document.querySelector(".orange-btn"); + let classTagStyles = window.getComputedStyle(divTag); + expect(classTagStyles["text-decoration"]).toBe("none"); + }); + + test("You should be careful with the specificity", ()=>{ + document.querySelector( + "head" + ).innerHTML = ``; + let cssArray = document.styleSheets[0].cssRules[0].selectorText; + expect(cssArray).toBe(".orange-btn"); + } + ) + 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 43e5ad65..b914a96c 100644 --- a/learn.json +++ b/learn.json @@ -1,20 +1,37 @@ { - "language": "html", "slug": "css-tutorial-exercises-course", - "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 with Interactive Exercises", + "es": "Aprende CSS con Ejercicios Interactivos" + }, "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. These CSS exercises are ideal for beginners learning and practicing fundamental CSS concepts, including selectors, styling rules, and responsive design techniques. Through hands-on tasks, learners will gain practical experience in applying styles to HTML elements, using external stylesheets, and mastering CSS specificity.", + "es": "Aprende CSS con una docena de ejercicios interactivos y auto-corregidos. Estos ejercicios de CSS son ideales para principiantes que buscan aprender y practicar conceptos fundamentales de CSS, incluidos selectores, reglas de estilo y técnicas de diseño responsivo. A través de tareas prácticas, los estudiantes obtendrán experiencia en la aplicación de estilos a elementos HTML, el uso de hojas de estilo externas y el dominio de la especificidad de CSS." + }, "duration": 8, "difficulty": "easy", - "video-solutions": true, + "videoSolutions": true, + "bugsLink": "https://github.com/learnpack/learnpack/issues/new", + "projectType": "tutorial", + "autoPlay": "true", "graded": true, - "config": { - "disableGrading": true, - "editor": { - "version": "1.0.72" + "disabledActions": [], + "technologies": ["web-development", "desarrollo-web", "front-end", "css"], + "disableGrading": false, + "editor": { + "version": "5.0", + "agent": "vscode" + }, + "telemetry": { + "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry?asset_id=142" + }, + "video": { + "intro": { + "en":"https://www.youtube.com/watch?v=AuXnQHKhjxw", + "es": "https://www.youtube.com/watch?v=mZPmxx18kXo" } } }

The learning essay

3 reasons you know you are learning

3 reasons you know love what you are learning

The learning essay

3 reasons you know you are learning

3 reasons you love what you are learning

The learning essay

3 reasons you know you are learning

3 reasons you know love what you are learning

3 reasons you know love what you are learning

My unique font

`. +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 `

My unique font

My unique font

` headings. They are both `

`. Ambos son `

` headings. They are both `

First h2 heading

First h3 heading

Second h2 heading

Second h3 heading

Your favorite drinks

Coca Cola drinks

Pepsi drinks

Healthy drinks

Web-developer drinks

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