From 4e91470ee23e627234a183bb5d49a6ee7e098e53 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Wed, 2 Nov 2022 10:27:27 +0100 Subject: [PATCH 01/19] pricing --- 4. Practice time - part 2/2. if else/index.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/4. Practice time - part 2/2. if else/index.js b/4. Practice time - part 2/2. if else/index.js index 7eabce28..bf55c444 100644 --- a/4. Practice time - part 2/2. if else/index.js +++ b/4. Practice time - part 2/2. if else/index.js @@ -1,4 +1,4 @@ -let age = 15 +let age = 15; // less than 6 years old -> free // 6 to 17 years old -> child discount @@ -7,4 +7,19 @@ let age = 15 // over 66 years old -> senior citizen discount // Create a conditional statement (if/else/else if) that logs out the discount -// the passenger will get based upon the value of the age variable \ No newline at end of file +// the passenger will get based upon the value of the age variable +const pricing = () => { + age < 6 + ? console.log("free") + : age >= 6 && age <= 17 + ? console.log("child discount") + : age >= 18 && age <= 26 + ? console.log("student discount") + : age >= 27 && age <= 66 + ? console.log("full price") + : age > 66 + ? console.log("senior citizen discount") + : null; +}; + +console.log(pricing()); From 0fb68519b82ee0d2156b07782f2a4676cd354f95 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Wed, 2 Nov 2022 10:37:38 +0100 Subject: [PATCH 02/19] largeCountries --- 4. Practice time - part 2/3. Loops and arrays/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/4. Practice time - part 2/3. Loops and arrays/index.js b/4. Practice time - part 2/3. Loops and arrays/index.js index 8ace5085..5e1ed02d 100644 --- a/4. Practice time - part 2/3. Loops and arrays/index.js +++ b/4. Practice time - part 2/3. Loops and arrays/index.js @@ -1,4 +1,4 @@ -let largeCountries = ["China","India","USA","Indonesia","Pakistan"] +let largeCountries = ["China", "India", "USA", "Indonesia", "Pakistan"]; /* Use a for loop to log the following to the console: @@ -6,6 +6,10 @@ The 5 largest countries in the world: - China - India - United States -- Indinesia +- Indonesia - Pakistan -*/ +*/ console.log("The 5 largest countries in the world: "); + +for (let i = 0; i < largeCountries.length; i++) { + console.log("- " + largeCountries[i]); +} From db5639825687193624a6f00e7f0df819db762010 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Wed, 2 Nov 2022 11:11:54 +0100 Subject: [PATCH 03/19] largeCountries array fixed --- .../4. push, pop, unshift, shift challenge/index.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/4. Practice time - part 2/4. push, pop, unshift, shift challenge/index.js b/4. Practice time - part 2/4. push, pop, unshift, shift challenge/index.js index fa50a31a..fc11ed7a 100644 --- a/4. Practice time - part 2/4. push, pop, unshift, shift challenge/index.js +++ b/4. Practice time - part 2/4. push, pop, unshift, shift challenge/index.js @@ -1,7 +1,14 @@ -let largeCountries = ["Tuvalu","India","USA","Indonesia","Monaco"] +let largeCountries = ["Tuvalu", "India", "USA", "Indonesia", "Monaco"]; -// You need to help me fixup the largeCountries array so that +// You need to help me fixup the largeCountries array so that // China and Pakistan are added back into their respective places // Use push() & pop() and their counterparts unshift() & shift() // Google how to use unshift() and shift() + +largeCountries.pop(); +largeCountries.push("Pakistan"); +largeCountries.shift(); +largeCountries.unshift("China"); + +console.log(largeCountries); From ca17ba761695c8564fc84752a3528d75a9463db9 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Wed, 2 Nov 2022 17:33:06 +0100 Subject: [PATCH 04/19] . --- .../5. Logical operators/index.js | 7 +++---- .../6. Rock papers scissors/index.js | 8 ++++++-- .../7. Sorting fruits/index.html | 4 ++-- .../7. Sorting fruits/index.js | 15 +++++++++++---- 4 files changed, 22 insertions(+), 12 deletions(-) diff --git a/4. Practice time - part 2/5. Logical operators/index.js b/4. Practice time - part 2/5. Logical operators/index.js index eb0d1930..ff04a11d 100644 --- a/4. Practice time - part 2/5. Logical operators/index.js +++ b/4. Practice time - part 2/5. Logical operators/index.js @@ -1,8 +1,7 @@ -let dayOfMonth = 13 -let weekday = "Friday" +let dayOfMonth = 13; +let weekday = "Friday"; // If it is Friday the 13th, log out this spooky face: 😱 // Use the logical "AND operator" -> && - - +dayOfMonth && weekday ? console.log("😱") : null; diff --git a/4. Practice time - part 2/6. Rock papers scissors/index.js b/4. Practice time - part 2/6. Rock papers scissors/index.js index dc4958f6..198ede12 100644 --- a/4. Practice time - part 2/6. Rock papers scissors/index.js +++ b/4. Practice time - part 2/6. Rock papers scissors/index.js @@ -1,5 +1,9 @@ -let hands = ["rock", "paper", "scissor"] +let hands = ["rock", "paper", "scissor"]; // Create a function that returns a random item from the array - +const getRamdomItem = () => { + let ramdomItem = Math.floor(Math.random() * 3); + console.log(hands[ramdomItem]); +}; +getRamdomItem(); diff --git a/4. Practice time - part 2/7. Sorting fruits/index.html b/4. Practice time - part 2/7. Sorting fruits/index.html index 9c16372b..d0ffa330 100644 --- a/4. Practice time - part 2/7. Sorting fruits/index.html +++ b/4. Practice time - part 2/7. Sorting fruits/index.html @@ -3,8 +3,8 @@ -
-
+
+
\ No newline at end of file diff --git a/4. Practice time - part 2/7. Sorting fruits/index.js b/4. Practice time - part 2/7. Sorting fruits/index.js index 37ac9124..caead481 100644 --- a/4. Practice time - part 2/7. Sorting fruits/index.js +++ b/4. Practice time - part 2/7. Sorting fruits/index.js @@ -1,8 +1,15 @@ -let fruit = ["🍎", "🍊", "🍎", "🍎", "🍊"] -let appleShelf = document.getElementById("apple-shelf") -let orangeShelf = document.getElementById("orange-shelf") - +let fruit = ["🍎", "🍊", "🍎", "🍎", "🍊"]; +let appleShelf = document.getElementById("apple-shelf"); +let orangeShelf = document.getElementById("orange-shelf"); // Create a function that puts the apples onto the appleShelf // and the oranges onto the orangeShelf. Use a for loop, // a conditional statement, and the textContent property. +const fruitSorter = () => { + for (let i = 0; i < fruit.length; i++) { + fruit[i] === "🍎" + ? (appleShelf.textContent += fruit[i]) + : (orangeShelf.textContent += fruit[i]); + } +}; +fruitSorter(); From 0054eedf885046ca66102f1731a93eccc83825ec Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Thu, 3 Nov 2022 09:34:00 +0100 Subject: [PATCH 05/19] . --- .../2. Add button and input tag/index.html | 2 + .../index.css | 54 +++++++++++++++---- .../index.html | 8 ++- 3 files changed, 53 insertions(+), 11 deletions(-) diff --git a/5. Build a Chrome Extension/2. Add button and input tag/index.html b/5. Build a Chrome Extension/2. Add button and input tag/index.html index 108da539..8efca0e2 100644 --- a/5. Build a Chrome Extension/2. Add button and input tag/index.html +++ b/5. Build a Chrome Extension/2. Add button and input tag/index.html @@ -4,6 +4,8 @@ + + diff --git a/5. Build a Chrome Extension/3. Style the button and input tag/index.css b/5. Build a Chrome Extension/3. Style the button and input tag/index.css index 279dcebc..980a21e7 100644 --- a/5. Build a Chrome Extension/3. Style the button and input tag/index.css +++ b/5. Build a Chrome Extension/3. Style the button and input tag/index.css @@ -1,7 +1,7 @@ body { - margin: 0; - padding: 10px; - font-family: Arial, Helvetica, sans-serif; + margin: 0; + padding: 10px; + font-family: Arial, Helvetica, sans-serif; } /* @@ -11,12 +11,48 @@ Style our app according to the provided design! green color -> #5f9341 */ - - -input { - +div { + margin: 20px auto; + width: 180px; + position: relative; +} +div input { + border: none; + border-bottom: 1px solid #ccc; + padding: 5px 0; + width: 100%; +} +input:focus { + outline: none; +} +.from-left span { + position: absolute; + bottom: 0; + width: 0; + height: 2px; + background-color: #009688; + transition: all 0.6s; +} +.from-left span { + left: 0; +} +.from-right span { + right: 0; +} +.from-middle span { + left: 50%; + transform: translateX(-50%); +} +input:focus + span { + width: 100%; +} +p { + margin-top: 80px; + text-align: center; + font: 25px bold Arial, Helvetica, sans-serif; } - button { - + margin: 20px auto; + width: 180px; + position: relative; } diff --git a/5. Build a Chrome Extension/3. Style the button and input tag/index.html b/5. Build a Chrome Extension/3. Style the button and input tag/index.html index 3b4c649d..af6ae2ac 100644 --- a/5. Build a Chrome Extension/3. Style the button and input tag/index.html +++ b/5. Build a Chrome Extension/3. Style the button and input tag/index.html @@ -3,8 +3,12 @@ - - +
+ + +
+ + \ No newline at end of file From af9c29bd72e5de2ea417ffbac5d98b6c5d2be713 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Thu, 3 Nov 2022 10:01:18 +0100 Subject: [PATCH 06/19] refactor button --- .../6. Write your first addEventListener()/index.html | 2 +- .../6. Write your first addEventListener()/index.js | 7 ++++++- .../7. Your turn to refactor/index.html | 4 ++-- .../7. Your turn to refactor/index.js | 10 +++------- 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/5. Build a Chrome Extension/6. Write your first addEventListener()/index.html b/5. Build a Chrome Extension/6. Write your first addEventListener()/index.html index 162825a2..2c2487ae 100644 --- a/5. Build a Chrome Extension/6. Write your first addEventListener()/index.html +++ b/5. Build a Chrome Extension/6. Write your first addEventListener()/index.html @@ -3,7 +3,7 @@ -
Open the box!
+
Open the box!
\ No newline at end of file diff --git a/5. Build a Chrome Extension/6. Write your first addEventListener()/index.js b/5. Build a Chrome Extension/6. Write your first addEventListener()/index.js index 2487aa37..dbea0dd5 100644 --- a/5. Build a Chrome Extension/6. Write your first addEventListener()/index.js +++ b/5. Build a Chrome Extension/6. Write your first addEventListener()/index.js @@ -1,3 +1,8 @@ // 1. Grab the box from the DOM and store it in a variable -// 2. Add a click event listener to the box +boxEl = document.getElementById("box"); +// 2. Add a click event listener to the box +//done // 3. Log out "I want to open the box!" when it's clicked +const openBox = () => { + console.log("the box is open!"); +}; diff --git a/5. Build a Chrome Extension/7. Your turn to refactor/index.html b/5. Build a Chrome Extension/7. Your turn to refactor/index.html index 28d5cc06..368de6ab 100644 --- a/5. Build a Chrome Extension/7. Your turn to refactor/index.html +++ b/5. Build a Chrome Extension/7. Your turn to refactor/index.html @@ -4,7 +4,7 @@ - + - \ No newline at end of file + diff --git a/5. Build a Chrome Extension/7. Your turn to refactor/index.js b/5. Build a Chrome Extension/7. Your turn to refactor/index.js index 91014d0e..64d3fd4c 100644 --- a/5. Build a Chrome Extension/7. Your turn to refactor/index.js +++ b/5. Build a Chrome Extension/7. Your turn to refactor/index.js @@ -1,9 +1,5 @@ // Refactor the code so that it uses .addEventListener() // when you click the SAVE INPUT button - -function saveLead() { - console.log("Button clicked!") -} - - - +document + .getElementById("input-btn") + .addEventListener("click", () => console.log("Button clicked!")); From cd2a87da79db3184bbcb58094ff2504ba72a9c9b Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Thu, 3 Nov 2022 10:27:59 +0100 Subject: [PATCH 07/19] addEventListener --- .../6. Write your first addEventListener()/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/5. Build a Chrome Extension/6. Write your first addEventListener()/index.js b/5. Build a Chrome Extension/6. Write your first addEventListener()/index.js index dbea0dd5..81ad74a4 100644 --- a/5. Build a Chrome Extension/6. Write your first addEventListener()/index.js +++ b/5. Build a Chrome Extension/6. Write your first addEventListener()/index.js @@ -2,7 +2,8 @@ boxEl = document.getElementById("box"); // 2. Add a click event listener to the box //done + // 3. Log out "I want to open the box!" when it's clicked -const openBox = () => { +boxEl.addEventListener("click", () => { console.log("the box is open!"); -}; +}); From 4b9ca686ab3b63c0756d84f20512bb402da2dd77 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Fri, 4 Nov 2022 10:05:42 +0100 Subject: [PATCH 08/19] . --- .../10. Push to the myLeads array/index.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/5. Build a Chrome Extension/10. Push to the myLeads array/index.js b/5. Build a Chrome Extension/10. Push to the myLeads array/index.js index 10100439..afb6ac40 100644 --- a/5. Build a Chrome Extension/10. Push to the myLeads array/index.js +++ b/5. Build a Chrome Extension/10. Push to the myLeads array/index.js @@ -1,11 +1,11 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") +let myLeads = []; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); // Push the value "www.awesomelead.com" to myArray when the input button is clicked -inputBtn.addEventListener("click", function() { - console.log("Button clicked!") -}) - +inputBtn.addEventListener("click", function () { + myLeads.push("www.awesomelead.com"); + console.log("Button clicked!", myLeads); +}); From b63fd927781d074faec92b648bf1877ce67bf8fd Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Fri, 4 Nov 2022 10:38:09 +0100 Subject: [PATCH 09/19] . --- .../index.js | 20 +++++----- .../index.html | 1 + .../index.js | 40 ++++++++++++++----- 3 files changed, 40 insertions(+), 21 deletions(-) diff --git a/5. Build a Chrome Extension/11. Push the value from the input field/index.js b/5. Build a Chrome Extension/11. Push the value from the input field/index.js index f3fcaa31..653b25de 100644 --- a/5. Build a Chrome Extension/11. Push the value from the input field/index.js +++ b/5. Build a Chrome Extension/11. Push the value from the input field/index.js @@ -1,13 +1,13 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") +let myLeads = []; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); -inputBtn.addEventListener("click", function() { - // Push the value from the inputEl into the myLeads array - // instead of the hard-coded "www.awesomeleads.com" value - // Google -> "get value from input field javascript" - myLeads.push("www.awesomelead.com") - console.log(myLeads) -}) +inputBtn.addEventListener("click", function () { + // Push the value from the inputEl into the myLeads array + // instead of the hard-coded "www.awesomeleads.com" value + myLeads.push(inputEl.value); + // Google -> "get value from input field javascript" + console.log(myLeads); +}); diff --git a/5. Build a Chrome Extension/12. Use a for loop to log out leads/index.html b/5. Build a Chrome Extension/12. Use a for loop to log out leads/index.html index 3b4c649d..4cc482d3 100644 --- a/5. Build a Chrome Extension/12. Use a for loop to log out leads/index.html +++ b/5. Build a Chrome Extension/12. Use a for loop to log out leads/index.html @@ -5,6 +5,7 @@ +

