+ + + + +

+ Coding is a basic literacy in the digital age, and it is important for kids to understand and be able to work with and understand the technology + around them. Having children learn to code at a young age prepares them for the future. Coding helps children with communication, creativity, + math, writing, and confidence. +

tag", ()=>{ + expect(p).toBeTruthy(); +}) + +test("The

tag color should be blue", ()=>{ + let styles = window.getComputedStyle(p); + expect(styles["color"]).toBe("blue"); +}); + +test("The

tag should not contain any inline style", ()=>{ + let emptyBodyInlineStyle = {}; + expect(p.style._values).toEqual(emptyBodyInlineStyle); +}); diff --git a/exercises/02.2-rbga-colors/README.es.md b/exercises/02.2-rbga-colors/README.es.md new file mode 100644 index 00000000..e448639a --- /dev/null +++ b/exercises/02.2-rbga-colors/README.es.md @@ -0,0 +1,21 @@ +--- +tutorial: "https://www.youtube.com/watch?v=8RntHMOAFqI" +--- + +# `02.2` Your First Style + +Cuando usas CSS, la idea es aplicar `reglas css` a tus `elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle: + +Por ejemplo, este es el código si quiero que todos los `anchors` de mi sitio web (etiquetas ``) sean azules (`blue`): + +```css +a { + color: blue; +} +``` + +## 📝 Instrucciones: + +1. En este momento, se está aplicando un estilo que se encarga de hacer el enlace rojo (`red)`. + +2. Cambia el estilo para que tu enlace se vea amarillo (`yellow`). diff --git a/exercises/02.2-rbga-colors/README.md b/exercises/02.2-rbga-colors/README.md new file mode 100644 index 00000000..a47fb128 --- /dev/null +++ b/exercises/02.2-rbga-colors/README.md @@ -0,0 +1,21 @@ +--- +tutorial: "https://www.youtube.com/watch?v=TqmY9GLTwQ0" +--- + +# `02.2` Your First Style + +When doing CSS, the idea is to apply `css rules` to your `html elements`, you always have to select the element first, and then specify what rules you want to apply to it: + +For example, this is the code if you want to make all your website anchors (`` tags) blue: + +```css +a { + color: blue; +} +``` + +## 📝 Instructions: + +1. Right now there is a style being applied that is responsible for making the anchor `red`. + +2. Change the style to make your anchor look `yellow`. diff --git a/exercises/01.2-Your-First-Style/index.html b/exercises/02.2-rbga-colors/index.html similarity index 100% rename from exercises/01.2-Your-First-Style/index.html rename to exercises/02.2-rbga-colors/index.html diff --git a/exercises/02.2-rbga-colors/solution.hide.html b/exercises/02.2-rbga-colors/solution.hide.html new file mode 100644 index 00000000..a2a88d04 --- /dev/null +++ b/exercises/02.2-rbga-colors/solution.hide.html @@ -0,0 +1,14 @@ + + + + + + + Hello! I am an anchor in red, change my color to yellow + + diff --git a/exercises/02.2-rbga-colors/tests.js b/exercises/02.2-rbga-colors/tests.js new file mode 100644 index 00000000..32bf609b --- /dev/null +++ b/exercises/02.2-rbga-colors/tests.js @@ -0,0 +1,34 @@ +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("All the styles should be applied", ()=>{ + const a = document.querySelector("a"); + + test("The anchor tag should be yellow", ()=>{ + let styles = window.getComputedStyle(a); + expect(styles["color"]).toBe("yellow"); + }); + + test("The tag should not contain any inline style", ()=>{ + let bodyInlineStyle = document.getElementsByTagName("body"); + let emptyBodyInlineStyle = {}; + expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle); + }); + + test("The anchor tag should not contain any inline style", ()=>{ + let emptyBodyInlineStyle = {}; + expect(a.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) + }) +}); diff --git a/exercises/01.3-Your-Second-Style/README.es.md b/exercises/02.3-your-second-style/README.es.md similarity index 67% rename from exercises/01.3-Your-Second-Style/README.es.md rename to exercises/02.3-your-second-style/README.es.md index 825c10a1..a6e3630c 100644 --- a/exercises/01.3-Your-Second-Style/README.es.md +++ b/exercises/02.3-your-second-style/README.es.md @@ -1,8 +1,12 @@ -# `01.2` Tu Segundo Estilo +--- +tutorial: "https://www.youtube.com/watch?v=vTS0D_QrbH8" +--- + +# `02.3` Your Second Style Cuando usas CSS, la idea es aplicar `reglas css` a tus `elementos html`, siempre debes seleccionar primero el elemento y luego especificar qué reglas deseas aplicarle: -Por ejemplo, este es el código si quiero que todos las anchors de mi sitio web (etiquetas ``) sean azules: +Por ejemplo, este es el código si quiero que todos los anchors de mi sitio web (etiquetas ``) sean azules: ```css a { @@ -13,4 +17,5 @@ a { ## 📝 Instrucciones: 1. Haz que el fondo de tu sitio web sea azul (blue) seleccionando el `body` y aplicando la regla `background` con valor `blue`. -2. Compila y muestra una vista previa del ejercicio y tu resultado debe ser un body azul (toda la página azul). + +2. Compila y muestra una vista previa del ejercicio y tu resultado debe ser un `body` azul (`blue`), es decir, toda la página azul. diff --git a/exercises/01.3-Your-Second-Style/README.md b/exercises/02.3-your-second-style/README.md similarity index 56% rename from exercises/01.3-Your-Second-Style/README.md rename to exercises/02.3-your-second-style/README.md index e1d363a0..8918e346 100644 --- a/exercises/01.3-Your-Second-Style/README.md +++ b/exercises/02.3-your-second-style/README.md @@ -1,12 +1,12 @@ --- -tutorial: "https://www.youtube.com/watch?v=W0CAqLIAoZI" +tutorial: "https://www.youtube.com/watch?v=ituoKgAh6ds" --- -# `01.3` Your Second Style +# `02.3` Your Second Style When doing CSS, the idea is to apply `css rules` to your `html elements`, you always have to select the element first, and then specify what rules you want to apply to it: -For example, this is the code if I want to make all my website anchors (` tag's`) blue: +For example, this is the code if you want to make all your website anchors (`` tags) blue: ```css a { @@ -17,4 +17,5 @@ a { ## 📝 Instructions: 1. Make your website background blue by selecting the `body` and applying the `background` rule with a `blue` value. -2. Build and preview the exercise and your result should be a blue `body` (the whole page blue). + +2. Run and preview the exercise and your result should be a blue `body` (the whole page blue). diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/02.3-your-second-style/index.html similarity index 100% rename from exercises/01.3-Your-Second-Style/index.html rename to exercises/02.3-your-second-style/index.html diff --git a/exercises/02.3-your-second-style/solution.hide.html b/exercises/02.3-your-second-style/solution.hide.html new file mode 100644 index 00000000..9b239409 --- /dev/null +++ b/exercises/02.3-your-second-style/solution.hide.html @@ -0,0 +1,14 @@ + + + + + + + Hello! My background should be blue! + + diff --git a/exercises/02.3-your-second-style/tests.js b/exercises/02.3-your-second-style/tests.js new file mode 100644 index 00000000..8b52f01d --- /dev/null +++ b/exercises/02.3-your-second-style/tests.js @@ -0,0 +1,28 @@ +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("All the styles should be applied", ()=>{ + const body = document.querySelector("body"); + + test("The background should be blue", ()=>{ + let styles = window.getComputedStyle(body); + expect(styles["background"]).toBe("blue"); + }); + + test("The body tag should not contain any inline style", ()=>{ + let emptyBodyInlineStyle = {}; + expect(body.style._values).toEqual(emptyBodyInlineStyle); + }); + + test("You should not change the existing head tag elements", ()=>{ + let head = document.querySelector('head') + expect(head).toBeTruthy() + + let meta = head.querySelector("meta") + expect(meta).toBe(null) + }) +}); diff --git a/exercises/03-Inline-Styles/README.es.md b/exercises/03-Inline-Styles/README.es.md deleted file mode 100644 index 36e1ed60..00000000 --- a/exercises/03-Inline-Styles/README.es.md +++ /dev/null @@ -1,28 +0,0 @@ -# `03` Inline Styles (estilos en la línea) - -Los estilos inline son una muy mala idea a menos que no tengas otra opción (y esa es una situación muy poco común). Lamentablemente, tenemos que enseñarte cómo hacerlo porque existe la posibilidad de que necesites usarlos en algún momento. - -Para usar estilos inline, en lugar de declarar una etiqueta `; + let emptyBodyInlineStyle={}; + expect(body.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) + + let href = link.getAttribute("href") + expect(href).toEqual('./styles.css') + }); + + test("Your tag background color should be blue", ()=>{ + let styles = window.getComputedStyle(body) + expect(styles["background-color"]).toBe("blue") + }) +}); diff --git a/exercises/03.1-background/README.es.md b/exercises/03.1-background/README.es.md new file mode 100644 index 00000000..e0af7277 --- /dev/null +++ b/exercises/03.1-background/README.es.md @@ -0,0 +1,31 @@ +--- +tutorial: "https://www.youtube.com/watch?v=a1ACEu996z4" +--- + +# `03.1` Background + +La regla `background` (fondo) de CSS nos permite asignar y trabajar con el background de cualquier contenedor (container). Los valores de background pueden ser `color` o una `imagen`. + +Si es una imagen, puedes especificar si quieres que la imagen se repita horizontalmente, verticalmente, ambas o ninguna, y también puedes especificar si quieres cambiar el tamaño y ajustar su tamaño al contenedor completo, entre otras propiedades, eso puede modificarse. + +## 📝 Instrucciones: + +1. Construye el ejercicio. + +2. Verifica la vista previa. + +3. En el archivo styles.css cambia el `background-size` a `contain` (verifica la pestaña styles.css). + +4. Construye y previsualiza el ejercicio nuevamente. + +5. Cambia el `background-repeat` a `repeat` para que se repita sobre el eje x y el eje y. + +6. Construye y previsualiza el ejercicio nuevamente. + +## 💡 Pista: + +Google es tu mejor amigo: + +- Recomendamos buscar en google `css background-size` para entender un poco mejor esta propiedad. + +- También recomendamos buscar `css background-repeat` diff --git a/exercises/02.1-Background/README.md b/exercises/03.1-background/README.md similarity index 50% rename from exercises/02.1-Background/README.md rename to exercises/03.1-background/README.md index d81d440a..3580ab7e 100644 --- a/exercises/02.1-Background/README.md +++ b/exercises/03.1-background/README.md @@ -1,32 +1,31 @@ --- -tutorial: "https://www.youtube.com/watch?v=MJI0-sFmTe8" +tutorial: "https://www.youtube.com/watch?v=fQh2OulBSp8" --- -# `02.1` Background +# `03.1` Background The `background` CSS rule allows us to assign and work with the background of any container. The background values can be a `color` or an `image`. -If it is an image, you can specify if you want the image to be repeated horizontally, vertically, or both, or not at all, and you can also specify if you want it to resize and fit the whole container where its being applied, among other properties that can be modified. +If it is an image, you can specify if you want the image to be repeated horizontally, vertically, or both, or not at all, and you can also specify if you want it to resize and fit the whole container where it is being applied, among other properties that can be modified. ## 📝 Instructions: - -1. Build the exercise. +1. Run the exercise. 2. Check the Preview. 3. On the styles.css file change the background-size to 'contain' (check the styles.css tab). -4. Build and Preview the exercise again. +4. Run and Preview the exercise again. -5. Change the background-repeat to 'inherit' to make it repeat over the x axis and y axis. +5. Change the background-repeat to 'repeat' to make it repeat over the x-axis and y-axis. -6. Build and Preview the exercise again. +6. Run and Preview the exercise again. -## 💡Hint: +## 💡 Hint: Google is your best friend: -- How to use the background-size: http://lmgtfy.com/?q=css+background-size -- How to use the background-repeat: http://lmgtfy.com/?q=css+background-repeat +- We recommend googling: `css background-size` and reading about it on w3schools or any other websites. +- We also recommend googling about `css background-repeat`. diff --git a/exercises/02.1-Background/index.html b/exercises/03.1-background/index.html similarity index 58% rename from exercises/02.1-Background/index.html rename to exercises/03.1-background/index.html index ce03ce24..a1227330 100644 --- a/exercises/02.1-Background/index.html +++ b/exercises/03.1-background/index.html @@ -2,9 +2,9 @@ - + - My background should be an image with th size "contain" + My background should be an image with the size "contain" diff --git a/exercises/03.1-background/solution.hide.css b/exercises/03.1-background/solution.hide.css new file mode 100644 index 00000000..a2c6b305 --- /dev/null +++ b/exercises/03.1-background/solution.hide.css @@ -0,0 +1,5 @@ +body { + background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg); + background-size: contain; + background-repeat: repeat; +} diff --git a/exercises/02.1-Background/styles.css b/exercises/03.1-background/styles.css similarity index 100% rename from exercises/02.1-Background/styles.css rename to exercises/03.1-background/styles.css diff --git a/exercises/03.1-background/tests.js b/exercises/03.1-background/tests.js new file mode 100644 index 00000000..f6f28551 --- /dev/null +++ b/exercises/03.1-background/tests.js @@ -0,0 +1,53 @@ +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 background-size should be 'contain' without quotes", ()=>{ + document.querySelector( + "head" + ).innerHTML = ``; + // get computed styles of any element you like + let styles = window.getComputedStyle(body); + expect(styles["background-size"]).toBe("contain"); + }); + + test("the background-repeat should be 'repeat' without quotes", ()=>{ + document.querySelector( + "head" + ).innerHTML = ``; + + let styles = window.getComputedStyle(body); + expect(styles["background-repeat"]).toBe("repeat"); + }); + + 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') + + let titleInner = title.innerHTML + expect(titleInner).toBe('03.1 Background') + }) +}); diff --git a/exercises/04-Class-Selector/README.es.md b/exercises/04-Class-Selector/README.es.md deleted file mode 100644 index ccbfa6c8..00000000 --- a/exercises/04-Class-Selector/README.es.md +++ /dev/null @@ -1,27 +0,0 @@ -# `04` El selector de clase - -Hay muchas formas de seleccionar los elementos HTML para aplicarles estilos, hasta ahora solo hemos usado la etiqueta selector, hablemos sobre el selector `.class`: - -#### 1) Selector de clase - -Es el selector de CSS más popular, probablemente lo usarás cada 5 minutos. - - Usa la propiedad de clase del elemento HTML para seleccionarlo. La reglas de estilo se aplicarán a todos los elementos con la misma clase. - -```css -.small{ - font-size: 9px; -} -``` -**Nota:** - - Cualquier etiqueta html con `class="small"` tendrá un font-size de 9px. - - - -# 📝 Instrucciones: - -En este momento hay una clase seleccionada en el CSS llamada -`.b-blue`. - -Por favor aplica la clase a ambas etiquetas HTML `

