+ 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/02.2-rbga-colors/index.html b/exercises/02.2-rbga-colors/index.html new file mode 100644 index 00000000..39661132 --- /dev/null +++ b/exercises/02.2-rbga-colors/index.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/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/02.3-your-second-style/README.es.md b/exercises/02.3-your-second-style/README.es.md new file mode 100644 index 00000000..a6e3630c --- /dev/null +++ b/exercises/02.3-your-second-style/README.es.md @@ -0,0 +1,21 @@ +--- +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 los anchors de mi sitio web (etiquetas ``) sean azules: + +```css +a { + color: blue; +} +``` + +## 📝 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 (`blue`), es decir, toda la página azul. diff --git a/exercises/01-Your-First-Style/README.md b/exercises/02.3-your-second-style/README.md similarity index 55% rename from exercises/01-Your-First-Style/README.md rename to exercises/02.3-your-second-style/README.md index 4764bd90..8918e346 100644 --- a/exercises/01-Your-First-Style/README.md +++ b/exercises/02.3-your-second-style/README.md @@ -1,8 +1,12 @@ -# `01` Your First Style +--- +tutorial: "https://www.youtube.com/watch?v=ituoKgAh6ds" +--- + +# `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 { @@ -13,5 +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 of the page (the whole page blue). -3. Test the exercise for auto-graded corrections. + +2. Run and preview the exercise and your result should be a blue `body` (the whole page blue). diff --git a/exercises/02.3-your-second-style/index.html b/exercises/02.3-your-second-style/index.html new file mode 100644 index 00000000..998d973a --- /dev/null +++ b/exercises/02.3-your-second-style/index.html @@ -0,0 +1,11 @@ + + + + + + + Hello! My background should be blue! + + 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.md b/exercises/03-Inline-Styles/README.md deleted file mode 100644 index ee647049..00000000 --- a/exercises/03-Inline-Styles/README.md +++ /dev/null @@ -1,25 +0,0 @@ -# `03` Inline Styles - -Inline styles are a very bad idea unless you have no choice (and that's a very uncommon situation). Sadly, we have to teach you how to do it because there is a chance you will need to use them at some point. - -To use inline styles, instead of declaring a `; + 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/03.1-background/README.md b/exercises/03.1-background/README.md new file mode 100644 index 00000000..3580ab7e --- /dev/null +++ b/exercises/03.1-background/README.md @@ -0,0 +1,31 @@ +--- +tutorial: "https://www.youtube.com/watch?v=fQh2OulBSp8" +--- + +# `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 it is being applied, among other properties that can be modified. + +## 📝 Instructions: + +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. Run and Preview the exercise again. + +5. Change the background-repeat to 'repeat' to make it repeat over the x-axis and y-axis. + +6. Run and Preview the exercise again. + + +## 💡 Hint: + +Google is your best friend: + +- 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/03.1-background/index.html b/exercises/03.1-background/index.html new file mode 100644 index 00000000..a1227330 --- /dev/null +++ b/exercises/03.1-background/index.html @@ -0,0 +1,10 @@ + + + + + + + + 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-Background/styles.css b/exercises/03.1-background/styles.css similarity index 100% rename from exercises/02-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-Combined-Rules/README.md b/exercises/04-Combined-Rules/README.md deleted file mode 100644 index 1dea5712..00000000 --- a/exercises/04-Combined-Rules/README.md +++ /dev/null @@ -1,32 +0,0 @@ -# `04` 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. - - - -P.S: 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 background-size: http://lmgtfy.com/?q=css+padding diff --git a/exercises/04-Combined-Rules/index.js b/exercises/04-Combined-Rules/index.js deleted file mode 100644 index ee1aa2a5..00000000 --- a/exercises/04-Combined-Rules/index.js +++ /dev/null @@ -1 +0,0 @@ -//nothing to see here diff --git a/exercises/04-Combined-Rules/tests.js b/exercises/04-Combined-Rules/tests.js deleted file mode 100644 index effb2c8f..00000000 --- a/exercises/04-Combined-Rules/tests.js +++ /dev/null @@ -1,176 +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-1).toBeFalsy(); - }) -}); 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/05-Specificity/README.md b/exercises/05-Specificity/README.md deleted file mode 100644 index 9e63cfa6..00000000 --- a/exercises/05-Specificity/README.md +++ /dev/null @@ -1,21 +0,0 @@ -# `05` Specificity - -When creating a CSS document, you need to start from the most generic selector and end with the most specific ones, that is the way CSS works. - -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. Period! - -Because the more specific, the more priority it has. - -## 📝 Instructions: - -```Plain/Text -1. Override the background-color of #thirditem without deleting any css code, simply append to the css a more specific rule at the end of the document to override the background-color to green. -``` - -Tip: - -You can use the **!important** annotation: -https://css-tricks.com/when-using-important-is-the-right-choice/ - - diff --git a/exercises/05-Specificity/index.html b/exercises/05-Specificity/index.html deleted file mode 100644 index 5a175de0..00000000 --- a/exercises/05-Specificity/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - -
-
• 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 fifth item of the list
-
- diff --git a/exercises/05-Specificity/index.js b/exercises/05-Specificity/index.js deleted file mode 100644 index ee1aa2a5..00000000 --- a/exercises/05-Specificity/index.js +++ /dev/null @@ -1 +0,0 @@ -//nothing to see here 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 407a91f8..00000000 --- a/exercises/05-Specificity/tests.js +++ /dev/null @@ -1,69 +0,0 @@ -const fs=require("fs"); -const path=require("path"); -const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); -const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); - -jest.dontMock("fs"); - -describe("All the styles should be applied", function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML=html.toString(); - - }); - afterEach(() => { - jest.resetModules(); - }); - - - it("You should not change the head tag", function () { - - let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("-1).toBeFalsy(); - - - - - - }) - 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/05-class-selector/index.html b/exercises/05-class-selector/index.html new file mode 100644 index 00000000..03662721 --- /dev/null +++ b/exercises/05-class-selector/index.html @@ -0,0 +1,12 @@ + + + + + + + + +

