fixed boilerplate for first exercise

alesanchezr · alesanchezr · commit f140dcafda2b · 2020-03-19T23:11:00.000Z
diff --git a/.breathecode/resets/01-Hello-World/index.html b/.breathecode/resets/01-Hello-World/index.html
@@ -0,0 +1 @@
+<!-- your code here -->
diff --git a/.breathecode/resets/01.1-The-Style-Tag/index.html b/.breathecode/resets/01.1-The-Style-Tag/index.html
@@ -0,0 +1,5 @@
+<!-- your code here -->
+<style>
+    p{ background: blue; }
+</style>
+<p>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 coding at a young age prepares them for the future. Coding helps children with communication, creativity, math,writing, and confidence.</p>
diff --git a/.breathecode/resets/01.2-Your-First-Style/index.html b/.breathecode/resets/01.2-Your-First-Style/index.html
diff --git a/.breathecode/resets/01.3-Your-Second-Style/index.html b/.breathecode/resets/01.3-Your-Second-Style/index.html
diff --git a/.breathecode/resets/02-Background/index.html b/.breathecode/resets/02-Background/index.html
diff --git a/.breathecode/resets/02-Background/styles.css b/.breathecode/resets/02-Background/styles.css
diff --git a/.breathecode/resets/02-Separate-Stylesheet/index.html b/.breathecode/resets/02-Separate-Stylesheet/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>02 Background</title>
+	</head>
+	<body>
+		My background should be an image with th size "contain"
+	</body>
+</html>
diff --git a/.breathecode/resets/02-Separate-Stylesheet/styles.css b/.breathecode/resets/02-Separate-Stylesheet/styles.css
@@ -0,0 +1,5 @@
+body {
+	background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);
+	background-size: cover;
+	background-repeat: no-repeat;
+}
diff --git a/exercises/01.1-The-Style-Tag/README.md b/exercises/01.1-The-Style-Tag/README.md
@@ -0,0 +1,19 @@
+# `01.1` The Style Tag
+
+If you want to add styles into a website by writing CSS you have to always add it withing a `<style>` tag.
+You can have as many style tags as you want but it is recomended to have only one at the beginning of your website code.
+```HTML
+<style>
+    /* the website CSS Styles go here */
+</style>
+```
+
+## 📝 Instructions
+
+Add a `<style>` tag into your website and make the select thethe `<p>` to run its text into blue color.
+
+## 💻 Preview
+
+It should look like this:
+
+![01 Hello World Exercise Preview](https://ucarecdn.com/6719c50c-2539-43c5-9fe0-8f67d78afc32/)
diff --git a/exercises/01.1-The-Style-Tag/index.html b/exercises/01.1-The-Style-Tag/index.html
@@ -0,0 +1,6 @@
+<!-- add a style tag and select the p tag and make it color blue -->
+<p>
+	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 coding at a young age prepares them for the future. Coding helps children with communication, creativity,
+	math,writing, and confidence.
+</p>
diff --git a/exercises/01.2-Your-First-Style/README.md b/exercises/01.2-Your-First-Style/README.md
@@ -1,4 +1,4 @@
-# `01.1` Your First Style
+# `01.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:
 
@@ -13,4 +13,4 @@ a {
 ## 📝 Instructions:
 
 1. Right now there is a style being applied that is responsable of making the anchor red.
-2. Change the style to make your anchor look yellow.
+2. Change the style to make your anchor look yellow.
diff --git a/exercises/01.2-Your-First-Style/index.html b/exercises/01.2-Your-First-Style/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			a {
+				/* change this style to yellow */
+				color: red;
+			}
+		</style>
+	</head>
+	<body>
+		Hello! <a href="#">I am an anchor in red, change my color to yellow</a>
+	</body>
+</html>
diff --git a/exercises/01.2-Your-First-Style/tests.js b/exercises/01.2-Your-First-Style/tests.js
diff --git a/exercises/01.3-Your-Second-Style/README.md b/exercises/01.3-Your-Second-Style/README.md
@@ -1,4 +1,4 @@
-# `01.2` Your Second Style
+# `01.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:
 
diff --git a/exercises/01.3-Your-Second-Style/index.html b/exercises/01.3-Your-Second-Style/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+			/* Your code here */
+		</style>
+	</head>
+	<body>
+		Hello! My background should be blue!
+	</body>
+</html>
diff --git a/exercises/01.3-Your-Second-Style/tests.js b/exercises/01.3-Your-Second-Style/tests.js
diff --git a/exercises/02-Separate-Stylesheet/README.md b/exercises/02-Separate-Stylesheet/README.md
@@ -0,0 +1,13 @@
+# `02` Separate Sylesheet
+
+If you use the html `<link>` tag, you can also have your styles on a separate file that we normally call `styles.css`.
+
+That is an event better practice because it lets you have an CSS agnostig website, you can change the CSS later and make the website look 100% different, but still have the same exact HTML.
+
+## 📝 Instructions:
+
+Fill the `styles.css` with the content needed to bake the website body blue.
+
+## 💡Hint:
+
+Google how to change the background color of a website body.
diff --git a/exercises/02-Separate-Stylesheet/index.html b/exercises/02-Separate-Stylesheet/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+	</head>
+	<body>
+		My background should be blue.
+	</body>
+</html>
diff --git a/exercises/02-Separate-Stylesheet/styles.css b/exercises/02-Separate-Stylesheet/styles.css
@@ -0,0 +1,4 @@
+/* your styles here:
+    1. Select the body tag.
+    2. Add the background rule equal to blue.
+ */
diff --git a/exercises/02-Separate-Stylesheet/tests.js b/exercises/02-Separate-Stylesheet/tests.js
diff --git a/exercises/02.1-Background/README.md b/exercises/02.1-Background/README.md
@@ -1,4 +1,4 @@
-# `02` Background
+# `02.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`.
 
diff --git a/exercises/02.1-Background/index.html b/exercises/02.1-Background/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" type="text/css" href="./styles.css" />
+		<title>02 Background</title>
+	</head>
+	<body>
+		My background should be an image with th size "contain"
+	</body>
+</html>
diff --git a/exercises/02.1-Background/styles.css b/exercises/02.1-Background/styles.css
@@ -0,0 +1,5 @@
+body {
+	background-image: url(https://4geeksacademy.github.io/exercise-assets/img/bg/small-mosaic.jpg);
+	background-size: cover;
+	background-repeat: no-repeat;
+}
diff --git a/exercises/02.1-Background/tests.js b/exercises/02.1-Background/tests.js
@@ -0,0 +1,66 @@
+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 body tag should not contains any inline style", function () {
+    document.querySelector(
+      "head"
+    ).innerHTML=`<style>${css.toString()}</style>`;
+    let bodyInlineStyle=document.getElementsByTagName("body");
+    let emptyBodyInlineStyle={};
+    expect(bodyInlineStyle[0].style._values).toEqual(emptyBodyInlineStyle);
+    // expect(bodyInlineStyle[0].style._values.background - repeat).toBe(
+    //   undefined
+    // );
+
+    console.log(bodyInlineStyle[0].style._values);
+  });
+
+  it("the background-size should be 'contain' without quotes", function () {
+    document.querySelector(
+      "head"
+    ).innerHTML=`<style>${css.toString()}</style>`;
+    // get computed styles of any element you like
+    const body=document.querySelector("body");
+    let styles=window.getComputedStyle(body);
+    expect(styles["background-size"]).toBe("contain");
+  });
+
+  it("the background-repeat should be 'inherit' without quotes", function () {
+    document.querySelector(
+      "head"
+    ).innerHTML=`<style>${css.toString()}</style>`;
+
+    const body=document.querySelector("body");
+    let styles=window.getComputedStyle(body);
+    expect(styles["background-repeat"]).toBe("inherit");
+  });
+  it("You should not change the head tag", function () {
+
+    let meta1 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta c")
+    let meta2 = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<meta n")
+    let link = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<link")
+    let title = document.getElementsByTagName('head')[0].innerHTML.toString().indexOf("<title")
+    expect(meta1).not.toBe(-1)
+    expect(meta2).not.toBe(-1)
+    expect(link).not.toBe(-1)
+    expect(title).not.toBe(-1)
+    expect(html.toString().indexOf(`<style`)>-1).toBeFalsy();
+  })
+});

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-# `01.2` Your Second Style
	`1`	+# `01.3` Your Second Style
`2`	`2`
`3`	`3`	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:
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-# `02` Background
	`1`	+# `02.1` Background
`2`	`2`
`3`	`3`	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`.
`4`	`4`