`. diff --git a/exercises/04-Class-Selector/README.md b/exercises/04-Class-Selector/README.md deleted file mode 100644 index fd476e56..00000000 --- a/exercises/04-Class-Selector/README.md +++ /dev/null @@ -1,28 +0,0 @@ ---- -tutorial: "https://www.youtube.com/watch?v=RffCSMXgWFc" ---- - -# `04` Class Selector - -There are many ways to select HTML elements to apply styles to them, so far we have only use the `tag` selector, lets talk about the `.class` selector: - -#### 1) `.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; -} -``` -**Note:** - -Any html tag with the `class="small"` will have a font-size of 9px. - -# 📝 Instructions: - -Right now there is a class selected on the CSS that is called `.b-blue`. Please apply that class to both of the `

` tags in HTML. - - diff --git a/exercises/04-list-styling/README.es.md b/exercises/04-list-styling/README.es.md new file mode 100644 index 00000000..f67abca2 --- /dev/null +++ b/exercises/04-list-styling/README.es.md @@ -0,0 +1,42 @@ +--- +tutorial: "https://www.youtube.com/watch?v=qcx31wUVmqI" +--- + +# `04` List styling + +En el desarrollo front end, a menudo tenemos que listar ítems y la forma de hacerlo es con las etiquetas `

