-
-
diff --git a/exercises/03-Inline-Styles/tests.js b/exercises/03-Inline-Styles/tests.js
deleted file mode 100644
index 8192affe..00000000
--- a/exercises/03-Inline-Styles/tests.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const fs=require("fs");
-const path=require("path");
-const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
-
-jest.dontMock("fs");
-
-describe("The Table tag should contain inline style background: green", function() {
- beforeEach(() => {
- //here I import the HTML into the document
- document.documentElement.innerHTML = html.toString();
- });
- afterEach(() => {
- jest.resetModules();
- });
- it("You should not change the existing head tag elements", function () {
- let head = document.querySelector('head');
- let meta = head.querySelector("meta")
- let title = head.querySelector('title').innerHTML
-
- expect(meta).toBe(null)
- expect(title).toBe('03 Inline Styles')
- })
-
- it("The background should be green", function() {
- const table = document.querySelector("table");
- // expect(table.style.background === "green").toBeTruthy();
- var styles = window.getComputedStyle(table);
- expect(styles["background"]).toBe("green");
- });
-});
diff --git a/exercises/03-Inline-Styles/README.es.md b/exercises/03-List-styling/README.es.md
similarity index 100%
rename from exercises/03-Inline-Styles/README.es.md
rename to exercises/03-List-styling/README.es.md
diff --git a/exercises/03-List-styling/README.md b/exercises/03-List-styling/README.md
new file mode 100644
index 00000000..74744621
--- /dev/null
+++ b/exercises/03-List-styling/README.md
@@ -0,0 +1,40 @@
+---
+tutorial: "https://www.youtube.com/watch?v=jIMPLzpryuI"
+---
+
+# `03` 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;
+ }
+```
+
+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:**
+
+Build the existing code first to see what the page originally looks like.
+Then make the changes below and build again.
+
+## π Instructions:
+
+
+1. Make the Coca Cola drink numbers into lower case letters.
+2. Make the Pepsi drink numbers into square bullets.
+3. Make the Healthy drink bullets into Armenian numbers. :)
+4. Completely remove the bullets and extra spacing from the Web-developer drinks.
+
+### π‘ Hint:
+
+- 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/03-List-styling/index.html b/exercises/03-List-styling/index.html
new file mode 100644
index 00000000..0af7b4c5
--- /dev/null
+++ b/exercises/03-List-styling/index.html
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+ 03 List styling
+
+
+
+
+
Your favorite drinks
+
Coca Cola drinks
+
+
Coca Cola
+
Dr. Pepper
+
Fanta
+
+
+
Pepsi drinks
+
+
Pepsi Cola
+
Mountain Dew
+
Gatorade
+
+
+
Healthy drinks
+
+
Kombucha
+
Kale juice
+
Sparkling Water
+
+
+
Web-developer drinks
+
+
Coffee
+
COFFEE
+
COFFEE!!!
+
+
+
+
diff --git a/exercises/03-List-styling/styles.css b/exercises/03-List-styling/styles.css
new file mode 100644
index 00000000..7699bdf3
--- /dev/null
+++ b/exercises/03-List-styling/styles.css
@@ -0,0 +1,15 @@
+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;
+}
+
diff --git a/exercises/03-List-styling/tests.js b/exercises/03-List-styling/tests.js
new file mode 100644
index 00000000..42790b16
--- /dev/null
+++ b/exercises/03-List-styling/tests.js
@@ -0,0 +1,42 @@
+const fs=require("fs");
+const path=require("path");
+const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8");
+
+jest.dontMock("fs");
+
+describe("The lists should be modified accordingly", function() {
+ beforeEach(() => {
+ //here I import the HTML into the document
+ document.documentElement.innerHTML = html.toString();
+ });
+ afterEach(() => {
+ jest.resetModules();
+ });
+
+ it("You should not change the existing head tag elements", function () {
+ let head = document.querySelector('head');
+ let title = head.querySelector('title').innerHTML;
+
+ expect(title).toBe('03 List styling')
+ })
+
+ // Test in progress:
+ // it("The lists should be correctly styled", function() {
+ // const uls = document.querySelectorAll("ul");
+ // const ols = document.querySelectorAll("ol");
+ // console.log(uls);
+ // console.log(ols);
+
+ // var style1 = window.getComputedStyle(ols[0]);
+ // var style2 = window.getComputedStyle(uls[0]);
+ // var style3 = window.getComputedStyle(ols[1]);
+ // var style4 = window.getComputedStyle(uls[1]);
+
+
+ // expect(style1["listStyleType"]).toBe("lower-alpha");
+ // expect(style2["listStyleType"]).toBe("square");
+ // expect(style3["listStyleType"]).toBe("armenian");
+ // expect(style4["listStyleType"]).toBe("none");
+
+ // });
+});
diff --git a/exercises/04-Class-Selector/index.html b/exercises/04-Class-Selector/index.html
index e3abd1bd..45709afb 100644
--- a/exercises/04-Class-Selector/index.html
+++ b/exercises/04-Class-Selector/index.html
@@ -2,9 +2,7 @@
-
- 04 Class selector
-
+ 04 Class selector