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: +```Plain/Text +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 -Run the exercise. -Change the background-size to "contain" (check the index.css tab). -Run the exercise again. -Change the background-repeat to inherit to make it repeat over the x axis and y axis. -Run the exercise again. +``` +The result should look like this: + Hint: diff --git a/exercises/12-Relative-Length-EM-REM/index.html b/exercises/12-Relative-Length-EM-REM/index.html index e5ddcd6d..cf464ed8 100644 --- a/exercises/12-Relative-Length-EM-REM/index.html +++ b/exercises/12-Relative-Length-EM-REM/index.html @@ -4,11 +4,18 @@ + -

- This is my description, it needs to be long because is supposed to be a - paragraph and not a title. -

+

+

First h2 heading

+

First h3 heading

+

Here is some nice fake content

+

+

+

Second h2 heading

+

Second h3 heading

+

More fake content but now in the second container

+

diff --git a/exercises/12-Relative-Length-EM-REM/styles.css b/exercises/12-Relative-Length-EM-REM/styles.css index e69de29b..bfba63b9 100644 --- a/exercises/12-Relative-Length-EM-REM/styles.css +++ b/exercises/12-Relative-Length-EM-REM/styles.css @@ -0,0 +1,8 @@ +#my-first-div { + font-size: 15px; +} +#the-second-one { + font-size: 25px; +} + +/* YOUR CODE BELOW THIS LINE */ diff --git a/exercises/12-Relative-Length-EM-REM/tests.js b/exercises/12-Relative-Length-EM-REM/tests.js index 48541114..66036afe 100644 --- a/exercises/12-Relative-Length-EM-REM/tests.js +++ b/exercises/12-Relative-Length-EM-REM/tests.js @@ -1,54 +1,48 @@ +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 Head tag should not includes a Style tag", function () { + expect(html.toString().indexOf(`-1).toBeFalsy(); + }); + it("The H2 Tag has to have font-size: 0.8em", function () { + // get computed styles of any element you like + const h2Tag=document.querySelector("h2"); + var styles=window.getComputedStyle(h2Tag); + expect(styles["font-size"]).toBe("0.8em"); + }); + it("The H3 Tag has to have font-size: 0.8rem", function () { + // get computed styles of any element you like + 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 () { + 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 () { + let cssArray=document.styleSheets[0].cssRules[1].selectorText; + expect(cssArray).toBe("#the-second-one"); + } + ) -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 background should be blue', function () { - - // get computed styles of any element you like - const body = document.querySelector('body'); - var styles = window.getComputedStyle(body); - expect(styles["background-color"]).toBe("blue"); - }); }); - - -describe('All the html should match', function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML = html.toString(); - }); - afterEach(() => { jest.resetModules(); }); - - it('the html code should contain a p tag', function () { - - // we can read from the source code - console.log(html.toString()); - expect(html.toString().indexOf(` -1).toBeTruthy(); - - //or use query selector to compare hoy mane scriptags do we have - const pTags = document.querySelectorAll("p"); - expect(pTags.length).toBe(1); - }); - - - it('the p tag should have a class "big"', function () { - - //or use query selector to compare hoy mane scriptags do we have - const p = document.querySelector("p"); - expect(p.classList.contains("big")).toBeTruthy(); - }); -}); \ No newline at end of file From ed1cd317505cb45e47644e8c5f295653b7757150 Mon Sep 17 00:00:00 2001 From: plucodev Date: Sun, 11 Aug 2019 22:26:13 -0400 Subject: [PATCH 23/25] fixed issues 13 --- exercises/13-Anchor-Like-Button/README.md | 22 +++-- exercises/13-Anchor-Like-Button/index.html | 6 +- exercises/13-Anchor-Like-Button/styles.css | 7 ++ exercises/13-Anchor-Like-Button/tests.js | 98 +++++++++++++--------- 4 files changed, 80 insertions(+), 53 deletions(-) diff --git a/exercises/13-Anchor-Like-Button/README.md b/exercises/13-Anchor-Like-Button/README.md index fe2e5f49..be27d0aa 100644 --- a/exercises/13-Anchor-Like-Button/README.md +++ b/exercises/13-Anchor-Like-Button/README.md @@ -1,15 +1,21 @@ # `13` Anchor Like Button -The "background" CSS rule allows us to assign and work with the background of any container- the background can be a color or an image. If it is an image you can specify if you want the image to repeat horizontally, vertically, both, or not at all, and you can also specify if you want it to resize and fit the whole container where its being applied, among other properties that can be modified. +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: -Run the exercise. -Change the background-size to "contain" (check the index.css tab). -Run the exercise again. -Change the background-repeat to inherit to make it repeat over the x axis and y axis. -Run the exercise again. +```Plain/Text +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 +``` -Hint: + -- How to use the background-size: http://lmgtfy.com/?q=css+background-size +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 + +```Plain/Text +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.html b/exercises/13-Anchor-Like-Button/index.html index e5ddcd6d..38f3abf1 100644 --- a/exercises/13-Anchor-Like-Button/index.html +++ b/exercises/13-Anchor-Like-Button/index.html @@ -4,11 +4,9 @@ + -