Hello!

+

World!

+ + 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/05-class-selector/styles.css b/exercises/05-class-selector/styles.css new file mode 100644 index 00000000..ffec43c5 --- /dev/null +++ b/exercises/05-class-selector/styles.css @@ -0,0 +1,3 @@ +.b-blue { + background: blue; +} 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/05.1-combined-rules/index.html b/exercises/05.1-combined-rules/index.html new file mode 100644 index 00000000..bca34a30 --- /dev/null +++ b/exercises/05.1-combined-rules/index.html @@ -0,0 +1,11 @@ + + + + + + + + +

Hello!
+ + 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-Combined-Rules/styles.css b/exercises/05.1-combined-rules/styles.css similarity index 51% rename from exercises/04-Combined-Rules/styles.css rename to exercises/05.1-combined-rules/styles.css index 5a0beb4e..6313a1bc 100644 --- a/exercises/04-Combined-Rules/styles.css +++ b/exercises/05.1-combined-rules/styles.css @@ -5,8 +5,9 @@ padding-left: 30px; padding-right: 190px; padding-bottom: 50px; - background: rgb(189, 189, 189); - background-image: url(https://assets.breatheco.de/apis/img/funny/baby.jpg); + + background: rgb(189, 189, 189); + background-image: url(https://github.com/4GeeksAcademy/css-tutorial-exercises-course/blob/3a2d1dd03f58167a5a4894155af2d3aa4d41d647/.learn/assets/baby.jpg?raw=true); background-position-x: 100px; background-repeat: no-repeat; background-size: contain; 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/05.2-apply-several-classes/README.md b/exercises/05.2-apply-several-classes/README.md new file mode 100644 index 00000000..009f5997 --- /dev/null +++ b/exercises/05.2-apply-several-classes/README.md @@ -0,0 +1,27 @@ +--- +tutorial: "https://www.youtube.com/watch?v=RISEpELEzEk" +--- + +# `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 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 `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: + +1. Replace the class property `spades` of the `

` with the class `heart` and look at the results. + +## 💻 Expected result: + + diff --git a/exercises/05.2-apply-several-classes/index.html b/exercises/05.2-apply-several-classes/index.html new file mode 100644 index 00000000..3a293815 --- /dev/null +++ b/exercises/05.2-apply-several-classes/index.html @@ -0,0 +1,11 @@ + + + + + + + + +

9

+ + 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/05.2-apply-several-classes/styles.css b/exercises/05.2-apply-several-classes/styles.css new file mode 100644 index 00000000..9995d367 --- /dev/null +++ b/exercises/05.2-apply-several-classes/styles.css @@ -0,0 +1,25 @@ +.card { + width: 150px; + height: 240px; + border: 1px solid black; + text-align: center; + line-height: 240px; + border-radius: 5px; + font-size: 1.5rem; +} +.card:after { + font-size: 80%; + font-weight: bold; +} + +.spades, +.spades:after { + content: "♤"; + color: black; +} + +.heart, +.heart:after { + content: "♡"; + color: red; +} 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/05.3-id-selector/index.html b/exercises/05.3-id-selector/index.html new file mode 100644 index 00000000..0acb4a27 --- /dev/null +++ b/exercises/05.3-id-selector/index.html @@ -0,0 +1,13 @@ + + + + + + + + + I should look like a button + + 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.md b/exercises/06-Practicing-Rules/README.md deleted file mode 100644 index ce483df3..00000000 --- a/exercises/06-Practicing-Rules/README.md +++ /dev/null @@ -1,32 +0,0 @@ -# `06` Practicing Rules - -## 📝 Instructions: - - -1. Set this URL as the background image of the page, and repeat it vertically only: - http://assets.breatheco.de/apis/img/bg/background-vertical.jpg - -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 - of "3 reasons you know you are learning" to make it easier to - read (you have tu use rgba for that), and then apply a padding - of 5px to all sides of that paragraph. - -8. Change the anchor "hover" color to green and remove the underline. - (you have to actually hover the anchor to test it). - - -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 20429582..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 -

- - diff --git a/exercises/06-Practicing-Rules/index.js b/exercises/06-Practicing-Rules/index.js deleted file mode 100644 index ee1aa2a5..00000000 --- a/exercises/06-Practicing-Rules/index.js +++ /dev/null @@ -1 +0,0 @@ -//nothing to see here diff --git a/exercises/06-Practicing-Rules/styles.css b/exercises/06-Practicing-Rules/styles.css deleted file mode 100644 index e69de29b..00000000 diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js deleted file mode 100644 index d3450b3c..00000000 --- a/exercises/06-Practicing-Rules/tests.js +++ /dev/null @@ -1,147 +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(http://assets.breatheco.de/apis/img/bg/background-vertical.jpg) 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-1).toBeFalsy(); - }) - -}); diff --git a/exercises/06-specificity/README.es.md b/exercises/06-specificity/README.es.md new file mode 100644 index 00000000..8bcfcfbe --- /dev/null +++ b/exercises/06-specificity/README.es.md @@ -0,0 +1,15 @@ +# `06` Specificity + +Al crear un documento CSS, se debe comenzar desde el selector más genérico y terminar con el más específico, esa es la forma en que funciona CSS. + +Se trata del nivel de **especificidad**. Si especificas que tu `div` con `id="thirditem"` tiene un fondo (`background-color`) azul (`blue`), y más adelante en el documento especificas que todos los `divs` tendrán un fondo amarillo (`yellow`), `#thirditem` mantendrá su fondo azul (`blue`). ¡Y punto! + +*Porque cuanto más específico, más prioridad tiene.* + +## 📝 Instrucciones: + +1. Anula el color de fondo (`background`) de `#thirditem` sin eliminar ningún código CSS, simplemente agrega al CSS una regla más específica al final del documento para anular el color de fondo a verde. + +## 💡 Pista: + ++ Puedes usar la notación `!important` : https://css-tricks.com/when-using-important-is-the-right-choice/ diff --git a/exercises/06-specificity/README.md b/exercises/06-specificity/README.md new file mode 100644 index 00000000..1209b477 --- /dev/null +++ b/exercises/06-specificity/README.md @@ -0,0 +1,22 @@ +--- +tutorial: "https://www.youtube.com/watch?v=3JxXkhxyAnI" +--- + +# `06` 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 yellow background, and later in the document you specify that all `divs` will have blue background, `#thirditem` will keep his yellow background. punto! + +*Because the more specific, the more priority it has.* + +## 📝 Instructions: + +1. Override the `background` of `#thirditem` without deleting any CSS code, simply append to the CSS a more specific rule at the end of the document to override the background-color to green. + +## 💡 Hint: + +You can use the `!important` annotation: +https://css-tricks.com/when-using-important-is-the-right-choice/ + + diff --git a/exercises/06-specificity/index.html b/exercises/06-specificity/index.html new file mode 100644 index 00000000..e8a9b98d --- /dev/null +++ b/exercises/06-specificity/index.html @@ -0,0 +1,18 @@ + + + + + + + + + +

+
• My first item of the list
+
• My second item of the list
+
• My third 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.md b/exercises/07-Very-Specific-Rules/README.md deleted file mode 100644 index 42688f61..00000000 --- a/exercises/07-Very-Specific-Rules/README.md +++ /dev/null @@ -1,18 +0,0 @@ -# `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. Make the odd rows of the tables with yellow background using **tr:nth-child**. - - - - - - diff --git a/exercises/07-Very-Specific-Rules/index.js b/exercises/07-Very-Specific-Rules/index.js deleted file mode 100644 index ee1aa2a5..00000000 --- a/exercises/07-Very-Specific-Rules/index.js +++ /dev/null @@ -1 +0,0 @@ -//nothing to see here 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 5f68ba04..00000000 --- a/exercises/07-Very-Specific-Rules/tests.js +++ /dev/null @@ -1,97 +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 head tag", function () { - - let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("-1).toBeFalsy(); - }) - - - - - -}); \ 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.md b/exercises/08-Rounded-Image/README.md deleted file mode 100644 index 5edb6d69..00000000 --- a/exercises/08-Rounded-Image/README.md +++ /dev/null @@ -1,26 +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: - - - -Instead of doing that, the right approach will be to create a squared div (a.ka: with equal width and height), assign the image as a background, and then apply a border-radius to that div. - -If the image ends up being bigger than the div (or with different proportions) we can adjust the background-position or background-size to choose what part of the image we want to display inside of the circle. - -## 📝 Instructions: - - -1. Instead of doing that, the right approach will -be to create a squared div (a.ka: with equal width -and height), assign the image as a background, and -then apply a border-radius to that div. - -2. If the image ends up being bigger than the div -(or with different proportions) we can adjust the -background-position or background-size to choose -what part of the image we want to display inside -of the circle. - diff --git a/exercises/08-Rounded-Image/index.js b/exercises/08-Rounded-Image/index.js deleted file mode 100644 index ee1aa2a5..00000000 --- a/exercises/08-Rounded-Image/index.js +++ /dev/null @@ -1 +0,0 @@ -//nothing to see here diff --git a/exercises/08-Rounded-Image/tests.js b/exercises/08-Rounded-Image/tests.js deleted file mode 100644 index d2c7c36f..00000000 --- a/exercises/08-Rounded-Image/tests.js +++ /dev/null @@ -1,98 +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 head tag", function () { - - let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("-1).toBeFalsy(); - }) -}); 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.md b/exercises/09-Anchor-Styles/README.md deleted file mode 100644 index 8b91284c..00000000 --- a/exercises/09-Anchor-Styles/README.md +++ /dev/null @@ -1,24 +0,0 @@ -# `09` 3D Anchor Styles - -People like to feel that they are clicking on something, a great approach to accomplish that is by faking a 3D effect. To do so, designers normally play with the borders. Example: - - - -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 - to the anchor while being 'pressed' */ -} -``` - -## 📝 Instructions: - - -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.js b/exercises/09-Anchor-Styles/index.js deleted file mode 100644 index ee1aa2a5..00000000 --- a/exercises/09-Anchor-Styles/index.js +++ /dev/null @@ -1 +0,0 @@ -//nothing to see here diff --git a/exercises/09-Anchor-Styles/tests.js b/exercises/09-Anchor-Styles/tests.js deleted file mode 100644 index 8e4baa92..00000000 --- a/exercises/09-Anchor-Styles/tests.js +++ /dev/null @@ -1,68 +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-1).toBeFalsy(); - }) -}); - - diff --git a/exercises/09-rounded-image/README.es.md b/exercises/09-rounded-image/README.es.md new file mode 100644 index 00000000..16a1bdde --- /dev/null +++ b/exercises/09-rounded-image/README.es.md @@ -0,0 +1,25 @@ +# `09` Rounded Image + +Muchos sitios web usan imágenes de perfil redondeadas, ¡una técnica que realmente hace que un sitio web sea más hermoso! + +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: + +1. Usa `border-radius`. + +2. Usa las propiedades `width` y `height` para hacer que la imagen sea cuadrada. + +3. Además de `border-radius`, tenemos que utilizar también la propiedad `object-fit`, [aquí hay una explicación](https://www.loom.com/share/15186e456dfd4741887997af40325721). + +## 💡 Pistas: + ++ Si la imagen es más grande que su contenedor y quieres centrarla o enfocarte en una zona en particular, puedes utilizar `object-position`. + ++ En este artículo puedes leer más [sobre la propiedad `object-fit`](https://css-tricks.com/on-object-fit-and-object-position/). + ++ Adicionalmente, puedes [leer la documentación de `object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) y [la documentación de `object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). diff --git a/exercises/09-rounded-image/README.md b/exercises/09-rounded-image/README.md new file mode 100644 index 00000000..f44b0c22 --- /dev/null +++ b/exercises/09-rounded-image/README.md @@ -0,0 +1,26 @@ +# `09` Rounded Image + +A lot of websites use rounded profile images, a technique that really makes a website more beautiful! + +The obvious way to create a rounded profile picture is to create an image tag and apply `border-radius:100%`. + +The problem with this approach is that it only works for squared pictures... Profile pictures with different height and width will not look like a circle, they will look like ovals: + + + +## 📝 Instructions: + +1. Use `border-radius`. + +2. Use the properties `width` and `height` to make the image a square shape. + +3. In this case, in addition to `border-radius`, you will have to use the `object-fit` CSS property, [here is an explanation](https://www.loom.com/share/15186e456dfd4741887997af40325721). + + +## 💡 Hints: + ++ If the image ends up being bigger than its container (or with different proportions) you can adjust the `object-position` to choose what part of the image you want to display inside of the circle. + ++ You can also read [this great article about `object-fit`](https://css-tricks.com/on-object-fit-and-object-position/). + ++ Additionally you can [read the documentation on `object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) and [the documentation on `object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). diff --git a/exercises/03-Inline-Styles/index.html b/exercises/09-rounded-image/index.html similarity index 54% rename from exercises/03-Inline-Styles/index.html rename to exercises/09-rounded-image/index.html index d8515ab6..52ff462d 100644 --- a/exercises/03-Inline-Styles/index.html +++ b/exercises/09-rounded-image/index.html @@ -4,17 +4,10 @@ - + - - - - - - - -

Hello

My brother

+ 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.md b/exercises/10-Your-Own-Font/README.md deleted file mode 100644 index d814360a..00000000 --- a/exercises/10-Your-Own-Font/README.md +++ /dev/null @@ -1,18 +0,0 @@ -# `10` Your Own Font - -Google Fonts can be found here: https://fonts.google.com - -After you pick your favorite one, you can use it by linking your website with the URL in which the font is stored. You have to do that in the tag of the HTML document like this: - -```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/index.js b/exercises/10-Your-Own-Font/index.js deleted file mode 100644 index ee1aa2a5..00000000 --- a/exercises/10-Your-Own-Font/index.js +++ /dev/null @@ -1 +0,0 @@ -//nothing to see here 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/10-anchor-styles/README.md b/exercises/10-anchor-styles/README.md new file mode 100644 index 00000000..28134918 --- /dev/null +++ b/exercises/10-anchor-styles/README.md @@ -0,0 +1,22 @@ +# `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: + +```css +a:active { + /* 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: + +```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.md b/exercises/11-Font-Awesome-Icons/README.md deleted file mode 100644 index 7a03a637..00000000 --- a/exercises/11-Font-Awesome-Icons/README.md +++ /dev/null @@ -1,20 +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 - "camera-retro" will be the name of the icon, -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/index.js b/exercises/11-Font-Awesome-Icons/index.js deleted file mode 100644 index ee1aa2a5..00000000 --- a/exercises/11-Font-Awesome-Icons/index.js +++ /dev/null @@ -1 +0,0 @@ -//nothing to see here 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/04-Combined-Rules/index.html b/exercises/11-your-own-font/index.html similarity index 64% rename from exercises/04-Combined-Rules/index.html rename to exercises/11-your-own-font/index.html index e00cf882..971a51b4 100644 --- a/exercises/04-Combined-Rules/index.html +++ b/exercises/11-your-own-font/index.html @@ -3,13 +3,12 @@ + + - + - -

Hello!

+

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.md b/exercises/12-Relative-Length-EM-REM/README.md deleted file mode 100644 index 0881afa8..00000000 --- a/exercises/12-Relative-Length-EM-REM/README.md +++ /dev/null @@ -1,22 +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. -```Plain/Text -em: Relative to the current font-size of the parent. -rem: Relative to the original font-size of the page. -``` -## 📝 Instructions: - -1. Give a font-size of 0.8em to both h2's -2. Now give a font-size of 0.8rem to both h3's - - -The result should look like this: - - - diff --git a/exercises/12-Relative-Length-EM-REM/index.js b/exercises/12-Relative-Length-EM-REM/index.js deleted file mode 100644 index ee1aa2a5..00000000 --- a/exercises/12-Relative-Length-EM-REM/index.js +++ /dev/null @@ -1 +0,0 @@ -//nothing to see here 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 08d54b0e..00000000 --- a/exercises/12-Relative-Length-EM-REM/tests.js +++ /dev/null @@ -1,68 +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 has 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 has 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 head tag", function () { - - let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("-1).toBeFalsy(); - }) - -}); 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/08-Rounded-Image/index.html b/exercises/12-font-awesome-icons/index.html similarity index 52% rename from exercises/08-Rounded-Image/index.html rename to exercises/12-font-awesome-icons/index.html index f8637953..3495c6b5 100644 --- a/exercises/08-Rounded-Image/index.html +++ b/exercises/12-font-awesome-icons/index.html @@ -4,10 +4,12 @@ - + + - - +

+
• 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.md b/exercises/13-Anchor-Like-Button/README.md deleted file mode 100644 index e1e29817..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 - - -1.Inside of the :hover selector change the background of the button to a darker orange. - diff --git a/exercises/13-Anchor-Like-Button/index.js b/exercises/13-Anchor-Like-Button/index.js deleted file mode 100644 index ee1aa2a5..00000000 --- a/exercises/13-Anchor-Like-Button/index.js +++ /dev/null @@ -1 +0,0 @@ -//nothing to see here 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 554fef41..00000000 --- a/exercises/13-Anchor-Like-Button/tests.js +++ /dev/null @@ -1,111 +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 head tag", function () { - - let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("-1).toBeFalsy(); - - - - - - }) - -}); 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 new file mode 100644 index 00000000..b914a96c --- /dev/null +++ b/learn.json @@ -0,0 +1,37 @@ +{ + "slug": "css-tutorial-exercises-course", + "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": { + "us": "Learn CSS with Interactive Exercises", + "es": "Aprende CSS con Ejercicios Interactivos" + }, + "intro": "https://www.youtube.com/watch?v=BDKdUPDez-U", + "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", + "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" + } + } +} diff --git a/preview.png b/preview.png new file mode 100644 index 00000000..e7695ce4 Binary files /dev/null and b/preview.png differ