`, para listas desordenadas o con viñetas, y las etiquetas `
` para listas ordenadas o numeradas. + +Tenemos control mediante CSS sobre cómo se ven estas listas, qué viñetas o números usan, etc. + +Por ejemplo: + +```html +ul { + list-style-type: none; + margin: 0; + padding: 0; +} +``` + +Eliminará los números o viñetas y moverá el texto hacia la izquierda para que no haya espacio vacío donde una vez estuvieron las viñetas. + +**Nota:** + +Ejecuta el código existente primero para ver cómo se ve originalmente la página. Luego, realiza los cambios a continuación y construye de nuevo. + +## 📝 Instrucciones: + +La regla `list-style-type` tiene muchos valores interesantes, utilizala para lograr: + +1. Conviertir los números de las bebidas de Coca Cola en letras minúsculas (Usa `lower-alpha`). +2. Conviertir los números de las bebidas de Pepsi en viñetas cuadradas. +3. Conviertir las viñetas de las bebidas Saludables en números armenios. +4. Eliminar completamente las viñetas de las bebidas de web-developer. + +## 💡 Pistas: + +- Cómo trabajar con estilos de lista en CSS: https://www.w3schools.com/css/css_list.asp +- Cambiar viñetas por números y viceversa significa que necesitarías cambiar el tipo de lista, ordenada o no ordenada. Es posible que se requieran cambios en las etiquetas HTML. +- `armenian` es un valor posible real de `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp +- `lower-alpha` es un valor posible real de `list-style-type`. + diff --git a/exercises/04-list-styling/README.md b/exercises/04-list-styling/README.md new file mode 100644 index 00000000..6a9cb5d7 --- /dev/null +++ b/exercises/04-list-styling/README.md @@ -0,0 +1,42 @@ +--- +tutorial: "https://www.youtube.com/watch?v=i7UegJUGnRs" +--- + +# `04` List styling + +In the front end, we often have to list items, and the way to do that is with `
` tags, for unordered/bulleted lists, and `
` tags for ordered/numbered lists. + +We have CSS control over what these lists look like, what bullets or numbers they use, etc. + +For example: + +```html + ul { + list-style-type: none; + margin: 0; + padding: 0; + } +``` + +This will remove the numbers or bullets and will move the text to the left so there is no empty space where the bullets once were. + +**Note:** + +Run the existing code first to see what the page originally looks like. +Then make the changes below and run again. + +## 📝 Instructions: + +Use the CSS rule `list-style-type` and CSS to: + +1. Turn the Coca Cola drinks numbers into lowercase letters (Use `lower-alpha`) +2. Turn the Pepsi drinks numbers into square bullets. +3. Make the Healthy drinks bullets into Armenian numbers. +4. Completely remove the bullets from the web-developer drinks. + +## 💡 Hints: + +- How to work with CSS list styles: https://www.w3schools.com/css/css_list.asp +- Changing bullets into numbers and vice versa means that you would need to change the type of list - ordered or unordered. Changes in the HTML tags may be necessary. +- `armenian` is an actual possible value of `list-style-type`: https://www.w3schools.com/cssref/pr_list-style-type.asp + diff --git a/exercises/04-list-styling/index.html b/exercises/04-list-styling/index.html new file mode 100644 index 00000000..2eb502ea --- /dev/null +++ b/exercises/04-list-styling/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + +
+
Your favorite drinks
+
Coca Cola drinks
+
+
1. Coca Cola
+
2. Dr. Pepper
+
3. Fanta
+
+ +
Pepsi drinks
+
+
1. Pepsi Cola
+
2. Mountain Dew
+
3. Gatorade
+
+ +
Healthy drinks
+
+
• Kombucha
+
• Kale juice
+
• Sparkling Water
+
+ +
Web-developer drinks
+
+
• Coffee
+
• COFFEE
+
• COFFEE!!!
+
+
+ + \ No newline at end of file diff --git a/exercises/04-list-styling/solution.hide.css b/exercises/04-list-styling/solution.hide.css new file mode 100644 index 00000000..c0cd286f --- /dev/null +++ b/exercises/04-list-styling/solution.hide.css @@ -0,0 +1,30 @@ +body { + height: 100vh; + background: rgb(189, 189, 189); +} + +.container { + font-family: "Comic Sans MS", "Comic Sans", cursive; + margin: 0 auto; + width: 70vw; + box-shadow: 3px 5px 20px #312f2f; + background-color: white; + padding: 120px; + width: 300px; +} + +.cocacola { + list-style-type: lower-alpha; +} + +.pepsi { + list-style-type: square; +} + +.healthy { + list-style-type: armenian; +} + +.dev-drinks { + list-style-type: none; +} diff --git a/exercises/04-list-styling/styles.css b/exercises/04-list-styling/styles.css new file mode 100644 index 00000000..124c5174 --- /dev/null +++ b/exercises/04-list-styling/styles.css @@ -0,0 +1,14 @@ +body { + height: 100vh; + background: rgb(189, 189, 189); +} + +.container { + font-family: "Comic Sans MS", "Comic Sans", cursive; + margin: 0 auto; + width: 70vw; + box-shadow: 3px 5px 20px #312f2f; + background-color: white; + padding: 120px; + width: 300px; +} \ No newline at end of file diff --git a/exercises/04-list-styling/test.js b/exercises/04-list-styling/test.js new file mode 100644 index 00000000..c8d27b1c --- /dev/null +++ b/exercises/04-list-styling/test.js @@ -0,0 +1,39 @@ +const fs = require("fs"); +const path = require("path"); +const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); + +jest.dontMock("fs"); + +describe("CSS Styles", () => { + beforeAll(() => { + document.querySelector("head").innerHTML = ``; + }); + + test("Cocacola list style should be applied correctly", () => { + const cocacolaItems = document.querySelectorAll(".cocacola"); + cocacolaItems.forEach(item => { + expect(getComputedStyle(item).listStyleType).toBe("lower-alpha"); + }); + }); + + test("Pepsi list style should be applied correctly", () => { + const pepsiItems = document.querySelectorAll(".pepsi"); + pepsiItems.forEach(item => { + expect(getComputedStyle(item).listStyleType).toBe("square"); + }); + }); + + test("Healthy list style should be applied correctly", () => { + const healthyItems = document.querySelectorAll(".healthy"); + healthyItems.forEach(item => { + expect(getComputedStyle(item).listStyleType).toBe("armenian"); + }); + }); + + test("Dev-drinks list style should be applied correctly", () => { + const devDrinksItems = document.querySelectorAll(".dev-drinks"); + devDrinksItems.forEach(item => { + expect(getComputedStyle(item).listStyleType).toBe("none"); + }); + }); +}); diff --git a/exercises/04.1-Combined-Rules/README.es.md b/exercises/04.1-Combined-Rules/README.es.md deleted file mode 100644 index 4018ac21..00000000 --- a/exercises/04.1-Combined-Rules/README.es.md +++ /dev/null @@ -1,33 +0,0 @@ -# `04.1` Reglas Combinadas - -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 una sola utilizando la regla "padding". -2. Combina todas las reglas de background, menos el background size, en una sola línea usando la regla "background:". - - -*Nota:** - - El background size no se puede combinar, los navegadores aún no lo admiten.\*\* - -### Pista: - -- Como usar el background-size: http://lmgtfy.com/?q=css+background -- Como usar el padding: http://lmgtfy.com/?q=css+padding diff --git a/exercises/04.1-Combined-Rules/README.md b/exercises/04.1-Combined-Rules/README.md deleted file mode 100644 index 6b72a4d2..00000000 --- a/exercises/04.1-Combined-Rules/README.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -tutorial: "https://youtu.be/watch?v=uQS5QeEE-B4" ---- - -# `04.1` Combined Rules - -CSS files take 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 is 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 as: - -```css -border: black 1px solid; -``` - -# 📝 Instructions: - - -1. Combine the 4 padding rules into just one using the "padding" rule. - -2. Combine the all background rules, but the background size, into just one line using the "background:" rule. - -**Note:** - - The background size cannot be combined, the browsers don't support it yet.\*\* - -# Hint: - -- How to use the background-size: http://lmgtfy.com/?q=css+background -- How to use the padding: http://lmgtfy.com/?q=css+padding diff --git a/exercises/04.1-Combined-Rules/tests.js b/exercises/04.1-Combined-Rules/tests.js deleted file mode 100644 index d8e05434..00000000 --- a/exercises/04.1-Combined-Rules/tests.js +++ /dev/null @@ -1,173 +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 styles.css file should be empty", function () { - // console.log(css); - // expect(css.toString()==="").toBeTruthy(); - // }); - // it("The Head tag should includes a Style tag", function () { - // expect(html.toString().indexOf(`-1).toBeTruthy(); - // }); - it("The body tag should not contains any inline style", function () { - document.querySelector( - "head" - ).innerHTML=``; - let bodyInlineStyle=document.getElementsByTagName("style"); - let emptyBodyInlineStyle={}; - expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle); - console.log("sty: ", bodyInlineStyle[0]); - }); - it("the width should be '50px'", function () { - // get computed styles of any element you like - 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; - // console.log("$$$:", cssArray) - let orangeHoverSelector=""; - for (let i=0; i${css.toString()}`; - - let cssArray=document.styleSheets[0].cssRules; - // console.log("$$$:", cssArray) - let orangeHoverSelector=""; - for (let i=0; i${css.toString()}`; - - let cssArray=document.styleSheets[0].cssRules; - console.log("$$$:", cssArray) - let orangeHoverSelector=""; - let backImg = ""; - let backColor = ""; - let backPos = ""; - let backRepeat = ""; - for (let i=0; i${css.toString()}`; - - let cssArray=document.styleSheets[0].cssRules; - // console.log("$$$:", cssArray) - let orangeHoverSelector=""; - let padTop= ""; - let padRight= ""; - let padBottom= ""; - let padLeft= ""; - for (let i=0; i
`. - -```html -