- This is my description, it needs to be long because is supposed to be a - paragraph and not a title. -

+ Beautiful Button diff --git a/exercises/13-Anchor-Like-Button/styles.css b/exercises/13-Anchor-Like-Button/styles.css index e69de29b..93996cbd 100644 --- a/exercises/13-Anchor-Like-Button/styles.css +++ b/exercises/13-Anchor-Like-Button/styles.css @@ -0,0 +1,7 @@ +.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 index 48541114..2d9ada29 100644 --- a/exercises/13-Anchor-Like-Button/tests.js +++ b/exercises/13-Anchor-Like-Button/tests.js @@ -1,54 +1,70 @@ +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 divTag=null +let classTagStyles=null +jest.dontMock("fs"); -const fs = require('fs'); -const path = require('path'); -const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); -const css = fs.readFileSync(path.resolve(__dirname, './styles.css'), 'utf8'); -jest.dontMock('fs'); -describe('All the styles should be applied', function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML = html.toString(); +describe("All the styles should be applied", function () { + beforeEach(() => { + //here I import the HTML into the document + document.documentElement.innerHTML=html.toString(); + // let classTagStyles = window.getComputedStyle( + // document.querySelector(".orange-btn") + // ); + //apply the styles from the stylesheet if needed + document.querySelector( + "head" + ).innerHTML=``; + divTag=document.querySelector(".orange-btn"); + classTagStyles=window.getComputedStyle(divTag); + }); + afterEach(() => { + jest.resetModules(); + }); - //apply the styles from the stylesheet if needed - document.querySelector('head').innerHTML = ``; - }); - afterEach(() => { jest.resetModules(); }); + it("the padding should be '10px'", function () { - it('the background should be blue', function () { - - // get computed styles of any element you like - const body = document.querySelector('body'); - var styles = window.getComputedStyle(body); - expect(styles["background-color"]).toBe("blue"); - }); -}); + expect(classTagStyles["padding"]).toBe("10px"); + }); + it("the border radius should be '4px'", function () { + expect(classTagStyles["border-radius"]).toBe("4px"); + }); + it("the border should be '1px solid #ffffff;'", function () { -describe('All the html should match', function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML = html.toString(); - }); - afterEach(() => { jest.resetModules(); }); + expect(classTagStyles["border"]).toBe("1px solid #ffffff"); + }); + it("the background should be 'rgb(255, 153, 51)'", function () { - it('the html code should contain a p tag', function () { + expect(classTagStyles["background"]).toBe("rgb(255, 153, 51)"); + }); + it("the underline should to be removed", function () { - // we can read from the source code - console.log(html.toString()); - expect(html.toString().indexOf(` -1).toBeTruthy(); + expect(classTagStyles["text-decoration"]).toBe("none"); + }); + it("The Mouse hover property should be blue", 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 Date: Mon, 12 Aug 2019 09:52:20 -0400 Subject: [PATCH 24/25] fixed issues 06 --- exercises/06-Practicing-Rules/README.md | 14 +++- exercises/06-Practicing-Rules/tests.js | 97 +++++++++++++++---------- 2 files changed, 67 insertions(+), 44 deletions(-) diff --git a/exercises/06-Practicing-Rules/README.md b/exercises/06-Practicing-Rules/README.md index 73fbcc78..2d7856fd 100644 --- a/exercises/06-Practicing-Rules/README.md +++ b/exercises/06-Practicing-Rules/README.md @@ -6,7 +6,8 @@ 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. +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. @@ -14,11 +15,16 @@ 5. Center the h1 to the middle. -6. Add a left padding to the whole document of 20px to make it easier to read. +6. Add a left padding to the whole document + of 20px to make it easier to read. -7. Add a white semi-transparent background 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. +7. Add a white semi-transparent background to the first paragraph + of "3 reasons you know you are learning" to make it easier to + read (you have tu use rgba for that), and then apply a padding + of 5px to all sides of that paragraph. -8. Change the anchor "hover" color to green and remove the underline. (you have to actually hover the anchor to test it). +8. Change the anchor "hover" color to green and remove the underline. + (you have to actually hover the anchor to test it). ``` The result should be something like this: diff --git a/exercises/06-Practicing-Rules/tests.js b/exercises/06-Practicing-Rules/tests.js index 75eb0bfd..92f05293 100644 --- a/exercises/06-Practicing-Rules/tests.js +++ b/exercises/06-Practicing-Rules/tests.js @@ -1,82 +1,99 @@ -const fs = require("fs"); -const path = require("path"); -const html = fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); -const css = fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); - +const fs=require("fs"); +const path=require("path"); +const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); +const css=fs.readFileSync(path.resolve(__dirname, "./styles.css"), "utf8"); +let body=null; +let styles=null; +let h1Tag=null; +let h1TagStyles=null; jest.dontMock("fs"); -describe("All the styles should be applied", function() { +describe("All the styles should be applied", function () { beforeEach(() => { //here I import the HTML into the document - document.documentElement.innerHTML = html.toString(); + document.documentElement.innerHTML=html.toString(); // apply the styles from the stylesheet if needed document.querySelector( "head" - ).innerHTML = ``; + ).innerHTML=``; + body=document.querySelector("body"); + styles=window.getComputedStyle(body); + h1Tag=document.querySelector("h1"); + h1TagStyles=window.getComputedStyle(h1Tag); }); afterEach(() => { jest.resetModules(); }); - it("The Head tag should not includes a Style tag", function() { - expect(html.toString().indexOf(` -1).toBeFalsy(); + it("The Head tag should not includes a Style tag", function () { + expect(html.toString().indexOf(`-1).toBeFalsy(); }); - it("the background should match", function() { - // get computed styles of any element you like - const body = document.querySelector("body"); - var styles = window.getComputedStyle(body); + it("the background should match", function () { 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() { - // get computed styles of any element you like - const body = document.querySelector("body"); - var styles = window.getComputedStyle(body); + it("the font-family should be 'Times New Roman'", function () { expect(styles["font-family"]).toBe("Times New Roman"); }); - it("the padding-left should be '20px'", function() { - // get computed styles of any element you like - const body = document.querySelector("body"); - var styles = window.getComputedStyle(body); + it("the padding-left should be '20px'", function () { expect(styles["padding-left"]).toBe("20px"); }); - it("the font-family in the H1 Tag should be 'Courier'", function() { + it("the font-family in the H1 Tag should be 'Courier'", function () { // get computed styles of any element you like - const h1Tag = document.querySelector("h1"); - let h1TagStyles = window.getComputedStyle(h1Tag); expect(h1TagStyles["font-family"]).toBe("Courier"); }); - it("the color in the H1 Tag should be 'red'", function() { + it("the color in the H1 Tag should be 'red'", function () { // get computed styles of any element you like - const h1Tag = document.querySelector("h1"); - let h1TagStyles = window.getComputedStyle(h1Tag); expect(h1TagStyles["color"]).toBe("red"); }); - it("the text-align in the H1 Tag should be 'center'", function() { + it("the text-align in the H1 Tag should be 'center'", function () { // get computed styles of any element you like - const h1Tag = document.querySelector("h1"); - let h1TagStyles = window.getComputedStyle(h1Tag); expect(h1TagStyles["text-align"]).toBe("center"); }); - it("the text-decoration in the H2 Tag should be 'underline'", function() { + it("the text-decoration in the H2 Tag should be 'underline'", function () { // get computed styles of any element you like - const h2Tag = document.querySelector("h2"); - let h2TagStyles = window.getComputedStyle(h2Tag); + const h2Tag=document.querySelector("h2"); + let h2TagStyles=window.getComputedStyle(h2Tag); expect(h2TagStyles["text-decoration"]).toBe("underline"); }); - it("the padding in the #id1 Tag should be '5px'", function() { + it("the padding in the #id1 Tag should be '5px'", function () { // get computed styles of any element you like - const idTag = document.querySelector("#id1"); - let idTagStyles = window.getComputedStyle(idTag); + const idTag=document.querySelector("#id1"); + let idTagStyles=window.getComputedStyle(idTag); expect(idTagStyles["padding"]).toBe("5px"); }); - it("the background-color in the #id1 Tag should be 'semi transparent white'", function() { + it("the background-color in the #id1 Tag should be 'semi transparent white'", function () { // get computed styles of any element you like - const idTag = document.querySelector("#id1"); - let idTagStyles = window.getComputedStyle(idTag); + const idTag=document.querySelector("#id1"); + let idTagStyles=window.getComputedStyle(idTag); expect(idTagStyles["background-color"]).toBe("rgba(255, 255, 255, 0.2)"); }); + it("The a hover underline should be removed", function () { + let cssArray=document.styleSheets[0].cssRules; + // console.log("$$$:", cssArray) + let orangeHoverSelector=""; + for (let i=0; i Date: Mon, 12 Aug 2019 10:26:07 -0400 Subject: [PATCH 25/25] fixed issues 10 --- exercises/10-Your-Own-Font/README.md | 21 +++--- exercises/10-Your-Own-Font/index.html | 9 ++- exercises/10-Your-Own-Font/styles.css | 3 + exercises/10-Your-Own-Font/tests.js | 102 +++++++++++++------------- 4 files changed, 71 insertions(+), 64 deletions(-) diff --git a/exercises/10-Your-Own-Font/README.md b/exercises/10-Your-Own-Font/README.md index f15365cd..254b20fc 100644 --- a/exercises/10-Your-Own-Font/README.md +++ b/exercises/10-Your-Own-Font/README.md @@ -1,15 +1,18 @@ # `10` Your Own Font -The "background" CSS rule allows us to assign and work with the background of any container- the background can be a color or an image. If it is an image you can specify if you want the image to repeat horizontally, vertically, both, or not at all, and you can also specify if you want it to resize and fit the whole container where its being applied, among other properties that can be modified. +Google Fonts can be found here: https://fonts.google.com -## 📝 Instructions: +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 + +``` -Run the exercise. -Change the background-size to "contain" (check the index.css tab). -Run the exercise again. -Change the background-repeat to inherit to make it repeat over the x axis and y axis. -Run the exercise again. +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

. -Hint: +## 📝 Instructions: -- How to use the background-size: http://lmgtfy.com/?q=css+background-size +```Plain/Text +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 index e5ddcd6d..a0e7f25a 100644 --- a/exercises/10-Your-Own-Font/index.html +++ b/exercises/10-Your-Own-Font/index.html @@ -3,12 +3,13 @@ + + + + -

- This is my description, it needs to be long because is supposed to be a - paragraph and not a title. -

+

My unique font

diff --git a/exercises/10-Your-Own-Font/styles.css b/exercises/10-Your-Own-Font/styles.css index e69de29b..de7160fd 100644 --- a/exercises/10-Your-Own-Font/styles.css +++ b/exercises/10-Your-Own-Font/styles.css @@ -0,0 +1,3 @@ +.myTitle { + /*your code here*/ +} diff --git a/exercises/10-Your-Own-Font/tests.js b/exercises/10-Your-Own-Font/tests.js index 48541114..6109a451 100644 --- a/exercises/10-Your-Own-Font/tests.js +++ b/exercises/10-Your-Own-Font/tests.js @@ -1,54 +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'); - -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 background should be blue', function () { - - // get computed styles of any element you like - const body = document.querySelector('body'); - var styles = window.getComputedStyle(body); - expect(styles["background-color"]).toBe("blue"); - }); +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(); + }); }); -describe('All the html should match', function () { - beforeEach(() => { - //here I import the HTML into the document - document.documentElement.innerHTML = html.toString(); - }); - afterEach(() => { jest.resetModules(); }); - - it('the html code should contain a p tag', function () { - - // we can read from the source code - console.log(html.toString()); - expect(html.toString().indexOf(` -1).toBeTruthy(); - - //or use query selector to compare hoy mane scriptags do we have - const pTags = document.querySelectorAll("p"); - expect(pTags.length).toBe(1); - }); - - - it('the p tag should have a class "big"', function () { - - //or use query selector to compare hoy mane scriptags do we have - const p = document.querySelector("p"); - expect(p.classList.contains("big")).toBeTruthy(); - }); -}); \ No newline at end of file