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()); 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]); +} 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); 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(); 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); +}); 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 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..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,6 +5,7 @@
+ \ 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..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,7 +1,10 @@ +const container = document.getElementById("container"); -const container = document.getElementById("container") +container.innerHTML = ""; -container.innerHTML = "" +container.addEventListener("click", () => { + container.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 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] + "
    • "; } - - - 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/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/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..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 @@ -1,18 +1,22 @@ -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 (event) { + myLeads.push(inputEl.value); + console.log(myLeads); + renderLeads(); + event.preventDefault(); -// 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 + inputEl.value = ""; +}); +// 1. Wrap the code below in a renderLeads() function +const 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/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; +} 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/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 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 ce79a475..00000000 Binary files a/5. Build a Chrome Extension/31. Deploying the Chrome Extension/icon.png and /dev/null differ diff --git a/5. Build a Chrome Extension/31. Deploying the Chrome Extension/index.css b/5. Build a Chrome Extension/31. Deploying the Chrome Extension/index.css deleted file mode 100644 index 23373780..00000000 --- a/5. Build a Chrome Extension/31. Deploying the Chrome Extension/index.css +++ /dev/null @@ -1,36 +0,0 @@ -body { - 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; -} - -button { - background: #5f9341; - color: white; - padding: 10px 20px; - border: none; - font-weight: bold; -} - -ul { - margin-top: 20px; - list-style: none; - padding-left: 0; -} - -li { - margin-top: 5px; -} - -a { - color: #5f9341; -} diff --git a/5. Build a Chrome Extension/31. Deploying the Chrome Extension/index.html b/5. Build a Chrome Extension/31. Deploying the Chrome Extension/index.html deleted file mode 100644 index b31d1df9..00000000 --- a/5. Build a Chrome Extension/31. Deploying the Chrome Extension/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - \ 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]); } 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; } 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; } 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); +}); 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 ce79a475..00000000 Binary files a/5. Build a Chrome Extension/53. Deploy the final version/icon.png and /dev/null differ diff --git a/5. Build a Chrome Extension/53. Deploy the final version/index.css b/5. Build a Chrome Extension/53. Deploy the final version/index.css deleted file mode 100644 index 00cb8b4b..00000000 --- a/5. Build a Chrome Extension/53. Deploy the final version/index.css +++ /dev/null @@ -1,43 +0,0 @@ -body { - 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; -} - -button { - background: #5f9341; - color: white; - padding: 10px 20px; - border: 1px solid #5f9341; - font-weight: bold; -} - -#delete-btn { - background: white; - color: #5f9341; -} - -ul { - margin-top: 20px; - list-style: none; - padding-left: 0; -} - -li { - margin-top: 5px; -} - -a { - color: #5f9341; -} - - diff --git a/5. Build a Chrome Extension/53. Deploy the final version/index.html b/5. Build a Chrome Extension/53. Deploy the final version/index.html deleted file mode 100644 index 56e2fc8d..00000000 --- a/5. Build a Chrome Extension/53. Deploy the final version/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - \ 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/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..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 @@ -1,3 +1,9 @@ // 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 +boxEl.addEventListener("click", () => { + 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!")); 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);