diff --git a/JS_FUN_PRACTICE/Arrays/46 - Arrays/array-loopings-methods-FINISHED.html b/JS_FUN_PRACTICE/Arrays/46 - Arrays/array-loopings-methods-FINISHED.html
new file mode 100644
index 0000000..5267b6f
--- /dev/null
+++ b/JS_FUN_PRACTICE/Arrays/46 - Arrays/array-loopings-methods-FINISHED.html	
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>
+
+  </title>
+  <link rel="stylesheet" href="../../base.css">
+</head>
+
+<body>
+  <script>
+    const toppings = ['Mushrooms ', 'Tomatoes', 'Eggs', 'Chili', 'Lettuce', 'Avocado', 'Chiles', 'Bacon', 'Pickles', 'Onions', 'Cheese'];
+
+    const students = [
+      {
+        id: '11ce',
+        first_name: 'Dall',
+        last_name: 'Puckring',
+      },
+      {
+        id: '2958',
+        first_name: 'Margarete',
+        last_name: 'Brandi',
+      },
+      {
+        id: '565a',
+        first_name: 'Bendicty',
+        last_name: 'Woodage',
+      },
+      {
+        id: '3a16',
+        first_name: 'Micki',
+        last_name: 'Mattes',
+      },
+      {
+        id: 'f396',
+        first_name: 'Flory',
+        last_name: 'Gladeche',
+      },
+      {
+        id: 'de5f',
+        first_name: 'Jamill',
+        last_name: 'Emilien',
+      },
+      {
+        id: '54cb',
+        first_name: 'Brett',
+        last_name: 'Aizikowitz',
+      },
+      {
+        id: '9135',
+        first_name: 'Lorry',
+        last_name: 'Smallman',
+      },
+      {
+        id: '978f',
+        first_name: 'Gilly',
+        last_name: 'Flott',
+      },
+    ];
+
+    const people = [
+      {
+        birthday: 'April 22, 1993',
+        names: {
+          first: 'Keith',
+          last: 'Buckley'
+        }
+      },
+      {
+        birthday: 'January 3, 1975',
+        names: {
+          first: 'Larry',
+          last: 'Heep'
+        }
+      },
+      {
+        birthday: 'February 12, 1944',
+        names: {
+          first: 'Linda',
+          last: 'Bermeer'
+        }
+      }
+    ];
+
+
+    const buns = ['egg', 'wonder', 'brioche'];
+
+    const meats = {
+      beyond: 10,
+      beef: 5,
+      pork: 7
+    };
+
+    const prices = {
+      hotDog: 453,
+      burger: 765,
+      sausage: 634,
+      corn: 234,
+    };
+
+    const orderTotals = [342, 1002, 523, 34, 634, 854, 1644, 2222];
+
+    const feedback = [
+      { comment: 'Love the burgs', rating: 4 },
+      { comment: 'Horrible Service', rating: 2 },
+      { comment: 'Smoothies are great, liked the burger too', rating: 5 },
+      { comment: 'Ambiance needs work', rating: 3 },
+      { comment: 'I DONT LIKE BURGERS', rating: 1 },
+    ];
+
+    const faces = ['😃', '🤠', '🤡', '🤑', '😵', '🌞', '🐶', '😺'];
+
+    const inventory = [
+      { type: 'shirt', price: 4000 },
+      { type: 'pants', price: 4532 },
+      { type: 'socks', price: 234 },
+      { type: 'shirt', price: 2343 },
+      { type: 'pants', price: 2343 },
+      { type: 'socks', price: 542 },
+      { type: 'pants', price: 123 },
+    ];
+
+    /*
+      Looping Methods
+    */
+
+    function logTopping(topping, index, originalArray) {
+      const nextTopping = originalArray[index + 1];
+      const prevTopping = originalArray[index - 1];
+      // log the topping
+      console.log(topping);
+      // log the prev topping if there is one
+      prevTopping ? console.log(prevTopping) : null;
+
+      // log the next topping if there is one
+      nextTopping ? console.log(nextTopping) : null;
+      // if its the last item in the array, say good bye
+      index === originalArray.length - 1
+        ? console.log('Goodbye')
+        : console.log('Getting the next Topping');
+
+      // index === originalArray.length && console.log('Goodbye');
+      console.log('-------🍕-------');
+    }
+
+    toppings.forEach(logTopping);
+
+    // Map, Filter, Reduce
+    console.clear();
+
+    function addArms(face) {
+      return `👋 ${face} 👋`;
+    }
+
+    const toys = faces.map(addArms);
+
+    console.log(toys);
+
+    function bosify(name) {
+      return `${name} Bos`;
+    }
+
+    function capitalize(word) {
+      return `${word[0].toUpperCase()}${word.slice(1)}`;
+    }
+
+    const fullNames = ['wes', 'kait', 'poppy']
+      .map(capitalize)
+      .map(bosify);
+    console.log(fullNames);
+
+
+    const orderTotalsWithTax = orderTotals.map(total => total * 1.13);
+    console.log(orderTotalsWithTax);
+
+    //     function attachBody(face, body) {
+    //       return `
+    //           ${face}
+    // 　　　　　${body.repeat(3)}
+    // 　　　　 ${Array(3).fill(body).join(' ')}
+    // 　　　👇🏽　 ${body.repeat(2)}　👇🏽
+    //         ${Array(2).fill(body).join('   ')}
+    //         ${Array(2).fill(body).join('   ')}
+    // 　　　　　👢　　👢
+    //       `
+    //     }
+
+    //     faces.map(face => attachBody(face, '🍟')).forEach(body => console.log(body))
+
+    const cleanPeople = people.map(function (person) {
+      // timestamp
+      const birthday = new Date(person.birthday).getTime();
+      // now timestamp
+      const now = Date.now();
+      const age = Math.floor((now - birthday) / 31536000000);
+      // get their birthday
+      // figure out how old they are
+      // return their full name and bday in an object
+      return {
+        age,
+        name: `${person.names.first} ${person.names.last}`,
+      }
+    });
+
+    console.table(cleanPeople)
+    const over40 = cleanPeople.filter(person => person.age > 40);
+    console.log(over40)
+
+    if (over40.length) {
+      console.log('There are some people over 40');
+    }
+
+    function findById(id) {
+      return function isStudent(student) {
+        return student.id === id;
+      }
+    }
+
+    function findByProp(prop, propWeAreLookingFor) {
+      return function isStudent(student) {
+        return student[prop] === propWeAreLookingFor;
+      }
+    }
+
+    const student = students.find(findByProp('id', '565a'));
+    const student2 = students.find(findByProp('first_name', 'Micki'));
+    console.log(student);
+    console.log(student2);
+
+    // Reduce!
+    console.clear();
+
+    function tallyNumbers(tally, currentTotal) {
+      console.log(`The current tally is ${tally}`);
+      console.log(`The current total is ${currentTotal}`);
+      console.log('---------');
+      // return the current tally PLUS the amount of this order
+      return tally + currentTotal;
+    }
+
+    const allOrders = orderTotals.reduce(tallyNumbers, 0);
+
+    function inventoryReducer(totals, item) {
+      console.log(`Looping over ${item.type}`);
+      // increment the type by 1
+      totals[item.type] = totals[item.type] + 1 || 1;
+      // totals.shirt ? totals.shirt + 1 : totals.shirt = 1;
+      // return the totals, so the next loop can use it
+      return totals;
+    }
+
+    const inventoryCounts = inventory.reduce(inventoryReducer, {});
+    console.log(inventoryCounts);
+
+    const totalInventoryPrice = inventory.reduce((acc, item) => acc + item.price, 0);
+    console.log(totalInventoryPrice);
+
+  </script>
+</body>
+
+</html>
diff --git a/JS_FUN_PRACTICE/Arrays/46 - Arrays/array-loopings-methods-START.html b/JS_FUN_PRACTICE/Arrays/46 - Arrays/array-loopings-methods-START.html
new file mode 100644
index 0000000..3f96faf
--- /dev/null
+++ b/JS_FUN_PRACTICE/Arrays/46 - Arrays/array-loopings-methods-START.html	
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>
+
+  </title>
+  <link rel="stylesheet" href="../../base.css">
+</head>
+
+<body>
+  <script>
+    const toppings = ['Mushrooms ', 'Tomatoes', 'Eggs', 'Chili', 'Lettuce', 'Avocado', 'Chiles', 'Bacon', 'Pickles', 'Onions', 'Cheese'];
+
+    const students = [
+      {
+        id: '11ce',
+        first_name: 'Dall',
+        last_name: 'Puckring',
+      },
+      {
+        id: '2958',
+        first_name: 'Margarete',
+        last_name: 'Brandi',
+      },
+      {
+        id: '565a',
+        first_name: 'Bendicty',
+        last_name: 'Woodage',
+      },
+      {
+        id: '3a16',
+        first_name: 'Micki',
+        last_name: 'Mattes',
+      },
+      {
+        id: 'f396',
+        first_name: 'Flory',
+        last_name: 'Gladeche',
+      },
+      {
+        id: 'de5f',
+        first_name: 'Jamill',
+        last_name: 'Emilien',
+      },
+      {
+        id: '54cb',
+        first_name: 'Brett',
+        last_name: 'Aizikowitz',
+      },
+      {
+        id: '9135',
+        first_name: 'Lorry',
+        last_name: 'Smallman',
+      },
+      {
+        id: '978f',
+        first_name: 'Gilly',
+        last_name: 'Flott',
+      },
+    ];
+
+    const people = [
+      {
+        birthday: 'April 22, 1993',
+        names: {
+          first: 'Keith',
+          last: 'Buckley'
+        }
+      },
+      {
+        birthday: 'January 3, 1975',
+        names: {
+          first: 'Larry',
+          last: 'Heep'
+        }
+      },
+      {
+        birthday: 'February 12, 1944',
+        names: {
+          first: 'Linda',
+          last: 'Bermeer'
+        }
+      }
+    ];
+
+
+    const buns = ['egg', 'wonder', 'brioche'];
+
+    const meats = {
+      beyond: 10,
+      beef: 5,
+      pork: 7
+    };
+
+    const prices = {
+      hotDog: 453,
+      burger: 765,
+      sausage: 634,
+      corn: 234,
+    };
+
+    const orderTotals = [342, 1002, 523, 34, 634, 854, 1644, 2222];
+
+    const feedback = [
+      { comment: 'Love the burgs', rating: 4 },
+      { comment: 'Horrible Service', rating: 2 },
+      { comment: 'Smoothies are great, liked the burger too', rating: 5 },
+      { comment: 'Ambiance needs work', rating: 3 },
+      { comment: 'I DONT LIKE BURGERS', rating: 1 },
+    ];
+
+    const faces = ['😃', '🤠', '🤡', '🤑', '😵', '🌞', '🐶', '😺'];
+
+    const inventory = [
+      { type: 'shirt', price: 4000 },
+      { type: 'pants', price: 4532 },
+      { type: 'socks', price: 234 },
+      { type: 'shirt', price: 2343 },
+      { type: 'pants', price: 2343 },
+      { type: 'socks', price: 542 },
+      { type: 'pants', price: 123 },
+    ];
+
+
+    /*
+      Looping Methods
+    */
+
+  </script>
+</body>
+
+</html>
diff --git a/JS_FUN_PRACTICE/Arrays/46 - Arrays/array-methods-FINISHED.html b/JS_FUN_PRACTICE/Arrays/46 - Arrays/array-methods-FINISHED.html
new file mode 100644
index 0000000..b2721cc
--- /dev/null
+++ b/JS_FUN_PRACTICE/Arrays/46 - Arrays/array-methods-FINISHED.html	
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>
+    Array Methods!
+  </title>
+  <link rel="stylesheet" href="../../base.css">
+</head>
+
+<body>
+  <script>
+    const toppings = ['Mushrooms ', 'Tomatoes', 'Eggs', 'Chili', 'Lettuce', 'Avocado', 'Chiles', 'Bacon', 'Pickles', 'Onions', 'Cheese'];
+
+    const buns = ['egg', 'wonder', 'brioche'];
+
+    const meats = {
+      beyond: 10,
+      beef: 5,
+      pork: 7
+    };
+
+    const prices = {
+      hotDog: 453,
+      burger: 765,
+      sausage: 634,
+      corn: 234,
+    };
+
+    const orderTotals = [342, 1002, 523, 34, 634, 854, 1644, 2222];
+
+    const feedback = [
+      { comment: 'Love the burgs', rating: 4 },
+      { comment: 'Horrible Service', rating: 2 },
+      { comment: 'Smoothies are great, liked the burger too', rating: 5 },
+      { comment: 'Ambiance needs work', rating: 3 },
+      { comment: 'I DONT LIKE BURGERS', rating: 1 },
+    ];
+
+    /*
+      Static Methods
+    */
+
+    // Array.of();
+
+    // Make a function that creates a range from x to y with Array.from();
+
+    function createRange(start, end) {
+      const range = Array.from({ length: end - start + 1 }, function (item, index) {
+        return index + start;
+      });
+      return range;
+    }
+
+    const myRange = createRange(3, 7);
+
+    // Check if the last array you created is really an array with Array.isArray();
+    console.log(Array.isArray(myRange));
+
+    // Take the meats object and make three arrays with Object.entries(), Object.keys, Object.values()
+
+    console.log(Object.entries(meats));
+    console.log(Object.keys(meats));
+    console.log(Object.values(meats));
+
+    Object.entries(meats).forEach(([meat, qty]) => {
+      // const key = entry[0];
+      // const value = entry[1];
+      // const [key, value] = entry;
+      console.log(meat, qty);
+    });
+    /*
+      Instance Methods
+    */
+
+    // Display all bun types with " or " - use join()
+    console.log(buns.join(' or '));
+
+    // We have a string "hot dogs,hamburgers,sausages,corn" - use split() to turn it into an array
+    const foodString = "hot dogs,hamburgers,sausages,corn";
+    console.log(foodString.split(','));
+
+    // take the last item off toppings with pop()
+    const lastItem = toppings.pop();
+    console.log(lastItem);
+    // add it back with push()
+    toppings.push(lastItem);
+    console.log(toppings);
+    // take the first item off toppings with shift()
+    const firstItem = toppings.shift();
+    console.log(firstItem);
+    // add it back in with unshift()
+    toppings.unshift(firstItem);
+    // Do the last four,but immutable (with spreads and new variables)
+    let newToppings = toppings.slice(0, toppings.length - 1);
+    newtoppings = [...newToppings, toppings[toppings.length - 1]];
+    console.log(newtoppings);
+
+
+    // Make a copy of the toppings array with slice()
+    const toppingsCopy = toppings.slice(0);
+    toppings[0] = 'Mushy Boi';
+    console.log(toppings);
+    console.log(toppingsCopy);
+    // Make a copy of the toppings array with a spread
+    const toppingsCopy2 = [...toppings];
+    // take out items 3 to 5 of your new toppings array with splice()
+    toppingsCopy.splice(3, 3);
+    console.log(toppingsCopy);
+    // find the index of Avocado with indexOf() / lastIndexOf()
+    const avoIndex = toppings.indexOf('Avocado');
+    console.log(avoIndex);
+
+    // Check if hot sauce is in the toppings with includes()
+    const isInToppings = toppings.includes('Hot Sauce');
+    console.log(isInToppings);
+    // add it if it's not
+    if (!isInToppings) {
+      toppings.push('Hot Sauce');
+    }
+    console.log(toppings);
+    // flip those toppings around with reverse()
+    // toppings.reverse();
+    const toppingsReversed = [...toppings].reverse();
+    console.log(toppingsReversed);
+
+    /*
+      Callback Methods
+    */
+
+    // find the first rating that talks about a burger with find()
+
+    // function findBurgRating(singleFeedback) {
+    //   return singleFeedback.comment.includes('burg');
+    // }
+
+    // const findBurgRating = function (singleFeedback) {
+    //   return singleFeedback.comment.includes('burg');
+    // }
+
+    // const findBurgRating = (singleFeedback) => singleFeedback.comment.includes('burg');
+
+    // const util = {
+    //   findBurgRating: function (singleFeedback) {
+    //     return singleFeedback.comment.includes('burg');
+    //   }
+    // }
+    // const findSmootieRating = (singleFeedback) => singleFeedback.comment.includes('Smoothie');
+
+    function findByWord(word) {
+      return function (singleFeedback) {
+        return singleFeedback.comment.includes(word);
+      }
+    }
+
+    const burgRating = feedback.find(findByWord('burg'));
+    const smoothieRating = feedback.find(findByWord('Smoothie'));
+
+    console.log(burgRating);
+    // find all ratings that are above 2 with filter()
+    function filterByMinRating(minRating) {
+      return function (singleFeedback) {
+        return singleFeedback.rating > minRating
+      }
+    }
+    const goodReviews = feedback.filter(filterByMinRating(4));
+    console.table(goodReviews);
+    // find all ratings that talk about a burger with filter()
+    const burgRatings = feedback.filter(findByWord('burg'));
+    console.table(burgRatings)
+
+    // Remove the one star rating however you like!
+    const legitRatings = feedback.filter(single => single.rating !== 1);
+    console.table(legitRatings);
+
+    // check if there is at least 5 of one type of meat with some()
+    const isThereEnoughOfAtLeastOneMeat = Object.values(meats).some(meatValue => meatValue >= 5);
+    console.log(isThereEnoughOfAtLeastOneMeat);
+    // make sure we have at least 3 of every meat with every()
+    const isThereEnoughOfEveryMeat = Object.values(meats).every(meatValue => meatValue >= 3);
+    console.log(isThereEnoughOfEveryMeat);
+    // sort the toppings alphabetically with sort()
+    const numbers = [1, 2, 100, 3, 200, 400, 155];
+    const numbersSorted = numbers.sort((firstItem, secondItem) => firstItem - secondItem);
+    console.log(numbersSorted);
+    console.log(toppings.sort());
+    // sort the order totals from most expensive to least with .sort()
+    function numberSort(a, b) {
+      return b - a;
+    }
+    console.log(orderTotals.sort(numberSort));
+    // Sort the prices with sort()
+
+    const productsSortedByPrice = Object.entries(prices).sort(function (a, b) {
+      const aPrice = a[1];
+      const bPrice = b[1];
+      return aPrice - bPrice;
+    });
+    console.table(Object.fromEntries(productsSortedByPrice));
+
+  </script>
+</body>
+
+</html>
diff --git a/JS_FUN_PRACTICE/Arrays/46 - Arrays/array-methods-START.html b/JS_FUN_PRACTICE/Arrays/46 - Arrays/array-methods-START.html
new file mode 100644
index 0000000..ee7dcec
--- /dev/null
+++ b/JS_FUN_PRACTICE/Arrays/46 - Arrays/array-methods-START.html	
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>
+
+  </title>
+  <link rel="stylesheet" href="../../base.css">
+</head>
+
+<body>
+  <script>
+    const toppings = ['Mushrooms ', 'Tomatoes', 'Eggs', 'Chili', 'Lettuce', 'Avocado', 'Chiles', 'Bacon', 'Pickles', 'Onions', 'Cheese'];
+
+    const buns = ['egg', 'wonder', 'brioche'];
+
+    const meats = {
+      beyond: 10,
+      beef: 5,
+      pork: 7
+    };
+
+    const prices = {
+      hotDog: 453,
+      burger: 765,
+      sausage: 634,
+      corn: 234,
+    };
+
+    const orderTotals = [342, 1002, 523, 34, 634, 854, 1644, 2222];
+
+    const feedback = [
+      { comment: 'Love the burgs', rating: 4 },
+      { comment: 'Horrible Service', rating: 2 },
+      { comment: 'Smoothies are great, liked the burger too', rating: 5 },
+      { comment: 'Ambiance needs work', rating: 3 },
+      { comment: 'I DONT LIKE BURGERS', rating: 1 },
+    ];
+
+
+    /*
+      Static Methods
+    */
+
+    // Array.of();
+
+    // Make a function that creates a range from x to y with Array.from();
+
+    // Check if the last array you created is really an array with Array.isArray();
+
+    // Take the meats object and make three arrays with Object.entries(), Object.keys, Object.values()
+
+    /*
+      Instance Methods
+    */
+
+    // Display all bun types with " or " - use join()
+
+    // We have a string "hot dogs,hamburgers,sausages,corn" - use split() to turn it into a string
+
+    // take the last item off toppings with pop()
+    // add it back with push()
+    // take the first item off toppings with shift()
+    // add it back in with unshift()
+    // Do the last four,but immutable (with spreads and new variables)
+
+
+    // Make a copy of the toppings array with slice()
+    // Make a copy of the toppings array with a spread
+    // take out items 3 to 5 of your new toppings array with splice()
+    // find the index of Avocado with indexOf() / lastIndexOf()
+    // Check if hot sauce is in the toppings with includes()
+    // add it if it's not
+    // flip those toppings around with reverse()
+
+    /*
+      Callback Methods
+    */
+
+    // find the first rating that talks about a burger with find()
+    // find all ratings that are above 2 with filter()
+    // find all ratings that talk about a burger with filter()
+    // Remove the one star rating however you like!
+
+    // check if there is at least 5 of one type of meat with some()
+    // make sure we have at least 3 of every meat with every()
+    // sort the toppings alphabetically with sort()
+    // sort the order totals from most expensive to least with .sort()
+    // Sort the prices with sort()
+
+    /*
+      Looping Methods (next)
+    */
+
+  </script>
+</body>
+
+</html>
diff --git a/JS_FUN_PRACTICE/Arrays/46 - Arrays/for-loops-FINISHED.html b/JS_FUN_PRACTICE/Arrays/46 - Arrays/for-loops-FINISHED.html
new file mode 100644
index 0000000..f5aba12
--- /dev/null
+++ b/JS_FUN_PRACTICE/Arrays/46 - Arrays/for-loops-FINISHED.html	
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>For Loops</title>
+</head>
+
+<body>
+  <script>
+    const numbers = [2, 34, 3, 23, 42, 3, 1, 65, 364, 5, 645, 6];
+
+    const name = 'Wes Bos👪🏻🎅🏻👩‍👩‍👧‍👦';
+
+    const wes = {
+      name: 'wes',
+      age: 100,
+      cool: true
+    }
+
+    // For
+    // for (let i = 100; i <= 120; i += 2) {
+    //   console.log(i);
+    // }
+
+    // for (let i = 0; i < numbers.length; i++) {
+    //   console.log(numbers[i]);
+    // }
+
+    // For of
+
+    for (const letter of name) {
+      console.log(letter);
+    }
+
+    for (const number of numbers) {
+      console.log(number)
+    }
+    // For in - used for looping over keys of an object
+    for (const prop in wes) {
+      console.log(prop)
+    }
+
+    const baseHumanStats = {
+      feet: 2,
+      arms: 2,
+      eyes: 2,
+      head: 1
+    };
+
+    function Human(name) {
+      this.name = name;
+    }
+
+    Human.prototype = baseHumanStats;
+
+    const wes2 = new Human('wes');
+
+    console.log(Object.entries(wes2))
+
+    for (const prop in wes2) {
+      console.log(prop);
+    }
+
+    // While Loop
+    let cool = true;
+    let i = 1;
+    while (cool === true) {
+      console.log('You are cool');
+      i++;
+      if (i > 100) {
+        cool = false;
+      }
+    }
+
+  </script>
+</body>
+
+</html>
diff --git a/JS_FUN_PRACTICE/Arrays/46 - Arrays/for-loops-START.html b/JS_FUN_PRACTICE/Arrays/46 - Arrays/for-loops-START.html
new file mode 100644
index 0000000..39c74f3
--- /dev/null
+++ b/JS_FUN_PRACTICE/Arrays/46 - Arrays/for-loops-START.html	
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>For Loops</title>
+</head>
+
+<body>
+  <script>
+    const numbers = [2, 34, 3, 23, 42, 3, 1, 65, 364, 5, 645, 6];
+
+    const name = 'Wes Bos';
+
+    // For
+
+    // For of
+
+    // For in
+
+    // While Loop
+  </script>
+</body>
+
+</html>
diff --git a/JS_FUN_PRACTICE/Arrays/46 - Arrays/reduce-challenge-FINISHED.html b/JS_FUN_PRACTICE/Arrays/46 - Arrays/reduce-challenge-FINISHED.html
new file mode 100644
index 0000000..2a94b89
--- /dev/null
+++ b/JS_FUN_PRACTICE/Arrays/46 - Arrays/reduce-challenge-FINISHED.html	
@@ -0,0 +1,595 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Reduce!</title>
+  <link rel="stylesheet" href="../../base.css">
+</head>
+
+<body>
+  <script>
+    // Grab all the text from a web page
+    // Count how many times each letter and number occurs
+    const text = `
+      Skip to main content
+      Select language
+      Skip to search
+      Technologies▼
+      References & Guides▼
+      Feedback▼
+      Search MDN
+      Search MDN
+      Sign in
+      Array.prototype.reduce()
+      Web technology for developersJavaScriptJavaScript referenceStandard built-in objectsArrayArray.prototype.reduce()
+      English
+      ▼
+      On this Page
+      Syntax
+      Description
+      Examples
+      Polyfill
+      Specifications
+      Browser compatibility
+      See also
+      The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.
+
+
+      The reducer function takes four arguments:
+
+      Accumulator (acc)
+      Current Value (cur)
+      Current Index (idx)
+      Source Array (src)
+      Your reducer function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array and ultimately becomes the final, single resulting value.
+
+      Syntax
+      arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
+      Parameters
+      callback
+      A function to execute on each element in the array (except for the first, if no initialValue is supplied), taking four arguments:
+      accumulator
+      The accumulator accumulates the callback's return values. It is the accumulated value previously returned in the last invocation of the callback, or initialValue, if supplied (see below).
+      currentValue
+      The current element being processed in the array.
+      index Optional
+      The index of the current element being processed in the array. Starts from index 0 if an initialValue is provided. Otherwise, starts from index 1.
+      array Optional
+      The array reduce() was called upon.
+      initialValue Optional
+      A value to use as the first argument to the first call of the callback. If no initialValue is supplied, the first element in the array will be used and skipped. Calling reduce() on an empty array without an initialValue will throw a TypeError.
+      Return value
+      The single value that results from the reduction.
+
+      Description
+      The reduce() method executes the callback once for each assigned value present in the array, taking four arguments:
+
+      accumulator
+      currentValue
+      currentIndex
+      array
+      The first time the callback is called, accumulator and currentValue can be one of two values. If initialValue is provided in the call to reduce(), then accumulator will be equal to initialValue, and currentValue will be equal to the first value in the array. If no initialValue is provided, then accumulator will be equal to the first value in the array, and currentValue will be equal to the second.
+
+      Note: If initialValue is not provided, reduce() will execute the callback function starting at index 1, skipping the first index. If initialValue is provided, it will start at index 0.
+
+      If the array is empty and no initialValue is provided, TypeError will be thrown. If the array only has one element (regardless of position) and no initialValue is provided, or if initialValue is provided but the array is empty, the solo value will be returned without calling callback.
+
+      It is usually safer to provide an initialValue because there are three possible outputs without initialValue, as shown in the following example.
+
+      var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
+      var maxCallback2 = ( max, cur ) => Math.max( max, cur );
+
+      // reduce() without initialValue
+      [ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
+      [ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
+      [                      ].reduce( maxCallback ); // TypeError
+
+      // map/reduce; better solution, also works for empty or larger arrays
+      [ { x: 22 }, { x: 42 } ].map( el => el.x )
+                              .reduce( maxCallback2, -Infinity );
+      How reduce() works
+      Suppose the following use of reduce() occurred:
+
+      [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
+        return accumulator + currentValue;
+      });
+      The callback would be invoked four times, with the arguments and return values in each call being as follows:
+
+      callback	accumulator	currentValue	currentIndex	array	return value
+      first call	0	1	1	[0, 1, 2, 3, 4]	1
+      second call	1	2	2	[0, 1, 2, 3, 4]	3
+      third call	3	3	3	[0, 1, 2, 3, 4]	6
+      fourth call	6	4	4	[0, 1, 2, 3, 4]	10
+      The value returned by reduce() would be that of the last callback invocation (10).
+
+      You can also provide an Arrow Function instead of a full function. The code below will produce the same output as the code in the block above:
+
+      [0, 1, 2, 3, 4].reduce( (accumulator, currentValue, currentIndex, array) => accumulator + currentValue );
+      If you were to provide an initialValue as the second argument to reduce(), the result would look like this:
+
+      [0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
+          return accumulator + currentValue;
+      }, 10);
+      callback	accumulator	currentValue	currentIndex	array	return value
+      first call	10	0	0	[0, 1, 2, 3, 4]	10
+      second call	10	1	1	[0, 1, 2, 3, 4]	11
+      third call	11	2	2	[0, 1, 2, 3, 4]	13
+      fourth call	13	3	3	[0, 1, 2, 3, 4]	16
+      fifth call	16	4	4	[0, 1, 2, 3, 4]	20
+      The value returned by reduce() in this case would be 20.
+
+      Examples
+      Sum all the values of an array
+      var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
+        return accumulator + currentValue;
+      }, 0);
+      // sum is 6
+
+      Alternatively written with an arrow function:
+
+      var total = [ 0, 1, 2, 3 ].reduce(
+        ( accumulator, currentValue ) => accumulator + currentValue,
+        0
+      );
+      Sum of values in an object array
+      To sum up the values contained in an array of objects, you must supply an initialValue, so that each item passes through your function.
+
+      var initialValue = 0;
+      var sum = [{x: 1}, {x: 2}, {x: 3}].reduce(function (accumulator, currentValue) {
+          return accumulator + currentValue.x;
+      },initialValue)
+
+      console.log(sum) // logs 6
+      Alternatively written with an arrow function:
+
+      var initialValue = 0;
+      var sum = [{x: 1}, {x: 2}, {x: 3}].reduce(
+          (accumulator, currentValue) => accumulator + currentValue.x
+          ,initialValue
+      );
+
+      console.log(sum) // logs 6
+      Flatten an array of arrays
+      var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+        function(accumulator, currentValue) {
+          return accumulator.concat(currentValue);
+        },
+        []
+      );
+      // flattened is [0, 1, 2, 3, 4, 5]
+      Alternatively written with an arrow function:
+
+      var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
+        ( accumulator, currentValue ) => accumulator.concat(currentValue),
+        []
+      );
+      Counting instances of values in an object
+      var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
+
+      var countedNames = names.reduce(function (allNames, name) {
+        if (name in allNames) {
+          allNames[name]++;
+        }
+        else {
+          allNames[name] = 1;
+        }
+        return allNames;
+      }, {});
+      // countedNames is:
+      // { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
+      Grouping objects by a property
+      var people = [
+        { name: 'Alice', age: 21 },
+        { name: 'Max', age: 20 },
+        { name: 'Jane', age: 20 }
+      ];
+
+      function groupBy(objectArray, property) {
+        return objectArray.reduce(function (acc, obj) {
+          var key = obj[property];
+          if (!acc[key]) {
+            acc[key] = [];
+          }
+          acc[key].push(obj);
+          return acc;
+        }, {});
+      }
+
+      var groupedPeople = groupBy(people, 'age');
+      // groupedPeople is:
+      // {
+      //   20: [
+      //     { name: 'Max', age: 20 },
+      //     { name: 'Jane', age: 20 }
+      //   ],
+      //   21: [{ name: 'Alice', age: 21 }]
+      // }
+      Bonding arrays contained in an array of objects using the spread operator and initialValue
+      // friends - an array of objects
+      // where object field "books" - list of favorite books
+      var friends = [{
+        name: 'Anna',
+        books: ['Bible', 'Harry Potter'],
+        age: 21
+      }, {
+        name: 'Bob',
+        books: ['War and peace', 'Romeo and Juliet'],
+        age: 26
+      }, {
+        name: 'Alice',
+        books: ['The Lord of the Rings', 'The Shining'],
+        age: 18
+      }];
+
+      // allbooks - list which will contain all friends' books +
+      // additional list contained in initialValue
+      var allbooks = friends.reduce(function(accumulator, currentValue) {
+        return [...accumulator, ...currentValue.books];
+      }, ['Alphabet']);
+
+      // allbooks = [
+      //   'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
+      //   'Romeo and Juliet', 'The Lord of the Rings',
+      //   'The Shining'
+      // ]
+      Remove duplicate items in array
+      Note: If you are using an environment compatible with Set and Array.from(), you could use let orderedArray = Array.from(new Set(myArray)); to get an array where duplicate items have been removed.
+
+      var myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd'];
+      var myOrderedArray = myArray.reduce(function (accumulator, currentValue) {
+        if (accumulator.indexOf(currentValue) === -1) {
+          accumulator.push(currentValue);
+        }
+        return accumulator
+      }, [])
+
+      console.log(myOrderedArray);
+      Running Promises in Sequence
+      /**
+       * Runs promises from array of functions that can return promises
+       * in chained manner
+       *
+       * @param {array} arr - promise arr
+       * @return {Object} promise object
+       */
+      function runPromiseInSequence(arr, input) {
+        return arr.reduce(
+          (promiseChain, currentFunction) => promiseChain.then(currentFunction),
+          Promise.resolve(input)
+        );
+      }
+
+      // promise function 1
+      function p1(a) {
+        return new Promise((resolve, reject) => {
+          resolve(a * 5);
+        });
+      }
+
+      // promise function 2
+      function p2(a) {
+        return new Promise((resolve, reject) => {
+          resolve(a * 2);
+        });
+      }
+
+      // function 3  - will be wrapped in a resolved promise by .then()
+      function f3(a) {
+      return a * 3;
+      }
+
+      // promise function 4
+      function p4(a) {
+        return new Promise((resolve, reject) => {
+          resolve(a * 4);
+        });
+      }
+
+      const promiseArr = [p1, p2, f3, p4];
+      runPromiseInSequence(promiseArr, 10)
+        .then(console.log);   // 1200
+      Function composition enabling piping
+      // Building-blocks to use for composition
+      const double = x => x + x;
+      const triple = x => 3 * x;
+      const quadruple = x => 4 * x;
+
+      // Function composition enabling pipe functionality
+      const pipe = (...functions) => input => functions.reduce(
+          (acc, fn) => fn(acc),
+          input
+      );
+
+      // Composed functions for multiplication of specific values
+      const multiply6 = pipe(double, triple);
+      const multiply9 = pipe(triple, triple);
+      const multiply16 = pipe(quadruple, quadruple);
+      const multiply24 = pipe(double, triple, quadruple);
+
+      // Usage
+      multiply6(6); // 36
+      multiply9(9); // 81
+      multiply16(16); // 256
+      multiply24(10); // 240
+
+      write map using reduce
+      if (!Array.prototype.mapUsingReduce) {
+        Array.prototype.mapUsingReduce = function(callback, thisArg) {
+          return this.reduce(function(mappedArray, currentValue, index, array) {
+            mappedArray[index] = callback.call(thisArg, currentValue, index, array);
+            return mappedArray;
+          }, []);
+        };
+      }
+
+      [1, 2, , 3].mapUsingReduce(
+        (currentValue, index, array) => currentValue + index + array.length
+      ); // [5, 7, , 10]
+
+      Polyfill
+      // Production steps of ECMA-262, Edition 5, 15.4.4.21
+      // Reference: http://es5.github.io/#x15.4.4.21
+      // https://tc39.github.io/ecma262/#sec-array.prototype.reduce
+      if (!Array.prototype.reduce) {
+        Object.defineProperty(Array.prototype, 'reduce', {
+          value: function(callback /*, initialValue*/) {
+            if (this === null) {
+              throw new TypeError( 'Array.prototype.reduce ' +
+                'called on null or undefined' );
+            }
+            if (typeof callback !== 'function') {
+              throw new TypeError( callback +
+                ' is not a function');
+            }
+
+            // 1. Let O be ? ToObject(this value).
+            var o = Object(this);
+
+            // 2. Let len be ? ToLength(? Get(O, "length")).
+            var len = o.length >>> 0;
+
+            // Steps 3, 4, 5, 6, 7
+            var k = 0;
+            var value;
+
+            if (arguments.length >= 2) {
+              value = arguments[1];
+            } else {
+              while (k < len && !(k in o)) {
+                k++;
+              }
+
+              // 3. If len is 0 and initialValue is not present,
+              //    throw a TypeError exception.
+              if (k >= len) {
+                throw new TypeError( 'Reduce of empty array ' +
+                  'with no initial value' );
+              }
+              value = o[k++];
+            }
+
+            // 8. Repeat, while k < len
+            while (k < len) {
+              // a. Let Pk be ! ToString(k).
+              // b. Let kPresent be ? HasProperty(O, Pk).
+              // c. If kPresent is true, then
+              //    i.  Let kValue be ? Get(O, Pk).
+              //    ii. Let accumulator be ? Call(
+              //          callbackfn, undefined,
+              //          « accumulator, kValue, k, O »).
+              if (k in o) {
+                value = callback(value, o[k], k, o);
+              }
+
+              // d. Increase k by 1.
+              k++;
+            }
+
+            // 9. Return accumulator.
+            return value;
+          }
+        });
+      }
+      If you need to support truly obsolete JavaScript engines that do not support Object.defineProperty(), it is best not to polyfill Array.prototype methods at all, as you cannot make them non-enumerable.
+
+      Specifications
+      Specification	Status	Comment
+      ECMAScript 5.1 (ECMA-262)
+      The definition of 'Array.prototype.reduce()' in that specification.	Standard	Initial definition. Implemented in JavaScript 1.8.
+      ECMAScript 2015 (6th Edition, ECMA-262)
+      The definition of 'Array.prototype.reduce()' in that specification.	Standard
+      ECMAScript Latest Draft (ECMA-262)
+      The definition of 'Array.prototype.reduce()' in that specification.	Draft
+      Browser compatibility
+      Update compatibility data on GitHub
+      Desktop
+      Mobile
+      Server
+      Chrome
+      Edge
+      Firefox
+      Internet Explorer
+      Opera
+      Safari
+      Android webview
+      Chrome for Android
+      Firefox for Android
+      Opera for Android
+      Safari on iOS
+      Samsung Internet
+      Node.js
+      reduce
+      Full supportYes
+      Full support12
+      Full support3
+      Full support9
+      Full support10.5
+      Full support4
+      Full supportYes
+      Full supportYes
+      Full support4
+      Full supportYes
+      Full supportYes
+      Full supportYes
+      Full supportYes
+
+
+
+
+
+      What are we missing?
+      Legend
+      Full support
+      Full support
+      See also
+      Array.prototype.reduceRight()
+      Last modified:
+      Sep 23, 2019, by MDN contributors
+      Related Topics
+      Standard built-in objects
+      Array
+      Properties
+      Array.length
+      Array.prototype
+      Array.prototype[@@unscopables]
+      Methods
+      Array.from()
+      Array.isArray()
+      Array.observe()
+      Array.of()
+      Array.prototype.concat()
+      Array.prototype.copyWithin()
+      Array.prototype.entries()
+      Array.prototype.every()
+      Array.prototype.fill()
+      Array.prototype.filter()
+      Array.prototype.find()
+      Array.prototype.findIndex()
+      Array.prototype.flat()
+      Array.prototype.flatMap()
+      Array.prototype.forEach()
+      Array.prototype.includes()
+      Array.prototype.indexOf()
+      Array.prototype.join()
+      Array.prototype.keys()
+      Array.prototype.lastIndexOf()
+      Array.prototype.map()
+      Array.prototype.pop()
+      Array.prototype.push()
+      Array.prototype.reduce()
+      Array.prototype.reduceRight()
+      Array.prototype.reverse()
+      Array.prototype.shift()
+      Array.prototype.slice()
+      Array.prototype.some()
+      Array.prototype.sort()
+      Array.prototype.splice()
+      Array.prototype.toLocaleString()
+      Array.prototype.toSource()
+      Array.prototype.toString()
+      Array.prototype.unshift()
+      Array.prototype.values()
+      Array.prototype[@@iterator]()
+      Array.unobserve()
+      get Array[@@species]
+      Inheritance:
+      Function
+      Properties
+      Function.arguments
+      Function.arity
+      Function.caller
+      Function.displayName
+      Function.length
+      Function.name
+      Function.prototype
+      Methods
+      Function.prototype.apply()
+      Function.prototype.bind()
+      Function.prototype.call()
+      Function.prototype.isGenerator()
+      Function.prototype.toSource()
+      Function.prototype.toString()
+      Object
+      Properties
+      Object.prototype.__count__
+      Object.prototype.__noSuchMethod__
+      Object.prototype.__parent__
+      Object.prototype.__proto__
+      Object.prototype.constructor
+      Methods
+      Object.prototype.__defineGetter__()
+      Object.prototype.__defineSetter__()
+      Object.prototype.__lookupGetter__()
+      Object.prototype.__lookupSetter__()
+      Object.prototype.hasOwnProperty()
+      Object.prototype.isPrototypeOf()
+      Object.prototype.propertyIsEnumerable()
+      Object.prototype.toLocaleString()
+      Object.prototype.toSource()
+      Object.prototype.toString()
+      Object.prototype.unwatch()
+      Object.prototype.valueOf()
+      Object.prototype.watch()
+      Object.setPrototypeOf()
+      Learn the best of web development
+      Get the latest and greatest from MDN delivered straight to your inbox.
+
+
+      E-mail
+      you@example.com
+      Sign up now
+      Hide Newsletter Sign-up
+      MDN Web Docs
+      MDN
+      Web Technologies
+      Learn Web Development
+      About MDN
+      Feedback
+      Mozilla
+      Mozilla
+      About
+      Contact Us
+      Firefox
+      TermsPrivacyCookies
+      © 2005-2019 Mozilla and individual contributors.Content is available under these licenses.
+    `;
+
+    function isValidChar(char) {
+      return char.match(/[a-z0-9]/i);
+    }
+
+    // function lowercase(char) {
+    //   return char.toLowerCase();
+    // }
+    const lowercase = char => char.toLowerCase();
+
+    function instanceCounter(counts, char) {
+      counts[char]
+        // if exists
+        ? counts[char] = counts[char] + 1
+        // if does not exist
+        : counts[char] = 1;
+
+      return counts;
+    }
+
+    const result = text
+      .split('') // split each char into an item of an array
+      .filter(isValidChar)
+      .map(lowercase) // convert every letter to lowercase
+      .reduce(instanceCounter, {});
+
+    function sortByValue(a, b) {
+      return a[1] - b[1];
+    }
+    const sortedResult = Object
+      .entries(result)
+      .sort(sortByValue);
+    console.log(sortedResult);
+
+  </script>
+</body>
+
+</html>
diff --git a/JS_FUN_PRACTICE/Arrays/46 - Arrays/reduce-challenge-START.html b/JS_FUN_PRACTICE/Arrays/46 - Arrays/reduce-challenge-START.html
new file mode 100644
index 0000000..0fe1f4c
--- /dev/null
+++ b/JS_FUN_PRACTICE/Arrays/46 - Arrays/reduce-challenge-START.html	
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Reduce!</title>
+  <link rel="stylesheet" href="../../base.css">
+</head>
+
+<body>
+  <script>
+    // Grab all the text from a web page
+    // Count how many times each letter and number occurs
+
+
+  </script>
+</body>
+
+</html>
diff --git a/JS_FUN_PRACTICE/Dom/DOM-Cardio-FINISHED.html b/JS_FUN_PRACTICE/Dom/DOM-Cardio-FINISHED.html
new file mode 100644
index 0000000..ee51b8a
--- /dev/null
+++ b/JS_FUN_PRACTICE/Dom/DOM-Cardio-FINISHED.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Dom Cardio</title>
+    <link rel="stylesheet" href="../../base.css">
+  </head>
+
+  <body>
+    <script src="./DOM-Cardio.js"></script>
+  </body>
+
+  <style>
+    .cards {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-gap: 20px;
+      padding: 20px;
+    }
+
+    .playerCard {
+      background: white;
+      padding: 20px;
+    }
+
+    .playerCard h2 {
+      color: black;
+    }
+  </style>
+</html>
diff --git a/JS_FUN_PRACTICE/Dom/DOM-Cardio-FINISHED.js b/JS_FUN_PRACTICE/Dom/DOM-Cardio-FINISHED.js
new file mode 100644
index 0000000..b9f02e3
--- /dev/null
+++ b/JS_FUN_PRACTICE/Dom/DOM-Cardio-FINISHED.js
@@ -0,0 +1,94 @@
+// Make a div
+const div = document.createElement('div');
+// add a class of wrapper to it
+div.classList.add('wrapper');
+// put it into the body
+document.body.appendChild(div);
+
+// make an unordered list
+const ul = `<ul>
+  <li>one</li>
+  <li>two</li>
+  <li>three</li>
+</ul>`;
+// add three list items with the words "one, two three" in them
+// put that list into the above wrapper
+div.innerHTML = ul;
+
+// create an image
+const img = document.createElement('img');
+// set the source to an image
+img.src = 'https://picsum.photos/500';
+// set the width to 250
+img.width = 250;
+img.height = 250;
+// add a class of cute
+img.classList.add('cute');
+// add an alt of Cute Puppy
+img.alt = 'Cute Puppy!';
+// Append that image to the wrapper
+div.appendChild(img);
+
+// with HTML string, make a div, with two paragraphs inside of it
+const myHTML = `
+  <div class="myDiv">
+    <p>Paragraph One</p>
+    <p>Paragraph Two</p>
+  </div>
+`;
+const ulElement = div.querySelector('ul');
+console.log(ulElement);
+// put this div before the unordered list from above
+ulElement.insertAdjacentHTML('beforebegin', myHTML);
+// add a class to the second paragraph called warning
+const myDiv = div.querySelector('.myDiv');
+myDiv.children[1].classList.add('warning');
+// remove the first paragraph
+myDiv.firstElementChild.remove();
+
+// create a function called generatePlayerCard that takes in three arguments: name, age, and height
+function generatePlayerCard(name, age, height) {
+  const html = `
+    <div class="playerCard">
+      <h2>${name} — ${age}</h2>
+      <p>Their Height is ${height} and ${age} years old. In Dog years this person would be ${age *
+    7}. That would be a tall dog!
+        <button class="delete" type="button">&times; Delete</button>
+    </p>
+
+    </div>
+  `;
+  return html;
+}
+
+// have that function return html that looks like this:
+// <div class="playerCard">
+//   <h2>NAME — AGE</h2>
+//   <p>They are HEIGHT and AGE years old. In Dog years this person would be AGEINDOGYEARS. That would be a tall dog!</p>
+// </div>
+
+// make a new div with a class of cards
+const cards = document.createElement('div');
+cards.classList.add('cards');
+// Have that function make 4 cards
+let cardsHTML = generatePlayerCard('wes', 12, 150);
+cardsHTML += generatePlayerCard('scott', 12, 150);
+cardsHTML += generatePlayerCard('kait', 12, 150);
+cardsHTML += generatePlayerCard('snickers', 12, 150);
+
+cards.innerHTML = cardsHTML;
+div.insertAdjacentElement('beforebegin', cards);
+// append those cards to the div
+// put the div into the DOM just before the wrapper element
+// Bonus, put a delete Button on each card so when you click it, the whole card is removed
+
+// select all the buttons!
+const buttons = document.querySelectorAll('.delete');
+// make out delete function
+function deleteCard(event) {
+  const buttonThatGotClicked = event.currentTarget;
+  // buttonThatGotClicked.parentElement.remove();
+  buttonThatGotClicked.closest('.playerCard').remove();
+}
+// loop over them and attach a listener
+buttons.forEach(button => button.addEventListener('click', deleteCard));
diff --git a/JS_FUN_PRACTICE/Dom/DOM-Cardio.html b/JS_FUN_PRACTICE/Dom/DOM-Cardio.html
new file mode 100644
index 0000000..08daa5c
--- /dev/null
+++ b/JS_FUN_PRACTICE/Dom/DOM-Cardio.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Dom Cardio</title>
+  <link rel="stylesheet" href="../../base.css">
+</head>
+
+<body>
+  <script src="./DOM-Cardio.js"></script>
+</body>
+
+</html>
diff --git a/JS_FUN_PRACTICE/Dom/DOM-Cardio.js b/JS_FUN_PRACTICE/Dom/DOM-Cardio.js
new file mode 100644
index 0000000..7f6c7d4
--- /dev/null
+++ b/JS_FUN_PRACTICE/Dom/DOM-Cardio.js
@@ -0,0 +1,44 @@
+// Make a div
+
+// add a class of wrapper to it
+
+// put it into the body
+
+// make an unordered list
+
+// add three list items with the words "one, two, three" in them
+// put that list into the above wrapper
+
+// create an image
+
+// set the source to an image
+// set the width to 250
+// add a class of cute
+// add an alt of Cute Puppy
+// Append that image to the wrapper
+
+// with HTML string, make a div, with two paragraphs inside of it
+// put this div before the unordered list from above
+
+// add a class to the second paragraph called warning
+// remove the first paragraph
+
+// create a function called generatePlayerCard that takes in three arguments: name, age, and height
+
+// have that function return html that looks like this:
+// <div class="playerCard">
+//   <h2>NAME — AGE</h2>
+//   <p>They are HEIGHT and AGE years old. In Dog years this person would be AGEINDOGYEARS. That would be a tall dog!</p>
+// </div>
+
+// make a new div with a class of cards
+
+// make 4 player cards using generatePlayerCard
+
+// append those cards to the div
+// put the div into the DOM just before the wrapper element
+// Bonus, put a delete Button on each card so when you click it, the whole card is removed
+
+// select all the buttons!
+// make out delete function
+// loop over them and attach a listener
diff --git a/JS_FUN_PRACTICE/Dom/Read_Here.Md b/JS_FUN_PRACTICE/Dom/Read_Here.Md
new file mode 100644
index 0000000..e69de29
diff --git a/JS_FUN_PRACTICE/Dom/creating-FINISHED.js b/JS_FUN_PRACTICE/Dom/creating-FINISHED.js
new file mode 100644
index 0000000..50a072d
--- /dev/null
+++ b/JS_FUN_PRACTICE/Dom/creating-FINISHED.js
@@ -0,0 +1,56 @@
+console.log('it works!');
+
+const myParagraph = document.createElement('p');
+myParagraph.textContent = 'I am a P';
+myParagraph.classList.add('special');
+console.log(myParagraph);
+
+const myImage = document.createElement('img');
+myImage.src = 'https://picsum.photos/500';
+myImage.alt = 'Nice photo';
+
+const myDiv = document.createElement('div');
+myDiv.classList.add('wrapper');
+console.log(myDiv);
+
+myDiv.appendChild(myParagraph);
+myDiv.appendChild(myImage);
+
+document.body.appendChild(myDiv);
+
+// oh shoot! we need to add somethint to the top. like a heading!
+const heading = document.createElement('h2');
+heading.textContent = 'Cool Things';
+
+myDiv.insertAdjacentElement('beforebegin', heading);
+
+// <ul>
+// <li>One</li>
+// <li>two</li>
+// <li>three</li>
+// <li>four</li>
+// <li>five</li>
+// </ul>
+
+const list = document.createElement('ul');
+const li = document.createElement('li');
+li.textContent = 'three';
+list.appendChild(li);
+
+document.body.insertAdjacentElement('afterbegin', list);
+
+const li5 = document.createElement('li');
+li5.textContent = 'Five';
+list.append(li5);
+
+const li1 = li5.cloneNode(true);
+li1.textContent = 'one';
+list.insertAdjacentElement('afterbegin', li1);
+
+const li4 = document.createElement('li');
+li4.textContent = 'four';
+li5.insertAdjacentElement('beforebegin', li4);
+
+const li2 = document.createElement('li');
+li2.textContent = 'two';
+li1.insertAdjacentElement('afterend', li2);
diff --git a/JS_FUN_PRACTICE/Dom/creating-with-strings-FINISHED.js b/JS_FUN_PRACTICE/Dom/creating-with-strings-FINISHED.js
new file mode 100644
index 0000000..4e75ff4
--- /dev/null
+++ b/JS_FUN_PRACTICE/Dom/creating-with-strings-FINISHED.js
@@ -0,0 +1,16 @@
+const item = document.querySelector('.item');
+
+const width = 500;
+const src = `https://picsum.photos/${width}`;
+const desc = `Cute Pup <img onload="alert('HACKED')" src="https://picsum.photos/50"/>`;
+const myHTML = `
+  <div class="wrapper">
+    <h2>Cute ${desc}</h2>
+    <img src="${src}" alt="${desc}"/>
+  </div>
+`;
+
+// turn a string into a DOM element
+const myFragment = document.createRange().createContextualFragment(myHTML);
+
+document.body.appendChild(myFragment);
diff --git a/JS_FUN_PRACTICE/Dom/creating-with-strings.js b/JS_FUN_PRACTICE/Dom/creating-with-strings.js
new file mode 100644
index 0000000..e69de29
diff --git a/JS_FUN_PRACTICE/Dom/creating.js b/JS_FUN_PRACTICE/Dom/creating.js
new file mode 100644
index 0000000..e69de29
diff --git a/JS_FUN_PRACTICE/Dom/index-FINISHED.html b/JS_FUN_PRACTICE/Dom/index-FINISHED.html
new file mode 100644
index 0000000..c8ffe34
--- /dev/null
+++ b/JS_FUN_PRACTICE/Dom/index-FINISHED.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>The DOM</title>
+    <link rel="stylesheet" href="../../base.css">
+
+  </head>
+
+  <body>
+    <p class="wes">I am Wes, I <em>love</em> to bbq and <strong>Make websites!</strong></p>
+    <img class="nice cool" src="https://picsum.photos/500" />
+
+    <div class="items">
+      <div class="item">
+        <img class="custom" data-last="bos" data-name="wes" src="https://picsum.photos/200" />
+        <img data-name="kait" src="https://picsum.photos/200" />
+        <img data-name="lux" src="https://picsum.photos/200" />
+
+        <p>Hi I'm a item</p>
+      </div>
+      <div class="item item2">
+        <img src="https://picsum.photos/200" />
+        <h2>
+          I am a heading
+          <span>I am hidden!</span>
+        </h2>
+        <p>Hi I'm a item</p>
+      </div>
+      <article class="item">
+        <h2>Im an article</h2>
+        <p class="pizza">This is how many pizzas I ate! 🍕</p>
+      </article>
+    </div>
+
+    <style>
+      h2 span {
+        display: none;
+      }
+
+      img {
+        transition: all 0.2s;
+      }
+
+      .round {
+        border-radius: 50%;
+        transform: rotate(1turn) scale(2);
+        box-shadow: 0 0 10px black;
+      }
+    </style>
+
+    <script src="./traversing.js"></script>
+  </body>
+
+</html>
diff --git a/JS_FUN_PRACTICE/Dom/index.html b/JS_FUN_PRACTICE/Dom/index.html
new file mode 100644
index 0000000..55dce17
--- /dev/null
+++ b/JS_FUN_PRACTICE/Dom/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>The DOM</title>
+  <link rel="stylesheet" href="../../base.css">
+</head>
+
+<body>
+  <div class="items">
+    <p>Hi I'm a item</p>
+    <div>
+      <h2>Sub Div</h2>
+      <p>Hi I'm a item</p>
+
+    </div>
+    <img src="https://source.unsplash.com/random/300x300" />
+    <p>Hi I'm a item</p>
+    <p>Hi I'm a item</p>
+  </div>
+</body>
+
+</html>
diff --git a/JS_FUN_PRACTICE/Dom/practice1.html b/JS_FUN_PRACTICE/Dom/practice1.html
new file mode 100644
index 0000000..56efbdb
--- /dev/null
+++ b/JS_FUN_PRACTICE/Dom/practice1.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/JS_FUN_PRACTICE/Dom/the-dom-FINISHED.js b/JS_FUN_PRACTICE/Dom/the-dom-FINISHED.js
new file mode 100644
index 0000000..ec351a8
--- /dev/null
+++ b/JS_FUN_PRACTICE/Dom/the-dom-FINISHED.js
@@ -0,0 +1,50 @@
+// const p = document.querySelector('p');
+// const imgs = document.querySelectorAll('.item img');
+// const item2 = document.querySelector('.item2');
+// const item2Image = item2.querySelector('img');
+// const heading = document.querySelector('h2');
+
+// console.log(heading.textContent);
+// console.log(heading.innerText);
+// // set the textContent property on that elment
+// // heading.textContent = 'Wes is cool';
+// // console.log(heading.textContent);
+// // console.log(heading.innerText);
+
+// console.log(heading.innerHTML);
+// console.log(heading.outerHTML);
+
+// const pizzaList = document.querySelector('.pizza');
+// console.log(pizzaList.textContent);
+
+// // pizzaList.textContent = `${pizzaList.textContent} 🍕`;
+// pizzaList.insertAdjacentText('afterbegin', '🍕');
+// pizzaList.insertAdjacentText('beforeend', '🍕');
+
+// Classes!
+const pic = document.querySelector('.nice');
+pic.classList.add('open');
+pic.classList.remove('cool');
+
+console.log(pic.classList);
+
+function toggleRound() {
+  pic.classList.toggle('round');
+}
+
+pic.addEventListener('click', toggleRound);
+
+pic.alt = 'Cute Pup'; // setter
+console.log(pic.alt); // getter
+console.log(pic.naturalWidth); // getter
+pic.width = 200;
+
+// pic.setAttribute('wes-is-cool', 'REALLY CUTE PUP');
+// console.log(pic.getAttribute('alt'));
+
+const custom = document.querySelector('.custom');
+console.log(custom.dataset);
+
+custom.addEventListener('click', function() {
+  alert(`Welcome ${custom.dataset.name} ${custom.dataset.last} `);
+});
diff --git a/JS_FUN_PRACTICE/Dom/the-dom.js b/JS_FUN_PRACTICE/Dom/the-dom.js
new file mode 100644
index 0000000..e69de29
diff --git a/JS_FUN_PRACTICE/Dom/traversing-FINISHED.js b/JS_FUN_PRACTICE/Dom/traversing-FINISHED.js
new file mode 100644
index 0000000..78a262e
--- /dev/null
+++ b/JS_FUN_PRACTICE/Dom/traversing-FINISHED.js
@@ -0,0 +1,18 @@
+const wes = document.querySelector('.wes');
+
+// console.log(wes.children);
+// console.log(wes.firstElementChild);
+// console.log(wes.lastElementChild);
+// console.log(wes.previousElementSibling);
+// console.log(wes.nextElementSibling);
+// console.log(wes.parentElement);
+
+const p = document.createElement('p');
+p.textContent = 'I will be removed';
+document.body.appendChild(p);
+
+p.remove();
+
+console.log(p);
+
+document.body.appendChild(p);
diff --git a/JS_FUN_PRACTICE/Dom/traversing.js b/JS_FUN_PRACTICE/Dom/traversing.js
new file mode 100644
index 0000000..e69de29
diff --git a/README.md b/README.md
index 7a590d3..5f03c5e 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,74 @@
-# Dev-Journey
-Where aspirants meets the real world
+Guidelines on how this Project works :)
+
+Read below to see how you can join an existing project or create your own.
+
+## One rule of this community:
+
+We don't care if you break things. This is a playground, and we encourage failing often. Use this as a practice ground, and enjoy contributing to projects you create with your fellow mates.
+## A Guide to Get Started (used to be the 4 step guide)
+
+**Contributors**: Everyone who has contributed something back to the project.
+
+**Community Members**: People who use the project. They might be active in conversations or express their opinion on the project’s direction.
+
+**README**: The README is the instruction manual that welcomes new community members to the project. It explains why the project is useful and how to get started.
+
+ **CONTRIBUTING**: Whereas READMEs help people use the project, contributing docs help people contribute to the project. It explains what types of contributions are needed and how the process works. While not every project has a CONTRIBUTING file, its presence signals that this is a welcoming project to contribute to.
+
+1. **CODE_OF_CONDUCT**: The code of conduct sets ground rules for participants’ behavior and helps to facilitate a friendly, welcoming environment. While not every project has a CODE_OF_CONDUCT file, its presence signals that this is a welcoming project to contribute to.
+
+2. **Issue tracker**: Where people discuss issues related to the project.
+
+3. **Pull requests**: Where people discuss and review changes that are in progress.
+
+4. Shift to project directory:
+
+    ```bash
+    cd Dev-journey.projects   ```
+
+5. Before you make any changes, [keep your fork in sync](https://www.freecodecamp.org/news/how-to-sync-your-fork-with-the-original-git-repository/) to avoid merge conflicts:
+
+    ```bash
+    git remote add upstream https://github.com/Yax-coder/Dev-Journey.git
+    git pull upstream master
+    ```
+
+    If you run into a **merge conflict**, you have to resolve the conflict. There are a lot of guides online, or you can try this one by [opensource.com](https://opensource.com/article/20/4/git-merge-conflict).
+
+6. After adding the upstream and checking that all files are up to date, we now will create new branch before editing any files. There are two ways to do so:
+
+    ```bash
+    git checkout -b <branch-name>
+    ```
+
+    ```bash
+    git branch <branch-name>
+    git switch <branch-name>
+    ```
+
+
+7. On your computer, open your text editor, and add your name to the `CONTRIBUTORS.md` file.
+
+8. Add the changes with `git add`, `git commit` ([write a good commit message](https://chris.beams.io/posts/git-commit/), if possible):
+
+    ```bash
+    git add CONTRIBUTORS.md
+    git commit -m "Add <your-github-username>"
+    ```
+
+    **Replace \<your-github-username\>!**
+
+9. Push your changes _to your repository_:
+
+    ```bash
+    git push origin <branch-name>
+    ```
+
+10. Go to the GitHub page of _your fork_, and make a pull request:
+
+    ![pull request image](https://help.github.com/assets/images/help/pull_requests/choose-base-and-compare-branches.png)
+
+    Read more about pull requests on the [GitHub help pages](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request).
+
+11. Wait until Zerobot or one of the maintainers merges your pull request. If there are any conflicts, you will get a notification.
+
