scrimba · Riuqlav · Nov 2, 2022 · Nov 2, 2022 · Nov 2, 2022 · Nov 2, 2022
diff --git 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
+// 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
@@ -1,11 +1,15 @@
-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:
 
 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
@@ -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
@@ -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
@@ -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
@@ -3,8 +3,8 @@
         <link rel="stylesheet" href="index.css">
     </head>
     <body>
-        <div id="apple-shelf"></div>  
-        <div id="orange-shelf"></div>
+        <div id="apple-shelf"> </div>  
+        <div id="orange-shelf"> </div>
         <script src="index.js"></script>
     </body>
 </html>
diff --git 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
@@ -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
@@ -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
@@ -5,6 +5,7 @@
     <body>
         <input type="text" id="input-el">
         <button id="input-btn">SAVE INPUT</button>
+        <p id="paragraph-el"></p>
         <script src="index.js"></script>
     </body>
 </html>
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
@@ -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
@@ -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
@@ -5,6 +5,7 @@
     <body>
         <div id="container">
         </div>
+
         <script src="index.js"></script>
     </body>
 </html>
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
@@ -1,7 +1,10 @@
+const container = document.getElementById("container");
 
-const container = document.getElementById("container")
+container.innerHTML = "<button>Buy!</button>";
 
-container.innerHTML = "<button>Buy!</button>"
+container.addEventListener("click", () => {
+  container.innerHTML += "<p> You just bought it! </p>";
+});
 
 // When clicked, render a paragraph under the button (in the container)
-// that says "Thank you for buying!"
+// that says
diff --git a/5. Build a Chrome Extension/18. Render the <li> elements with innerHTML/index.js b/5. Build a Chrome Extension/18. Render the <li> 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 <li> tags
+// Replace .textContent with  and use <li> tags
 for (let i = 0; i < myLeads.length; i++) {
-    ulEl.textContent += myLeads[i] + " "
+  ulEl.innerHTML += "<li>" + myLeads[i] + "</li>";
 }
-
-
-
diff --git a/...ild a Chrome Extension/19. Use createElement() and append() instead of innerHTML/index.js b/...ild 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 += "<li>" + myLeads[i] + "</li>"
+  ulEl.innerHTML += "<li>" + myLeads[i] + "</li>";
 }
 
-
-
+// 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
@@ -4,6 +4,8 @@
     </head>
     <body>
         <!-- Create an input element with type="text" and id="input-el" -->
+        <input type="text" id="input-el" placeholder="type your URL here " />
+        <button type="button" id="input-btn" onclick="">SAVE INPUT</button>
         <!-- Create a SAVE INPUT button with id="input-btn" -->
         <script src="index.js"></script>
     </body>

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
@@ -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 = "<li>" + myLeads[i] + "</li>";
 // 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 += "<li>" + myLeads[i] + "</li>"
+  // 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
-
-
-
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ @@
         <body>
             <div id="container">
             </div>
             <script src="index.js"></script>
         </body>
     </html>