9

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

` por la clase `heart` y observa los resultados. - - - diff --git a/exercises/04.3-id-Selector/README.es.md b/exercises/04.3-id-Selector/README.es.md deleted file mode 100644 index e97a93fa..00000000 --- a/exercises/04.3-id-Selector/README.es.md +++ /dev/null @@ -1,22 +0,0 @@ -# `04.3` Selector de ID - -También puedes seleccionar un elemento por su `#id` y aplicarle estilos. - -#### El selector `#id` - -```css -#small{ - font-size: 9px; -} -``` -Usa la propiedad id del elemento HTML para seleccionarlo. Las IDs deben 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. - -# 📝 Instrucciones: - -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 deleted file mode 100644 index f56541d9..00000000 --- a/exercises/04.3-id-Selector/README.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -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. - -#### The `#id` selector - -```css -#small{ - font-size: 9px; -} -``` -Use the id property of the HTML element to select it. ID's 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: - -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/styles.css b/exercises/04.3-id-Selector/styles.css deleted file mode 100644 index e020d28b..00000000 --- a/exercises/04.3-id-Selector/styles.css +++ /dev/null @@ -1,5 +0,0 @@ -#button1 { - background: #BDBDBD; - border: #5E5E5E; - border-radius: 5px; -} diff --git a/exercises/05-Specificity/README.es.md b/exercises/05-Specificity/README.es.md deleted file mode 100644 index aed4fe28..00000000 --- a/exercises/05-Specificity/README.es.md +++ /dev/null @@ -1,20 +0,0 @@ -# `05` Especificidad - -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. - -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! - -Porque cuanto más específico, más prioridad tiene. - -## 📝 Instrucciones: - - -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. - - -### 💡 Pista: - -Puedes usar la anotació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 deleted file mode 100644 index 0db7bd27..00000000 --- a/exercises/05-Specificity/README.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -tutorial: "https://www.youtube.com/watch?v=3JxXkhxyAnI" ---- - -# `05` Specificity - -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** - -## 📝 Instrucciones: - -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. - - -### 💡 Hint: - -You can use the **!important** annotation: -https://css-tricks.com/when-using-important-is-the-right-choice/ - - diff --git a/exercises/05-Specificity/styles.css b/exercises/05-Specificity/styles.css deleted file mode 100644 index db471c2b..00000000 --- a/exercises/05-Specificity/styles.css +++ /dev/null @@ -1,9 +0,0 @@ -ul li{ - background: blue; -} - -#thirditem{ - background: yellow; -} -/****** DON NOT EDIT ANYTHING ABOVE THIS LINE ****/ - \ No newline at end of file diff --git a/exercises/05-Specificity/tests.js b/exercises/05-Specificity/tests.js deleted file mode 100644 index e53f47cd..00000000 --- a/exercises/05-Specificity/tests.js +++ /dev/null @@ -1,62 +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("You should not change the existing head tag elements", function () { - let head = document.querySelector('head'); - let meta = head.querySelector("meta") - let link = head.querySelector('link').href - let title = head.querySelector('title') - - expect(meta).not.toBe(null) - expect(link).toBe('http://localhost/styles.css') - expect(title).not.toBe(null) - }) - it("You should not delete or edit the existing code", function () { - - 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(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 () { - - document.querySelector( - "head" - ).innerHTML=``; - let cssArray=document.styleSheets[0].cssRules; - // console.log("NEW", cssArray[2].style._importants) - let orangeHoverSelector=""; - for (let i=0; i

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

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 @@ - + 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 +