\ No newline at end of file diff --git a/5. Build a Chrome Extension/12. Use a for loop to log out leads/index.js b/5. Build a Chrome Extension/12. Use a for loop to log out leads/index.js index a48ce03c..90601676 100644 --- a/5. Build a Chrome Extension/12. Use a for loop to log out leads/index.js +++ b/5. Build a Chrome Extension/12. Use a for loop to log out leads/index.js @@ -1,14 +1,32 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") - -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - console.log(myLeads) -}) - - -// Log out the items in the myLeads array using a for loop +let myLeads = [ + "ehuehuehueh", + "hiuhuhiuhiu", + "uiebiebiebe", + "ehuehuehueh", + "hiuhuhiuhiu", + "uiebiebiebe", + "ehuehuehueh", + "hiuhuhiuhiu", + "uiebiebiebe", + "ehuehuehueh", + "hiuhuhiuhiu", + "uiebiebiebe", +]; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const paragraphEl = document.getElementById("paragraph-el"); +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + console.log(myLeads); +}); +const displayLeads = () => { + for (let i = 0; i < myLeads.length; i++) { + paragraphEl.textContent = myLeads + " "; + } + console.log(myLeads); +}; +displayLeads(); +// Log out the items in the myLeads array using a for loop From 0da463715871bbf6b2c0ed5c2753819bb7efaa69 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Fri, 4 Nov 2022 17:47:26 +0100 Subject: [PATCH 10/19] . --- .../index.js | 22 +++++++++---------- .../17. More innerHTML practice/index.html | 3 +++ .../17. More innerHTML practice/index.js | 10 ++++++--- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/5. Build a Chrome Extension/14. Render the leads in the unordered list/index.js b/5. Build a Chrome Extension/14. Render the leads in the unordered list/index.js index 79771850..2f050107 100644 --- a/5. Build a Chrome Extension/14. Render the leads in the unordered list/index.js +++ b/5. Build a Chrome Extension/14. Render the leads in the unordered list/index.js @@ -1,17 +1,15 @@ -let myLeads = ["www.awesomelead.com", "www.epiclead.com", "www.greatlead.com"] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +let myLeads = ["www.awesomelead.com", "www.epiclead.com", "www.greatlead.com"]; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - console.log(myLeads) -}) +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + console.log(myLeads); +}); // Render the leads in the unordered list using ulEl.textContent for (let i = 0; i < myLeads.length; i++) { - console.log(myLeads[i]) + console.log(myLeads[i]); + ulEl.textContent = myLeads[I] + " "; } - - - diff --git a/5. Build a Chrome Extension/17. More innerHTML practice/index.html b/5. Build a Chrome Extension/17. More innerHTML practice/index.html index 8857a04a..f5460e24 100644 --- a/5. Build a Chrome Extension/17. More innerHTML practice/index.html +++ b/5. Build a Chrome Extension/17. More innerHTML practice/index.html @@ -5,6 +5,9 @@
+
+
+ \ No newline at end of file diff --git a/5. Build a Chrome Extension/17. More innerHTML practice/index.js b/5. Build a Chrome Extension/17. More innerHTML practice/index.js index 4715a237..cf2c3863 100644 --- a/5. Build a Chrome Extension/17. More innerHTML practice/index.js +++ b/5. Build a Chrome Extension/17. More innerHTML practice/index.js @@ -1,7 +1,11 @@ +const container = document.getElementById("container"); +const container2 = document.getElementById("container2"); -const container = document.getElementById("container") +container.innerHTML = ""; -container.innerHTML = "" +container.addEventListener("click", () => { + container2.innerHTML = "

You just bought it!

"; +}); // When clicked, render a paragraph under the button (in the container) -// that says "Thank you for buying!" \ No newline at end of file +// that says From adfd193dac647999c6000b919d9e21b5c32d730e Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Sun, 6 Nov 2022 00:27:09 +0100 Subject: [PATCH 11/19] . --- .../17. More innerHTML practice/index.html | 2 -- .../17. More innerHTML practice/index.js | 3 +-- .../index.js | 23 ++++++++----------- 3 files changed, 11 insertions(+), 17 deletions(-) diff --git a/5. Build a Chrome Extension/17. More innerHTML practice/index.html b/5. Build a Chrome Extension/17. More innerHTML practice/index.html index f5460e24..b6406918 100644 --- a/5. Build a Chrome Extension/17. More innerHTML practice/index.html +++ b/5. Build a Chrome Extension/17. More innerHTML practice/index.html @@ -5,8 +5,6 @@
-
-
diff --git a/5. Build a Chrome Extension/17. More innerHTML practice/index.js b/5. Build a Chrome Extension/17. More innerHTML practice/index.js index cf2c3863..fab610d3 100644 --- a/5. Build a Chrome Extension/17. More innerHTML practice/index.js +++ b/5. Build a Chrome Extension/17. More innerHTML practice/index.js @@ -1,10 +1,9 @@ const container = document.getElementById("container"); -const container2 = document.getElementById("container2"); container.innerHTML = ""; container.addEventListener("click", () => { - container2.innerHTML = "

You just bought it!

"; + container.innerHTML += "

You just bought it!

"; }); // When clicked, render a paragraph under the button (in the container) diff --git a/5. Build a Chrome Extension/18. Render the
  • elements with innerHTML/index.js b/5. Build a Chrome Extension/18. Render the
  • elements with innerHTML/index.js index d0413753..6781f577 100644 --- a/5. Build a Chrome Extension/18. Render the
  • elements with innerHTML/index.js +++ b/5. Build a Chrome Extension/18. Render the
  • elements with innerHTML/index.js @@ -1,17 +1,14 @@ -let myLeads = ["www.awesomelead.com", "www.epiclead.com", "www.greatlead.com"] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +let myLeads = ["www.awesomelead.com", "www.epiclead.com", "www.greatlead.com"]; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - console.log(myLeads) -}) +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + console.log(myLeads); +}); -// Replace .textContent with .innerHTML and use
  • tags +// Replace .textContent with and use
  • tags for (let i = 0; i < myLeads.length; i++) { - ulEl.textContent += myLeads[i] + " " + ulEl.innerHTML += "
  • " + myLeads[i] + "
    • "; } - - - From e21894a83b82be25c0accf26b6dde2498690da46 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Mon, 7 Nov 2022 07:28:20 +0100 Subject: [PATCH 12/19] . --- .../index.js | 23 +++++++++-------- .../index.js | 24 ++++++++---------- .../21. Create the render function/index.js | 25 +++++++++---------- 3 files changed, 35 insertions(+), 37 deletions(-) diff --git a/5. Build a Chrome Extension/19. Use createElement() and append() instead of innerHTML/index.js b/5. Build a Chrome Extension/19. Use createElement() and append() instead of innerHTML/index.js index 7a369044..068296ca 100644 --- a/5. Build a Chrome Extension/19. Use createElement() and append() instead of innerHTML/index.js +++ b/5. Build a Chrome Extension/19. Use createElement() and append() instead of innerHTML/index.js @@ -1,17 +1,18 @@ -let myLeads = ["www.awesomelead.com", "www.epiclead.com", "www.greatlead.com"] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +let myLeads = ["www.awesomelead.com", "www.epiclead.com", "www.greatlead.com"]; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - console.log(myLeads) -}) +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + console.log(myLeads); +}); // Let's try a different method! for (let i = 0; i < myLeads.length; i++) { - ulEl.innerHTML += "
  • " + myLeads[i] + "
    • " + ulEl.innerHTML += "
  • " + myLeads[i] + "
    • "; } - - +// const li = document.createElement("li"); +// li.textContent = myLeads[i]; +// ulEl.append(li); diff --git a/5. Build a Chrome Extension/20. Improving the performance of our app/index.js b/5. Build a Chrome Extension/20. Improving the performance of our app/index.js index 2beffbfb..d27a8f1c 100644 --- a/5. Build a Chrome Extension/20. Improving the performance of our app/index.js +++ b/5. Build a Chrome Extension/20. Improving the performance of our app/index.js @@ -1,20 +1,18 @@ -let myLeads = ["www.awesomelead.com", "www.epiclead.com", "www.greatlead.com"] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +let myLeads = ["www.awesomelead.com", "www.epiclead.com", "www.greatlead.com"]; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - console.log(myLeads) -}) +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + console.log(myLeads); +}); // 1. Create a variable, listItems, to hold all the HTML for the list items +let listItems = "
  • " + myLeads[i] + "
    • "; // Assign it to an empty string to begin with for (let i = 0; i < myLeads.length; i++) { - // 2. Add the item to the listItems variable instead of the ulEl.innerHTML - ulEl.innerHTML += "
  • " + myLeads[i] + "
    • " + // 2. Add the item to the listItems variable instead of the ulEl.innerHTML + ulEl.innerHTML = listItems; } // 3. Render the listItems inside the unordered list using ulEl.innerHTML - - - diff --git a/5. Build a Chrome Extension/21. Create the render function/index.js b/5. Build a Chrome Extension/21. Create the render function/index.js index a7b7621a..f4f85c59 100644 --- a/5. Build a Chrome Extension/21. Create the render function/index.js +++ b/5. Build a Chrome Extension/21. Create the render function/index.js @@ -1,18 +1,17 @@ -let myLeads = ["www.awesomelead.com", "www.epiclead.com", "www.greatlead.com"] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +let myLeads = []; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - console.log(myLeads) - // 2. Call the renderLeads() function -}) +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + console.log(myLeads); + // 2. Call the renderLeads() function +}); // 1. Wrap the code below in a renderLeads() function -let listItems = "" +let listItems = ""; for (let i = 0; i < myLeads.length; i++) { - listItems += "
  • " + myLeads[i] + "
    • " + listItems += "
  • " + myLeads[i] + "
    • "; } -ulEl.innerHTML = listItems - +ulEl.innerHTML = listItems; From 0b6947d4a770a163ba9541b9b38c2e12e166e705 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Mon, 7 Nov 2022 09:17:01 +0100 Subject: [PATCH 13/19] . --- .../21. Create the render function/index.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/5. Build a Chrome Extension/21. Create the render function/index.js b/5. Build a Chrome Extension/21. Create the render function/index.js index f4f85c59..d7d25bc2 100644 --- a/5. Build a Chrome Extension/21. Create the render function/index.js +++ b/5. Build a Chrome Extension/21. Create the render function/index.js @@ -3,15 +3,20 @@ const inputEl = document.getElementById("input-el"); const inputBtn = document.getElementById("input-btn"); const ulEl = document.getElementById("ul-el"); -inputBtn.addEventListener("click", function () { +inputBtn.addEventListener("click", function (event) { myLeads.push(inputEl.value); console.log(myLeads); - // 2. Call the renderLeads() function + renderLeads(); + event.preventDefault(); + + inputEl.value = ""; }); // 1. Wrap the code below in a renderLeads() function -let listItems = ""; -for (let i = 0; i < myLeads.length; i++) { - listItems += "
  • " + myLeads[i] + "
    • "; -} -ulEl.innerHTML = listItems; +const renderLeads = () => { + let listItems = ""; + for (let i = 0; i < myLeads.length; i++) { + listItems += "
  • " + myLeads[i] + "
    • "; + } + ulEl.innerHTML = listItems; +}; From 234ab5149dc9268b0c951fd1f1e6fa8be1d6a275 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Mon, 7 Nov 2022 10:25:17 +0100 Subject: [PATCH 14/19] . --- .../22. Clear the input field/index.js | 30 ++++++------ .../23. Add the tag/index.js | 46 ++++++++++++------- 2 files changed, 44 insertions(+), 32 deletions(-) diff --git a/5. Build a Chrome Extension/22. Clear the input field/index.js b/5. Build a Chrome Extension/22. Clear the input field/index.js index 50d4b29d..c88edf19 100644 --- a/5. Build a Chrome Extension/22. Clear the input field/index.js +++ b/5. Build a Chrome Extension/22. Clear the input field/index.js @@ -1,18 +1,18 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +let myLeads = []; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - // Clear out the input field - renderLeads() -}) +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + // Clear out the input field + renderLeads(); +}); function renderLeads() { - let listItems = "" - for (let i = 0; i < myLeads.length; i++) { - listItems += "
  • " + myLeads[i] + "
    • " - } - ulEl.innerHTML = listItems -} \ No newline at end of file + let listItems = ""; + for (let i = 0; i < myLeads.length; i++) { + listItems += "
  • " + "" + myLeads[i] + "" + "
    • "; + } + ulEl.innerHTML = listItems; +} diff --git a/5. Build a Chrome Extension/23. Add the tag/index.js b/5. Build a Chrome Extension/23. Add the tag/index.js index 447805a8..9296b172 100644 --- a/5. Build a Chrome Extension/23. Add the tag/index.js +++ b/5. Build a Chrome Extension/23. Add the tag/index.js @@ -1,20 +1,32 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +let myLeads = []; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - inputEl.value = "" - renderLeads() -}) +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + inputEl.value = ""; + renderLeads(); +}); function renderLeads() { - let listItems = "" - for (let i = 0; i < myLeads.length; i++) { - // Wrap the lead in an anchor tag () inside the
  • - // Can you make the link open in a new tab? - listItems += "
  • " + myLeads[i] + "
    • " - } - ulEl.innerHTML = listItems -} \ No newline at end of file + let listItems = ""; + for (let i = 0; i < myLeads.length; i++) { + // Wrap the lead in an anchor tag (    ) inside the
  • + // Can you make the link open in a new tab? + + listItems += + // "
  • " + + // myLeads[i] + + // "
    • "; + + `
  • + " + ${myLeads[i]} " + +
    • `; + } + ulEl.innerHTML = listItems; +} From 46e9ad9590a00138e57b960148b4efb982066bc3 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Mon, 7 Nov 2022 17:17:08 +0100 Subject: [PATCH 15/19] . --- .../index.js | 6 +-- .../index.js | 7 +-- .../index.js | 11 +++-- .../index.js | 35 ++++++++------- .../29. Style the list/index.css | 35 ++++++++------- .../icon.png | Bin 2846 -> 0 bytes .../index.css | 36 --------------- .../index.html | 12 ----- .../index.js | 25 ----------- .../manifest.json | 9 ---- .../33. Your first localStorage/index.js | 42 +++++++++--------- 11 files changed, 73 insertions(+), 145 deletions(-) delete mode 100644 5. Build a Chrome Extension/31. Deploying the Chrome Extension/icon.png delete mode 100644 5. Build a Chrome Extension/31. Deploying the Chrome Extension/index.css delete mode 100644 5. Build a Chrome Extension/31. Deploying the Chrome Extension/index.html delete mode 100644 5. Build a Chrome Extension/31. Deploying the Chrome Extension/index.js delete mode 100644 5. Build a Chrome Extension/31. Deploying the Chrome Extension/manifest.json diff --git a/5. Build a Chrome Extension/25. Write your first template string/index.js b/5. Build a Chrome Extension/25. Write your first template string/index.js index 9b4dbf21..c78b03ff 100644 --- a/5. Build a Chrome Extension/25. Write your first template string/index.js +++ b/5. Build a Chrome Extension/25. Write your first template string/index.js @@ -1,8 +1,8 @@ // template strings/literals -const recipient = "James" +const recipient = "James"; // Refactor the email string to use template strings -const email = "Hey " + recipient + "! How is it going? Cheers Per" +const email = `Hey ${recipient} ! How is it going? Cheers Per`; -console.log(email) \ No newline at end of file +console.log(email); diff --git a/5. Build a Chrome Extension/26. Make the template string even more dynamic/index.js b/5. Build a Chrome Extension/26. Make the template string even more dynamic/index.js index d791d222..99b3cae0 100644 --- a/5. Build a Chrome Extension/26. Make the template string even more dynamic/index.js +++ b/5. Build a Chrome Extension/26. Make the template string even more dynamic/index.js @@ -1,9 +1,10 @@ // template strings/literals -const recipient = "James" +const recipient = "James"; +const sender = "Val"; // Create a new variable, sender, and set its value to your name // Use your sender variable instead of "Per" -const email = `Hey ${recipient}! How is it going? Cheers Per` +const email = `Hey ${recipient}! How is it going? Cheers ${sender}`; -console.log(email) \ No newline at end of file +console.log(email); diff --git a/5. Build a Chrome Extension/27. Template strings on multiple lines/index.js b/5. Build a Chrome Extension/27. Template strings on multiple lines/index.js index ebaaa764..48bfeb80 100644 --- a/5. Build a Chrome Extension/27. Template strings on multiple lines/index.js +++ b/5. Build a Chrome Extension/27. Template strings on multiple lines/index.js @@ -1,9 +1,12 @@ // template strings/literals -const recipient = "James" -const sender = "Per Harald Borgen" +const recipient = "James"; +const sender = "Per Harald Borgen"; // Break the email string into multiple lines -const email = `Hey ${recipient}! How is it going? Cheers ${sender}` +const email = `Hey ${recipient}! +How is it going? -console.log(email) \ No newline at end of file +Cheers ${sender}`; + +console.log(email); diff --git a/5. Build a Chrome Extension/28. Refactor the app to use a template string/index.js b/5. Build a Chrome Extension/28. Refactor the app to use a template string/index.js index bf23ea0d..98bf8192 100644 --- a/5. Build a Chrome Extension/28. Refactor the app to use a template string/index.js +++ b/5. Build a Chrome Extension/28. Refactor the app to use a template string/index.js @@ -1,19 +1,24 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +let myLeads = []; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - inputEl.value = "" - renderLeads() -}) +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + inputEl.value = ""; + renderLeads(); +}); function renderLeads() { - let listItems = "" - for (let i = 0; i < myLeads.length; i++) { - // Refactor the code below to use a template string - listItems += "
  • " + myLeads[i] + "
    • " - } - ulEl.innerHTML = listItems + let listItems = ""; + for (let i = 0; i < myLeads.length; i++) { + // Refactor the code below to use a template string + listItems += ` +
  • + + ${myLeads[i]} + +
    • `; + } + ulEl.innerHTML = listItems; } diff --git a/5. Build a Chrome Extension/29. Style the list/index.css b/5. Build a Chrome Extension/29. Style the list/index.css index cc482dd1..fa8a72a2 100644 --- a/5. Build a Chrome Extension/29. Style the list/index.css +++ b/5. Build a Chrome Extension/29. Style the list/index.css @@ -1,35 +1,36 @@ body { - margin: 0; - padding: 10px; - font-family: Arial, Helvetica, sans-serif; + margin: 0; + padding: 10px; + font-family: Arial, Helvetica, sans-serif; } input { - width: 100%; - padding: 10px; - box-sizing: border-box; - border: 1px solid #5f9341; - margin-bottom: 4px; + width: 100%; + padding: 10px; + box-sizing: border-box; + border: 1px solid #5f9341; + margin-bottom: 4px; } button { - background: #5f9341; - color: white; - padding: 10px 20px; - border: none; - font-weight: bold; + background: #5f9341; + color: white; + padding: 10px 20px; + border: none; + font-weight: bold; } - /* STYLE THE LIST ACCORDING TO THE DESIGN */ ul { - + list-style: none; } li { - + color: #5f9341; } a { - + text-decoration: none; + color: #5f9341; + font-weight: bold; } diff --git a/5. Build a Chrome Extension/31. Deploying the Chrome Extension/icon.png b/5. Build a Chrome Extension/31. Deploying the Chrome Extension/icon.png deleted file mode 100644 index ce79a4753e72d56f7778e5e7d1bbb9bd66f5e2e3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2846 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 wdj`Y - - - - - - -
      -
    - - - \ No newline at end of file diff --git a/5. Build a Chrome Extension/31. Deploying the Chrome Extension/index.js b/5. Build a Chrome Extension/31. Deploying the Chrome Extension/index.js deleted file mode 100644 index 90e8cb96..00000000 --- a/5. Build a Chrome Extension/31. Deploying the Chrome Extension/index.js +++ /dev/null @@ -1,25 +0,0 @@ -// chrome://extensions/ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") - -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - inputEl.value = "" - renderLeads() -}) - -function renderLeads() { - let listItems = "" - for (let i = 0; i < myLeads.length; i++) { - listItems += ` -
  • - - ${myLeads[i]} - -
    • - ` - } - ulEl.innerHTML = listItems -} diff --git a/5. Build a Chrome Extension/31. Deploying the Chrome Extension/manifest.json b/5. Build a Chrome Extension/31. Deploying the Chrome Extension/manifest.json deleted file mode 100644 index 2ee0f7a3..00000000 --- a/5. Build a Chrome Extension/31. Deploying the Chrome Extension/manifest.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "manifest_version": 3, - "version": "1.0", - "name": "Leads tracker", - "action": { - "default_popup": "index.html", - "default_icon": "icon.png" - } -} \ No newline at end of file diff --git a/5. Build a Chrome Extension/33. Your first localStorage/index.js b/5. Build a Chrome Extension/33. Your first localStorage/index.js index 93679351..cab73c1d 100644 --- a/5. Build a Chrome Extension/33. Your first localStorage/index.js +++ b/5. Build a Chrome Extension/33. Your first localStorage/index.js @@ -1,7 +1,7 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +let myLeads = []; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); // 1. Save a key-value pair in localStorage // 2. Refresh the page. Get the value and log it to the console @@ -13,23 +13,23 @@ const ulEl = document.getElementById("ul-el") // localStorage.clear() // PS: both key and value need to be strings - -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - inputEl.value = "" - renderLeads() -}) +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + inputEl.value = ""; + renderLeads(); +}); function renderLeads() { - let listItems = "" - for (let i = 0; i < myLeads.length; i++) { - listItems += ` -
  • - - ${myLeads[i]} - -
    • - ` - } - ulEl.innerHTML = listItems + let listItems = ""; + for (let i = 0; i < myLeads.length; i++) { + listItems += ` +
  • + + ${myLeads[i]} + +
    • + `; + } + ulEl.innerHTML = listItems; + console.log(myLeads[i]); } From 7b574f678103cf52749da0a081db713679ae467d Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Mon, 7 Nov 2022 17:25:45 +0100 Subject: [PATCH 16/19] . --- .../index.js | 36 +++++++++++-------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/5. Build a Chrome Extension/34. Storing arrays in localStorage/index.js b/5. Build a Chrome Extension/34. Storing arrays in localStorage/index.js index 097c9899..1182bdef 100644 --- a/5. Build a Chrome Extension/34. Storing arrays in localStorage/index.js +++ b/5. Build a Chrome Extension/34. Storing arrays in localStorage/index.js @@ -1,27 +1,33 @@ -let myLeads = ["www.awesomelead.com"] +let myLeads = `["www.awesomelead.com"]`; +myLeads = JSON.parse(myLeads); +myLeads.push("dfsdfsdfsdf"); -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +myLeads = JSON.stringify(myLeads); -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - inputEl.value = "" - renderLeads() -}) +console.log(typeof myLeads); + +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); + +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + inputEl.value = ""; + renderLeads(); +}); function renderLeads() { - let listItems = "" - for (let i = 0; i < myLeads.length; i++) { - listItems += ` + let listItems = ""; + for (let i = 0; i < myLeads.length; i++) { + listItems += `
  • ${myLeads[i]}
    • - ` - } - ulEl.innerHTML = listItems + `; + } + ulEl.innerHTML = listItems; } From a194ecf9bfcdddc7717653bd6020e6897552c450 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Tue, 8 Nov 2022 14:43:45 +0100 Subject: [PATCH 17/19] . --- .../index.js | 45 +++++++++-------- .../index.js | 49 +++++++++++-------- 2 files changed, 54 insertions(+), 40 deletions(-) diff --git a/5. Build a Chrome Extension/35. Save the leads to localStorage/index.js b/5. Build a Chrome Extension/35. Save the leads to localStorage/index.js index 1215b756..85245b61 100644 --- a/5. Build a Chrome Extension/35. Save the leads to localStorage/index.js +++ b/5. Build a Chrome Extension/35. Save the leads to localStorage/index.js @@ -1,29 +1,34 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +let myLeads = []; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - inputEl.value = "" - // Save the myLeads array to localStorage - // PS: remember JSON.stringify() - renderLeads() - - // To verify that it works: - console.log( localStorage.getItem("myLeads") ) -}) +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + inputEl.value = ""; + // Save the myLeads array to localStorage + JSON.stringify(myLeads); + + localStorage.setItem("myLeads", JSON.stringify(myLeads)); + + // PS: remember JSON.stringify() + + renderLeads(); + + // To verify that it works: + console.log(localStorage.getItem("myLeads")); +}); function renderLeads() { - let listItems = "" - for (let i = 0; i < myLeads.length; i++) { - listItems += ` + let listItems = ""; + for (let i = 0; i < myLeads.length; i++) { + listItems += `
  • ${myLeads[i]}
    • - ` - } - ulEl.innerHTML = listItems + `; + } + ulEl.innerHTML = listItems; } diff --git a/5. Build a Chrome Extension/36. Get the leads from localStorage/index.js b/5. Build a Chrome Extension/36. Get the leads from localStorage/index.js index 1ab96db0..2a967192 100644 --- a/5. Build a Chrome Extension/36. Get the leads from localStorage/index.js +++ b/5. Build a Chrome Extension/36. Get the leads from localStorage/index.js @@ -1,32 +1,41 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +let myLeads = []; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); // Get the leads from the localStorage -// Store it in a variable, leadsFromLocalStorage // Log out the variable -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - inputEl.value = "" - localStorage.setItem("myLeads", JSON.stringify(myLeads) ) - renderLeads() - - // To verify that it works: - console.log( localStorage.getItem("myLeads") ) -}) +// HINTS: +// localStorage.setItem(key, value) +// localStorage.getItem(key) +// localStorage.clear() +// PS: both key and value need to be strings + +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + inputEl.value = ""; + localStorage.setItem("myLeads", JSON.stringify(myLeads)); + renderLeads(); + + // To verify that it works: + console.log(localStorage.getItem("myLeads")); +}); +let leadsFromLocalStorage = localStorage.getItem(JSON.parse("myLeads")); + +// Store it in a variable, leadsFromLocalStorage +console.log(leadsFromLocalStorage); function renderLeads() { - let listItems = "" - for (let i = 0; i < myLeads.length; i++) { - listItems += ` + let listItems = ""; + for (let i = 0; i < myLeads.length; i++) { + listItems += `
  • ${myLeads[i]}
    • - ` - } - ulEl.innerHTML = listItems + `; + } + ulEl.innerHTML = listItems; } From 7c65bbef27ec64dd29c2362ee261c2f671ebc867 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Sat, 12 Nov 2022 10:10:48 +0100 Subject: [PATCH 18/19] . --- .../38. Truthy and falsy values/index.js | 12 ++-- .../index.js | 37 ++++++----- .../40. Style the delete button/index.css | 46 +++++++------- .../41. Make the delete button work/index.js | 46 ++++++++------ .../index.js | 8 +-- .../index.js | 10 +-- .../index.js | 6 +- .../46. Arguments vs Parameters/index.js | 22 +++---- .../47. Arrays as parameters/index.js | 6 +- .../index.js | 58 ++++++++--------- .../49. Create the tabBtn/index.html | 1 + .../49. Create the tabBtn/index.js | 63 +++++++++++-------- 12 files changed, 172 insertions(+), 143 deletions(-) diff --git a/5. Build a Chrome Extension/38. Truthy and falsy values/index.js b/5. Build a Chrome Extension/38. Truthy and falsy values/index.js index 184904e9..feaab065 100644 --- a/5. Build a Chrome Extension/38. Truthy and falsy values/index.js +++ b/5. Build a Chrome Extension/38. Truthy and falsy values/index.js @@ -1,6 +1,6 @@ -console.log( Boolean("") ) // -console.log( Boolean("0") ) // -console.log( Boolean(100) ) // -console.log( Boolean(null) ) // -console.log( Boolean([0]) ) // -console.log( Boolean(-0) ) // \ No newline at end of file +console.log(Boolean("")); // false +console.log(Boolean("0")); // true +console.log(Boolean(100)); // true +console.log(Boolean(null)); // false +console.log(Boolean([0])); // true +console.log(Boolean(-0)); // false diff --git a/5. Build a Chrome Extension/39. Checking localStorage before rendering/index.js b/5. Build a Chrome Extension/39. Checking localStorage before rendering/index.js index d57b61ce..7b498d55 100644 --- a/5. Build a Chrome Extension/39. Checking localStorage before rendering/index.js +++ b/5. Build a Chrome Extension/39. Checking localStorage before rendering/index.js @@ -1,30 +1,33 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +let myLeads = []; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); -let leadsFromLocalStorage = JSON.parse( localStorage.getItem("myLeads") ) +let leadsFromLocalStorage = JSON.parse(localStorage.getItem("myLeads")); +leadsFromLocalStorage + ? ((myLeads = leadsFromLocalStorage), renderLeads()) + : null; // 1. Check if leadsFromLocalStorage is truthy // 2. If so, set myLeads to its value and call renderLeads() -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - inputEl.value = "" - localStorage.setItem("myLeads", JSON.stringify(myLeads) ) - renderLeads() -}) +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + inputEl.value = ""; + localStorage.setItem("myLeads", JSON.stringify(myLeads)); + renderLeads(); +}); function renderLeads() { - let listItems = "" - for (let i = 0; i < myLeads.length; i++) { - listItems += ` + let listItems = ""; + for (let i = 0; i < myLeads.length; i++) { + listItems += `
  • ${myLeads[i]}
    • - ` - } - ulEl.innerHTML = listItems + `; + } + ulEl.innerHTML = listItems; } diff --git a/5. Build a Chrome Extension/40. Style the delete button/index.css b/5. Build a Chrome Extension/40. Style the delete button/index.css index 4f425b0c..aaf38f0c 100644 --- a/5. Build a Chrome Extension/40. Style the delete button/index.css +++ b/5. Build a Chrome Extension/40. Style the delete button/index.css @@ -1,44 +1,46 @@ body { - margin: 0; - padding: 10px; - font-family: Arial, Helvetica, sans-serif; - min-width: 400px; + margin: 0; + padding: 10px; + font-family: Arial, Helvetica, sans-serif; + min-width: 400px; } input { - width: 100%; - padding: 10px; - box-sizing: border-box; - border: 1px solid #5f9341; - margin-bottom: 4px; + width: 100%; + padding: 10px; + box-sizing: border-box; + border: 1px solid #5f9341; + margin-bottom: 4px; } button { - background: #5f9341; - color: white; - padding: 10px 20px; - border: none; - font-weight: bold; + background: #5f9341; + color: white; + padding: 10px 20px; + border: 1px solid #5f9341; + font-weight: bold; } /* Style the button according to the provided design */ #delete-btn { - + background: white; + color: #5f9341; + padding: 10px 20px; + border: 1px solid #5f9341; + font-weight: bold; } ul { - margin-top: 20px; - list-style: none; - padding-left: 0; + margin-top: 20px; + list-style: none; + padding-left: 0; } li { - margin-top: 5px; + margin-top: 5px; } a { - color: #5f9341; + color: #5f9341; } - - diff --git a/5. Build a Chrome Extension/41. Make the delete button work/index.js b/5. Build a Chrome Extension/41. Make the delete button work/index.js index cd90ae46..d4373752 100644 --- a/5. Build a Chrome Extension/41. Make the delete button work/index.js +++ b/5. Build a Chrome Extension/41. Make the delete button work/index.js @@ -1,35 +1,43 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") +let myLeads = []; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +let ulEl = document.getElementById("ul-el"); // 1. Store the delete button in a deleteBtn variable -let leadsFromLocalStorage = JSON.parse( localStorage.getItem("myLeads") ) +const deleteBtn = document.getElementById("delete-btn"); + +let leadsFromLocalStorage = JSON.parse(localStorage.getItem("myLeads")); if (leadsFromLocalStorage) { - myLeads = leadsFromLocalStorage - renderLeads() + myLeads = leadsFromLocalStorage; + renderLeads(); } // 2. Listen for double clicks on the delete button (google it!) +deleteBtn.addEventListener("dblclick", function () { + localStorage.clear(); + myLeads = []; + renderLeads(); +}); + // 3. When clicked, clear localStorage, myLeads, and the DOM -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - inputEl.value = "" - localStorage.setItem("myLeads", JSON.stringify(myLeads) ) - renderLeads() -}) +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + inputEl.value = ""; + localStorage.setItem("myLeads", JSON.stringify(myLeads)); + renderLeads(); +}); function renderLeads() { - let listItems = "" - for (let i = 0; i < myLeads.length; i++) { - listItems += ` + let listItems = ""; + for (let i = 0; i < myLeads.length; i++) { + listItems += `
  • ${myLeads[i]}
    • - ` - } - ulEl.innerHTML = listItems + `; + } + ulEl.innerHTML = listItems; } diff --git a/5. Build a Chrome Extension/43. Write your first function parameter/index.js b/5. Build a Chrome Extension/43. Write your first function parameter/index.js index a78fa023..082ca77e 100644 --- a/5. Build a Chrome Extension/43. Write your first function parameter/index.js +++ b/5. Build a Chrome Extension/43. Write your first function parameter/index.js @@ -1,8 +1,8 @@ -const welcomeEl = document.getElementById("welcome-el") +const welcomeEl = document.getElementById("welcome-el"); // Give the function a parameter, greeting, that replaces "Welcome back" -function greetUser() { - welcomeEl.textContent = "Welcome back, Per Harald Borgen 👋" +function greetUser(x) { + welcomeEl.textContent = x + ", Per Harald Borgen 👋"; } -greetUser() \ No newline at end of file +greetUser("sup"); diff --git a/5. Build a Chrome Extension/44. Functions with multiple parameters/index.js b/5. Build a Chrome Extension/44. Functions with multiple parameters/index.js index 6724fc72..ac6301d7 100644 --- a/5. Build a Chrome Extension/44. Functions with multiple parameters/index.js +++ b/5. Build a Chrome Extension/44. Functions with multiple parameters/index.js @@ -1,8 +1,8 @@ -const welcomeEl = document.getElementById("welcome-el") +const welcomeEl = document.getElementById("welcome-el"); -function greetUser(greeting, name) { - // Rewrite the expression using template literals - welcomeEl.textContent = greeting + ", " + name + " 👋" +function greetUser(greeting, name, emoji) { + // Rewrite the expression using template literals + welcomeEl.textContent = `${greeting}, ${name} ${emoji}`; } -greetUser("Howdy", "James") \ No newline at end of file +greetUser("Howdy", "James", "🖕"); diff --git a/5. Build a Chrome Extension/45. Numbers as function parameters/index.js b/5. Build a Chrome Extension/45. Numbers as function parameters/index.js index ebaf9d21..7534f524 100644 --- a/5. Build a Chrome Extension/45. Numbers as function parameters/index.js +++ b/5. Build a Chrome Extension/45. Numbers as function parameters/index.js @@ -1,6 +1,6 @@ // Create a function, add(), that adds two numbers together and returns the sum +const add = (x, y) => x + y; - -console.log( add(3,4) ) // should log 7 -console.log( add(9, 102) ) // should log 111 \ No newline at end of file +console.log(add(3, 4)); // should log 7 +console.log(add(9, 102)); // should log 111 diff --git a/5. Build a Chrome Extension/46. Arguments vs Parameters/index.js b/5. Build a Chrome Extension/46. Arguments vs Parameters/index.js index 1accb7e0..7aae40f4 100644 --- a/5. Build a Chrome Extension/46. Arguments vs Parameters/index.js +++ b/5. Build a Chrome Extension/46. Arguments vs Parameters/index.js @@ -1,21 +1,19 @@ -// What are greeting and name? -// What are "Howdy" and "James"? -// What are num1 and num2? -// What are 3 and 4? - +// What are greeting and name? parameters +// What are "Howdy" and "James"? arguments +// What are num1 and num2?parameters +// What are 3 and 4?arguments //. parameters -function greetUser(greeting, name) { - welcomeEl.textContent = `${greeting}, ${name} 👋` +function greetUser(greeting, name) { + welcomeEl.textContent = `${greeting}, ${name} 👋`; } //. arguments -let hi = "Howdy" -greetUser(hi, "James") - +let hi = "Howdy"; +greetUser(hi, "James"); function add(num1, num2) { - return num1 + num2 + return num1 + num2; } -add(3, 4) \ No newline at end of file +add(3, 4); diff --git a/5. Build a Chrome Extension/47. Arrays as parameters/index.js b/5. Build a Chrome Extension/47. Arrays as parameters/index.js index 99a7249b..d5120782 100644 --- a/5. Build a Chrome Extension/47. Arrays as parameters/index.js +++ b/5. Build a Chrome Extension/47. Arrays as parameters/index.js @@ -1,5 +1,9 @@ // Create a function, getFirst(arr), that returns the first item in the array +function getFirst(arr) { + console.log(arr[2]); +} +getFirst(["professor", "rio", "lisboa", "bogota"]); -// Call it with an array as an argument to verify that it works \ No newline at end of file +// Call it with an array as an argument to verify that it works diff --git a/5. Build a Chrome Extension/48. Refactor renderLeads() to use a parameter/index.js b/5. Build a Chrome Extension/48. Refactor renderLeads() to use a parameter/index.js index 74c1adfc..7dbd71ff 100644 --- a/5. Build a Chrome Extension/48. Refactor renderLeads() to use a parameter/index.js +++ b/5. Build a Chrome Extension/48. Refactor renderLeads() to use a parameter/index.js @@ -1,42 +1,42 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") -const deleteBtn = document.getElementById("delete-btn") -const leadsFromLocalStorage = JSON.parse( localStorage.getItem("myLeads") ) +let myLeads = []; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); +const deleteBtn = document.getElementById("delete-btn"); +const leadsFromLocalStorage = JSON.parse(localStorage.getItem("myLeads")); if (leadsFromLocalStorage) { - myLeads = leadsFromLocalStorage - renderLeads() + myLeads = leadsFromLocalStorage; + render(leads); } // Refector the function so that it takes a parameter, leads, that it uses -// instead of the global myLeads variable. Remember to update all invocations +// instead of the global myLeads variable. Remember to update all invocations // of the function as well. -function renderLeads() { - let listItems = "" - for (let i = 0; i < myLeads.length; i++) { - listItems += ` +function render(leads) { + let listItems = ""; + for (let i = 0; i < myLeads.length; i++) { + listItems += `
  • - - ${myLeads[i]} + + ${leads[i]}
    • - ` - } - ulEl.innerHTML = listItems + `; + } + ulEl.innerHTML = listItems; } -deleteBtn.addEventListener("dblclick", function() { - localStorage.clear() - myLeads = [] - renderLeads() -}) +deleteBtn.addEventListener("dblclick", function (leads) { + localStorage.clear(); + myLeads = []; + render(leads); +}); -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - inputEl.value = "" - localStorage.setItem("myLeads", JSON.stringify(myLeads) ) - renderLeads() -}) \ No newline at end of file +inputBtn.addEventListener("click", function (leads) { + myLeads.push(inputEl.value); + inputEl.value = ""; + localStorage.setItem("myLeads", JSON.stringify(myLeads)); + render(leads); +}); diff --git a/5. Build a Chrome Extension/49. Create the tabBtn/index.html b/5. Build a Chrome Extension/49. Create the tabBtn/index.html index fce2fbe0..43104052 100644 --- a/5. Build a Chrome Extension/49. Create the tabBtn/index.html +++ b/5. Build a Chrome Extension/49. Create the tabBtn/index.html @@ -6,6 +6,7 @@ +
    diff --git a/5. Build a Chrome Extension/49. Create the tabBtn/index.js b/5. Build a Chrome Extension/49. Create the tabBtn/index.js index e6464341..40baa39f 100644 --- a/5. Build a Chrome Extension/49. Create the tabBtn/index.js +++ b/5. Build a Chrome Extension/49. Create the tabBtn/index.js @@ -1,42 +1,55 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") -const deleteBtn = document.getElementById("delete-btn") -const leadsFromLocalStorage = JSON.parse( localStorage.getItem("myLeads") ) +let myLeads = []; +const inputEl = document.getElementById("input-el"); +const inputBtn = document.getElementById("input-btn"); +const ulEl = document.getElementById("ul-el"); +const deleteBtn = document.getElementById("delete-btn"); +const leadsFromLocalStorage = JSON.parse(localStorage.getItem("myLeads")); // 1. Grab the SAVE TAB button and store it in a tabBtn variable +const savetabBtn = document.getElementById("savetab-btn"); if (leadsFromLocalStorage) { - myLeads = leadsFromLocalStorage - render(myLeads) + myLeads = leadsFromLocalStorage; + render(myLeads); } +let tabs = [ + { + url: "https://www.linkedin.com/feed/", + }, +]; + // 2. Listen for clicks on tabBtn. Log Per's LinkedIn URL to the console +savetabBtn.addEventListener("click", function () { + myLeads.push(tabs[0].url); + inputEl.value = ""; + localStorage.setItem("myLeads", JSON.stringify(myLeads)); + render(myLeads); +}); function render(leads) { - let listItems = "" - for (let i = 0; i < leads.length; i++) { - listItems += ` + let listItems = ""; + for (let i = 0; i < leads.length; i++) { + listItems += `
  • ${leads[i]}
    • - ` - } - ulEl.innerHTML = listItems + `; + } + ulEl.innerHTML = listItems; } -deleteBtn.addEventListener("dblclick", function() { - localStorage.clear() - myLeads = [] - render(myLeads) -}) +deleteBtn.addEventListener("dblclick", function () { + localStorage.clear(); + myLeads = []; + render(myLeads); +}); -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - inputEl.value = "" - localStorage.setItem("myLeads", JSON.stringify(myLeads) ) - render(myLeads) -}) \ No newline at end of file +inputBtn.addEventListener("click", function () { + myLeads.push(inputEl.value); + inputEl.value = ""; + localStorage.setItem("myLeads", JSON.stringify(myLeads)); + render(myLeads); +}); From f1118acbfb5615b6f7f2ded36554d046a152aaa9 Mon Sep 17 00:00:00 2001 From: Riuqlav Date: Sat, 12 Nov 2022 13:43:43 +0100 Subject: [PATCH 19/19] . --- .../53. Deploy the final version/icon.png | Bin 2846 -> 0 bytes .../53. Deploy the final version/index.css | 43 ---------------- .../53. Deploy the final version/index.html | 14 ------ .../53. Deploy the final version/index.js | 47 ------------------ .../manifest.json | 12 ----- .../1. let & const/index.js | 22 ++++---- .../2. Log out items in an array/index.js | 12 ++++- .../3. save to localStorage/index.js | 8 ++- .../index.html | 2 +- .../index.js | 24 +++++---- .../5. Generate sentence/index.js | 15 +++++- .../6. Render images/index.html | 4 +- .../6. Render images/index.js | 14 ++++-- 13 files changed, 70 insertions(+), 147 deletions(-) delete mode 100644 5. Build a Chrome Extension/53. Deploy the final version/icon.png delete mode 100644 5. Build a Chrome Extension/53. Deploy the final version/index.css delete mode 100644 5. Build a Chrome Extension/53. Deploy the final version/index.html delete mode 100644 5. Build a Chrome Extension/53. Deploy the final version/index.js delete mode 100644 5. Build a Chrome Extension/53. Deploy the final version/manifest.json diff --git a/5. Build a Chrome Extension/53. Deploy the final version/icon.png b/5. Build a Chrome Extension/53. Deploy the final version/icon.png deleted file mode 100644 index ce79a4753e72d56f7778e5e7d1bbb9bd66f5e2e3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2846 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 wdj`Y - - - - - - - - -
      -
    - - - \ No newline at end of file diff --git a/5. Build a Chrome Extension/53. Deploy the final version/index.js b/5. Build a Chrome Extension/53. Deploy the final version/index.js deleted file mode 100644 index bcd7faba..00000000 --- a/5. Build a Chrome Extension/53. Deploy the final version/index.js +++ /dev/null @@ -1,47 +0,0 @@ -let myLeads = [] -const inputEl = document.getElementById("input-el") -const inputBtn = document.getElementById("input-btn") -const ulEl = document.getElementById("ul-el") -const deleteBtn = document.getElementById("delete-btn") -const leadsFromLocalStorage = JSON.parse( localStorage.getItem("myLeads") ) -const tabBtn = document.getElementById("tab-btn") - -if (leadsFromLocalStorage) { - myLeads = leadsFromLocalStorage - render(myLeads) -} - -tabBtn.addEventListener("click", function(){ - chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ - myLeads.push(tabs[0].url) - localStorage.setItem("myLeads", JSON.stringify(myLeads) ) - render(myLeads) - }) -}) - -function render(leads) { - let listItems = "" - for (let i = 0; i < leads.length; i++) { - listItems += ` -
  • - - ${leads[i]} - -
    • - ` - } - ulEl.innerHTML = listItems -} - -deleteBtn.addEventListener("dblclick", function() { - localStorage.clear() - myLeads = [] - render(myLeads) -}) - -inputBtn.addEventListener("click", function() { - myLeads.push(inputEl.value) - inputEl.value = "" - localStorage.setItem("myLeads", JSON.stringify(myLeads) ) - render(myLeads) -}) \ No newline at end of file diff --git a/5. Build a Chrome Extension/53. Deploy the final version/manifest.json b/5. Build a Chrome Extension/53. Deploy the final version/manifest.json deleted file mode 100644 index a2f961af..00000000 --- a/5. Build a Chrome Extension/53. Deploy the final version/manifest.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "manifest_version": 3, - "version": "1.0", - "name": "Leads tracker", - "action": { - "default_popup": "index.html", - "default_icon": "icon.png" - }, - "permissions": [ - "tabs" - ] -} \ No newline at end of file diff --git a/6. Practice time - part 3/1. let & const/index.js b/6. Practice time - part 3/1. let & const/index.js index b5ed54e8..6c5c8d0a 100644 --- a/6. Practice time - part 3/1. let & const/index.js +++ b/6. Practice time - part 3/1. let & const/index.js @@ -1,20 +1,22 @@ // SETTING THE STAGE -let player = "Per" -let opponent = "Nick" -let game = "AmazingFighter" -const points = 0 -const hasWon = false +const player = "Per"; +const opponent = "Nick"; +const game = "AmazingFighter"; +let points = 1222; +let hasWon = false; // PLAYING THE GAME -points += 100 -hasWon = true +points += 100; +hasWon = false; // ANNOUNCING THE WINNER if (hasWon) { - console.log(player + " got " + points + " points and won the " + game + " game!") + console.log(` + ${player} got ${points} points and won the ${game} game! + `); } else { - console.log("The winner is " + opponent + "! " + player + " lost the game") + console.log(`The winner is ${opponent} ! ${player} lost the game`); } // Go through all variables and decide if they should be let or const -// Change the console logs to use template strings instead of double quotes \ No newline at end of file +// Change the console logs to use template strings instead of double quotes diff --git a/6. Practice time - part 3/2. Log out items in an array/index.js b/6. Practice time - part 3/2. Log out items in an array/index.js index cf4f0110..8d97ce36 100644 --- a/6. Practice time - part 3/2. Log out items in an array/index.js +++ b/6. Practice time - part 3/2. Log out items in an array/index.js @@ -1,5 +1,15 @@ -let myCourses = ["Learn CSS Animations", "UI Design Fundamentals", "Intro to Clean Code"] +let myCourses = [ + "Learn CSS Animations", + "UI Design Fundamentals", + "Intro to Clean Code", +]; // Create a function that takes a single parameter, an array, // and logs all the items of the array to the console. // Call the function while passing in myCourses as an argument + +const display = (array) => { + for (let i = 0; i < array.length; i++) console.log(array[i]); +}; + +display(myCourses); diff --git a/6. Practice time - part 3/3. save to localStorage/index.js b/6. Practice time - part 3/3. save to localStorage/index.js index f27266c0..d89e0dcb 100644 --- a/6. Practice time - part 3/3. save to localStorage/index.js +++ b/6. Practice time - part 3/3. save to localStorage/index.js @@ -1,3 +1,9 @@ +const bellaCiao = + "Una mattina mi son svegliato, o bella ciao, bella ciao, bella ciao ciao ciao! ... e ho trovato l'invasor."; + // Save a value to localStorage +localStorage.setItem("lyrics", bellaCiao); // Delete your code and refresh the page -// Fetch your value from localStorage and log it out \ No newline at end of file + +// Fetch your value from localStorage and log it out +console.log(localStorage.getItem("lyrics")); diff --git a/6. Practice time - part 3/4. addEventListener and object in array/index.html b/6. Practice time - part 3/4. addEventListener and object in array/index.html index ca3d6cf1..75441da1 100644 --- a/6. Practice time - part 3/4. addEventListener and object in array/index.html +++ b/6. Practice time - part 3/4. addEventListener and object in array/index.html @@ -3,7 +3,7 @@ - + \ No newline at end of file diff --git a/6. Practice time - part 3/4. addEventListener and object in array/index.js b/6. Practice time - part 3/4. addEventListener and object in array/index.js index 84d9c7d8..09a1fc33 100644 --- a/6. Practice time - part 3/4. addEventListener and object in array/index.js +++ b/6. Practice time - part 3/4. addEventListener and object in array/index.js @@ -1,13 +1,19 @@ let data = [ - { - player: "Jane", - score: 52 - }, - { - player: "Mark", - score: 41 - } -] + { + player: "Jane", + score: 52, + }, + { + player: "Mark", + score: 41, + }, +]; + +const buttonEl = document.getElementById("btn-el"); + +buttonEl.addEventListener("click", () => { + console.log(data[0].score); +}); // Fetch the button from the DOM, store it in a variable // Use addEventListener() to listen for button clicks diff --git a/6. Practice time - part 3/5. Generate sentence/index.js b/6. Practice time - part 3/5. Generate sentence/index.js index 335e03f4..cfe0014d 100644 --- a/6. Practice time - part 3/5. Generate sentence/index.js +++ b/6. Practice time - part 3/5. Generate sentence/index.js @@ -8,6 +8,17 @@ // "The 2 best fruits are Apples, Bananas" // Use both a for loop and a template string to solve the challenge + +const countries = ["China", "India", "USA"]; +const description = "largest countries"; + +const fruits = ["Apples", "Bananas"]; +const bestFruitsDes = "best fruits"; + function generateSentence(desc, arr) { - -} \ No newline at end of file + for (var i = 0; i < arr.length; i) { + console.log(`The ${arr.length} ${desc} are ${arr}`); + break; + } +} +generateSentence(bestFruitsDes, fruits); diff --git a/6. Practice time - part 3/6. Render images/index.html b/6. Practice time - part 3/6. Render images/index.html index 15e7bc11..c7a48f87 100644 --- a/6. Practice time - part 3/6. Render images/index.html +++ b/6. Practice time - part 3/6. Render images/index.html @@ -5,9 +5,9 @@

    The Brooklyn Agency

    - +
    diff --git a/6. Practice time - part 3/6. Render images/index.js b/6. Practice time - part 3/6. Render images/index.js index d680dc7a..8173f1e9 100644 --- a/6. Practice time - part 3/6. Render images/index.js +++ b/6. Practice time - part 3/6. Render images/index.js @@ -2,8 +2,12 @@ // Use a for loop, template strings (``), plus equals (+=) // .innerHTML to solve the challenge. -const imgs = [ - "images/hip1.jpg", - "images/hip2.jpg", - "images/hip3.jpg" -] +const imgs = ["images/hip1.jpg", "images/hip2.jpg", "images/hip3.jpg"]; +const imgContainer = document.getElementById("container"); + +const renderPhotos = (array) => { + for (let i = 0; i < array.length; i++) { + imgContainer.innerHTML += ``; + } +}; +renderPhotos(imgs);