9

+``` + +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: + + diff --git a/exercises/04.2-Apply-several-classes/README.md b/exercises/05.2-apply-several-classes/README.md similarity index 50% rename from exercises/04.2-Apply-several-classes/README.md rename to exercises/05.2-apply-several-classes/README.md index 27e90240..009f5997 100644 --- a/exercises/04.2-Apply-several-classes/README.md +++ b/exercises/05.2-apply-several-classes/README.md @@ -1,24 +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

9

``` -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: +## 📝 Instructions: + +1. Replace the class property `spades` of the `

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

` with the class `heart` and look at the results. +## 💻 Expected result: - + 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 @@ - + 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 @@ + + + + + + + + +

9

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

should have the "heart" class', () => { + expect(div.classList.contains("heart")).toBe(true); + }); +}); diff --git a/exercises/05.3-id-selector/README.es.md b/exercises/05.3-id-selector/README.es.md new file mode 100644 index 00000000..3c6d469a --- /dev/null +++ b/exercises/05.3-id-selector/README.es.md @@ -0,0 +1,26 @@ +--- +tutorial: "https://www.youtube.com/watch?v=tUpL6lUJItk" +--- + + +# `05.3` The ID CSS Selector + +También puedes seleccionar un elemento por su `#id` y aplicarle estilos. + +## El selector `#id` + +```css +#small{ + font-size: 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. + +*La etiqueta HTML con `id="small"` tendrá un font-size de `9px`.* + +## 📝 Instrucciones: + +1. Añade el id `button1` a la etiqueta `` y compila para ver el resultado en la consola. + + diff --git a/exercises/05.3-id-selector/README.md b/exercises/05.3-id-selector/README.md new file mode 100644 index 00000000..9955f1a1 --- /dev/null +++ b/exercises/05.3-id-selector/README.md @@ -0,0 +1,23 @@ +--- +tutorial: "https://www.youtube.com/watch?v=DtMVtGdStKw" +--- + +# `05.3` The ID CSS Selector + +You can also select an element by `#id` and apply styles to it. + +## The `#id` selector + +```css +#small{ + font-size: 9px; +} +``` + +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. + +*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/index.html b/exercises/05.3-id-selector/index.html similarity index 90% rename from exercises/04.3-id-Selector/index.html rename to exercises/05.3-id-selector/index.html index 5b9a773d..0acb4a27 100644 --- a/exercises/04.3-id-Selector/index.html +++ b/exercises/05.3-id-selector/index.html @@ -3,7 +3,7 @@ diff --git a/exercises/05.3-id-selector/solution.hide.html b/exercises/05.3-id-selector/solution.hide.html new file mode 100644 index 00000000..2e7928b7 --- /dev/null +++ b/exercises/05.3-id-selector/solution.hide.html @@ -0,0 +1,13 @@ + + + + + + + + + I should look like a button + + diff --git a/exercises/05.3-id-selector/styles.css b/exercises/05.3-id-selector/styles.css new file mode 100644 index 00000000..c6058338 --- /dev/null +++ b/exercises/05.3-id-selector/styles.css @@ -0,0 +1,8 @@ +#button1 { + background-color: #4caf50; /* Green */ + color: white; + padding: 15px 32px; + text-align: center; + display: inline-block; + border-radius: 5px; +} diff --git a/exercises/05.3-id-selector/test.js b/exercises/05.3-id-selector/test.js new file mode 100644 index 00000000..ed2b823e --- /dev/null +++ b/exercises/05.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/06-Practicing-Rules/README.es.md b/exercises/06-Practicing-Rules/README.es.md deleted file mode 100644 index f41916d4..00000000 --- a/exercises/06-Practicing-Rules/README.es.md +++ /dev/null @@ -1,26 +0,0 @@ -# `06` Practicando las reglas - -## 📝 Instrucciones: - - -1. Establece esta URL como la imagen de fondo de la página y repítela solo verticalmente: - [06- backgrund vertical](../../.learn/assets/background-vertical.jpg?raw=true) - -2. Cambia el tipo de fuente (`font-type`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`. - -3. Cambia el color del `h1` a rojo(`red`). - -4. Haz todos los `h2` tengan subrayado. - -5. Centra el `h1`. - -6. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer. - -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`/enlace "hover" a verde (`green`) y elimina el subrayado (tienes que colocar el anchor para probarlo). - - -El resultado debería ser algo como esto: - - diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md deleted file mode 100644 index 1cf8c33d..00000000 --- a/exercises/06-Practicing-Rules/README.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" ---- - -# `06` Practicing Rules - -## 📝 Instructions: - - -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-type of the `h1` to `Courier` - and the rest of the website to `Times new Roman`. - -3. Change the color of `h1` to `red`. - -4. Make all the `h2's` with an `underline`. - -5. Center the `h1` to the middle. - -6. Add a `left padding` to the whole document - of `20px` to make it easier to read. - -7. Add a white `semi-transparent background (0.2)` to the `first paragraph` to make it easier to read (you have tu use rgba for that) and write down "3 reasons you know you are learning". 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). - - -The result should be something like this: - - diff --git a/exercises/06-Practicing-Rules/index.html b/exercises/06-Practicing-Rules/index.html deleted file mode 100644 index 4119acb5..00000000 --- a/exercises/06-Practicing-Rules/index.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - - - - - - - -

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/styles.css b/exercises/06-Practicing-Rules/styles.css deleted file mode 100644 index d89b1a47..00000000 --- a/exercises/06-Practicing-Rules/styles.css +++ /dev/null @@ -1 +0,0 @@ -/* add your styles here */ \ No newline at end of file diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js deleted file mode 100644 index 62263d92..00000000 --- a/exercises/06-Practicing-Rules/tests.js +++ /dev/null @@ -1,145 +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 background should match", function () { - 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` - ); - }); - it("the font-family should be 'Times New Roman'", function () { - document.querySelector( - "head" - ).innerHTML=``; - let body=document.querySelector("body"); - let styles=window.getComputedStyle(body); - expect(styles["font-family"]).toBe("Times New Roman"); - }); - it("the padding-left should be '20px'", function () { - document.querySelector( - "head" - ).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 () { - 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"]).toBe("Courier"); - }); - it("the color in the H1 Tag should be 'red'", function () { - 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"); - }); - it("the text-align in the H1 Tag should be 'center'", function () { - document.querySelector( - "head" - ).innerHTML=``; - let h1Tag=document.querySelector("h1"); - let h1TagStyles=window.getComputedStyle(h1Tag); - // 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); - expect(h2TagStyles["text-decoration"]).toBe("underline"); - }); - it("the padding in the #id1 Tag should be '5px'", function () { - 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"); - }); - 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 () { - 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; - console.log("$$$:", cssArray[0]) - let orangeHoverSelector=""; - for (let i=0; i - +

• 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/06-specificity/solution.hide.css b/exercises/06-specificity/solution.hide.css new file mode 100644 index 00000000..fabc5750 --- /dev/null +++ b/exercises/06-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/06-specificity/styles.css b/exercises/06-specificity/styles.css new file mode 100644 index 00000000..1255fbbc --- /dev/null +++ b/exercises/06-specificity/styles.css @@ -0,0 +1,8 @@ +ul li { + background: blue; +} + +li + #thirditem { + background: yellow; +} +/**** DO NOT EDIT ANYTHING ABOVE THIS LINE ****/ diff --git a/exercises/06-specificity/tests.js b/exercises/06-specificity/tests.js new file mode 100644 index 00000000..3ea381ec --- /dev/null +++ b/exercises/06-specificity/tests.js @@ -0,0 +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"); +document.documentElement.innerHTML = html.toString(); + +jest.dontMock('fs'); + +describe("All the styles should be applied", function () { + + 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 = ``; + + 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; + + expect(thirdItSelector).toBe("li + #thirditem"); + expect(thirdItBackground).toBe("yellow"); + expect(cssArray).toBe("ul li"); + expect(cssArrayBackground).toBe("blue"); + }) + test("You should use a more specific rule using the !important annotation", function () { + + document.querySelector( + "head" + ).innerHTML = ``; + 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"); + }); + +}); diff --git a/exercises/07-Very-Specific-Rules/README.es.md b/exercises/07-Very-Specific-Rules/README.es.md deleted file mode 100644 index 9660c5f4..00000000 --- a/exercises/07-Very-Specific-Rules/README.es.md +++ /dev/null @@ -1,20 +0,0 @@ -# `07` Reglas Muy Especificas - -# **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` 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`. - - - - - - diff --git a/exercises/07-Very-Specific-Rules/README.md b/exercises/07-Very-Specific-Rules/README.md deleted file mode 100644 index ac33d20d..00000000 --- a/exercises/07-Very-Specific-Rules/README.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -tutorial: "https://www.youtube.com/watch?v=2YkLDRZFk40" ---- - -# `07` 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` 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. Change the odd rows of the tables to a yellow background using `tr:nth-child`. - - - - - - diff --git a/exercises/07-Very-Specific-Rules/styles.css b/exercises/07-Very-Specific-Rules/styles.css deleted file mode 100644 index defdb77a..00000000 --- a/exercises/07-Very-Specific-Rules/styles.css +++ /dev/null @@ -1,15 +0,0 @@ -/** 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 -**/ - -body { - color: blue; -} - -ul li, -ol li { - color: green; -} diff --git a/exercises/07-Very-Specific-Rules/tests.js b/exercises/07-Very-Specific-Rules/tests.js deleted file mode 100644 index ef3fa28e..00000000 --- a/exercises/07-Very-Specific-Rules/tests.js +++ /dev/null @@ -1,95 +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 ul li color has to be red", function () { - 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 orangeHoverSelector=""; - for (let i=0; i${css.toString()}`; - let cssArray=document.styleSheets[0].cssRules; - - let orangeHoverSelector=""; - for (let i=0; i${css.toString()}`; - 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 existing head tag elements", function () { - let head = document.querySelector('head'); - let meta = head.querySelector("meta") - let link = head.querySelector('link').href - let title = head.querySelector('title') - - expect(meta).not.toBe(null) - expect(link).toBe('http://localhost/styles.css') - expect(title).not.toBe(null) - }) - - - - - -}); \ No newline at end of file diff --git a/exercises/07-practicing-rules/README.es.md b/exercises/07-practicing-rules/README.es.md new file mode 100644 index 00000000..a63c9004 --- /dev/null +++ b/exercises/07-practicing-rules/README.es.md @@ -0,0 +1,23 @@ +# `07` 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` + +2. Cambia el tipo de fuente (`font-family`) del `h1` a `Courier` y el resto del sitio web a `Times New Roman`. + +3. Cambia el color del `h1` a rojo (`red`). + +4. Haz que todos los `h2` tengan subrayado (`underline`). + +5. Agrega un `left padding` a todo el documento de `20px` para que sea más fácil de leer. + +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). + +7. 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). + +## 💻 Resultado esperado: + + diff --git a/exercises/07-practicing-rules/README.md b/exercises/07-practicing-rules/README.md new file mode 100644 index 00000000..cb09ca0d --- /dev/null +++ b/exercises/07-practicing-rules/README.md @@ -0,0 +1,27 @@ +--- +tutorial: "https://www.youtube.com/watch?v=4wguurrl-lU" +--- + +# `07` Practicing Rules + +## 📝 Instructions: + +1. Set this URL as the background image of the page, and repeat it vertically only: `../../.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`. + +3. Change the color of `h1` to `red`. + +4. Make all the `h2` have an `underline`. + +5. Add a `left padding` to the whole document of `20px` to make it easier to read. + +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). + +7. 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). + +## 💻 Expected result: + + diff --git a/exercises/07-practicing-rules/index.html b/exercises/07-practicing-rules/index.html new file mode 100644 index 00000000..b2d40b06 --- /dev/null +++ b/exercises/07-practicing-rules/index.html @@ -0,0 +1,34 @@ + + + + + + + + + + +

+

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

+

+
1. You are able to complete the exercises by yourself.
+
2. You understand what the teacher is talking about.
+
3. 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 9fa6cd25..00000000 --- a/exercises/08-Rounded-Image/README.es.md +++ /dev/null @@ -1,15 +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: - - - -## 📝 Instrucciones: - -Adicionalmente a `border-radius` tenemos que tambien utilizar la propiedad `object-fit`, [aqui hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). - -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 164b2a46..00000000 --- a/exercises/08-Rounded-Image/README.md +++ /dev/null @@ -1,16 +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: - - - -## 📝 Instructions: - -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). - -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 3b84c476..00000000 --- a/exercises/08-Rounded-Image/tests.js +++ /dev/null @@ -1,96 +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'); - let meta = head.querySelector("meta") - let link = head.querySelector('link').href - let title = head.querySelector('title') - - expect(meta).not.toBe(null) - expect(link).toBe('http://localhost/styles.css') - 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`. + + + +> 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`. + + + +> 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 @@ - +

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/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:\s*red\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 97b09262..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: - - - -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 lo presionas, 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 82d9c456..00000000 --- a/exercises/09-Anchor-Styles/tests.js +++ /dev/null @@ -1,66 +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 - + 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/README.es.md b/exercises/10-Your-Own-Font/README.es.md deleted file mode 100644 index 2af962f6..00000000 --- a/exercises/10-Your-Own-Font/README.es.md +++ /dev/null @@ -1,19 +0,0 @@ -# `10` Tu Propia Fuente - -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 - -``` - -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 `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 deleted file mode 100644 index e563b0a1..00000000 --- a/exercises/10-Your-Own-Font/README.md +++ /dev/null @@ -1,19 +0,0 @@ -# `10` Your Own Font - -Yo canfind 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 - -``` - -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. - 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 @@ - - - - - - - - - - - - -

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: + + + +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: - + -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 @@ - + - + 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 b0abc9da..00000000 --- a/exercises/11-Font-Awesome-Icons/README.es.md +++ /dev/null @@ -1,21 +0,0 @@ -# `11` Iconos Font Awesome - -Como desarrollador / diseñador, 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/README.md b/exercises/11-Font-Awesome-Icons/README.md deleted file mode 100644 index 0228acd0..00000000 --- a/exercises/11-Font-Awesome-Icons/README.md +++ /dev/null @@ -1,22 +0,0 @@ -# `11` 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. - -After linking your website with font-awesome, you can use the following to code to insert a specific icon: - -```html - - -``` -You can find all the available names here: http://fontawesome.io/icons/ - - -## 📝 Instructions: - - -Add two more items 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 deleted file mode 100644 index a619ff63..00000000 --- a/exercises/11-Font-Awesome-Icons/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - -

-
• Hello
-

- - diff --git a/exercises/11-Font-Awesome-Icons/tests.js b/exercises/11-Font-Awesome-Icons/tests.js deleted file mode 100644 index 10afe9c1..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 "fa"', 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/11-your-own-font/README.es.md b/exercises/11-your-own-font/README.es.md new file mode 100644 index 00000000..ef1ce4a7 --- /dev/null +++ b/exercises/11-your-own-font/README.es.md @@ -0,0 +1,18 @@ +# `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: + +```html + +``` + +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 `font-family` (familia de fuentes) específica a `.myTitle`. + diff --git a/exercises/11-your-own-font/README.md b/exercises/11-your-own-font/README.md new file mode 100644 index 00000000..234ad01c --- /dev/null +++ b/exercises/11-your-own-font/README.md @@ -0,0 +1,18 @@ +# `11` Your Own Font + +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: + +```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 `

`. + +## 📝 Instructions: + +1. Link any google-font that you like into the website. + +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 @@ + + + + + + + + + + + +

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 @@ + + + + + + + + + + + + + +

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.es.md b/exercises/12-Relative-Length-EM-REM/README.es.md deleted file mode 100644 index 449c18ca..00000000 --- a/exercises/12-Relative-Length-EM-REM/README.es.md +++ /dev/null @@ -1,25 +0,0 @@ -# `12` Longitud Relativa EM, REM - -Hasta ahora, hemos trabajado con píxeles como unidad de medida, por ejemplo, diciendo que un contenedor o caja tiene `100px` de ancho. - -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: - -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. - -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.8em` a ambos `h2` -2. Ahora asigna un `font-size` de `0.8rem` a ambos `h3` - - -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 deleted file mode 100644 index 70e0f727..00000000 --- a/exercises/12-Relative-Length-EM-REM/README.md +++ /dev/null @@ -1,27 +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: - - - 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 1344fed0..00000000 --- a/exercises/12-Relative-Length-EM-REM/tests.js +++ /dev/null @@ -1,66 +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'); - let meta = head.querySelector("meta") - let link = head.querySelector('link').href - let title = head.querySelector('title') - - expect(meta).not.toBe(null) - expect(link).toBe('http://localhost/styles.css') - 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/12-font-awesome-icons/README.md b/exercises/12-font-awesome-icons/README.md new file mode 100644 index 00000000..c37d7496 --- /dev/null +++ b/exercises/12-font-awesome-icons/README.md @@ -0,0 +1,21 @@ +# `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 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 icons here: https://fontawesome.com/search?o=r&m=free* + +## 📝 Instructions: + +1. Add two more items (`li`) into your list and add a different icon at the beginning of each item. + diff --git a/exercises/12-font-awesome-icons/index.html b/exercises/12-font-awesome-icons/index.html new file mode 100644 index 00000000..3495c6b5 --- /dev/null +++ b/exercises/12-font-awesome-icons/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + +

+
• 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 @@ + + + + + + + + + + +

+
• 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 24029f23..00000000 --- a/exercises/13-Anchor-Like-Button/README.es.md +++ /dev/null @@ -1,23 +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 su 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 (`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 de hover: cambie el fondo del botón a un color naranja más oscuro. - - diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md deleted file mode 100644 index f9bf6617..00000000 --- a/exercises/13-Anchor-Like-Button/README.md +++ /dev/null @@ -1,21 +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. - - \ 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 0b53d9f6..00000000 --- a/exercises/13-Anchor-Like-Button/tests.js +++ /dev/null @@ -1,104 +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'); - let meta = head.querySelector("meta") - let link = head.querySelector('link').href - let title = head.querySelector('title') - - expect(meta).not.toBe(null) - expect(link).toBe('http://localhost/styles.css') - expect(title).not.toBe(null) - }) - -}); diff --git a/exercises/13-relative-length-em-rem/README.es.md b/exercises/13-relative-length-em-rem/README.es.md new file mode 100644 index 00000000..445d2c7f --- /dev/null +++ b/exercises/13-relative-length-em-rem/README.es.md @@ -0,0 +1,29 @@ +# `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`: + +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. + +## 📝 Instrucciones: + +1. Proporciona un `font-size` de `0.8em` a ambos `h2`. + +2. Ahora asigna un `font-size` de `0.8rem` a ambos `h3`. + +## 💻 Resultado esperado: + + + + 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: + + + + 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,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: + + 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: + + 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 @@ - + 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 044f86f1..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, - "graded": false, - "config": { - "disableGrading": true, - "editor": { - "version": "1.0.69" + "videoSolutions": true, + "bugsLink": "https://github.com/learnpack/learnpack/issues/new", + "projectType": "tutorial", + "autoPlay": "true", + "graded": true, + "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" } } }