I will start by sharing the basic html and css used in this project and then walk through the javascript to discuss what is happening: 

html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM Arrays Methods</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <h1>Dom Array Methods</h1>

    <div class="container">
      <aside>
        <button id="add-user">Add User <i class="fas fa-user-plus"></i></button>
        <button id="double">
          Double Money <i class="fas fa-dollar-sign"></i>
        </button>
        <button id="show-millionaires">
          Show Millionaires <i class="fas fa-eye"></i>
        </button>
        <button id="sort">
          Sort by richest <i class="fas fa-sort-amount-down"></i>
        </button>
        <button id="calculate-wealth">
          Calculate Wealth <i class="fas fa-calculator"></i>
        </button>
      </aside>

      <main id="main">
        <h2><strong>Person</strong> Wealth</h2>
      </main>
    </div>
  </body>
</html>

 

css:

* {
  box-sizing: border-box;
}

body {
  background-color: #f4f4f4;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  align-items: center;
}

.container {
  display: flex;
  margin: 0 auto;
  padding: 20px;
  max-width: 100%;
  width: 800px;
}

aside {
  border-right: 1px solid #111;
  padding: 10px 20px;
  width: 250px;
}

button {
  cursor: pointer;
  border-radius: 5px;
  background-color: white;
  border: none;
  margin-bottom: 5px;
  margin-right: 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 14px;
  border: 1px solid black;
  transition: all ease-out 0.1s;
}

button:hover {
  transform: scale(1.15);
  background-color: rgb(241, 241, 241);
}

button:focus {
  outline: none;
  outline-style: none;
  outline-color: rgba(255, 255, 255, 0);
}

main {
  flex: 1;
  padding: 10px 20px;
}

h2 {
  border-bottom: 1px solid #111;
  display: flex;
  justify-content: space-between;
  font-weight: 300;
  padding-bottom: 10px;
  margin: 0 0 20px;
}

h3 {
  background-color: #fff;
  border-bottom: 1px solid #111;
  display: flex;
  justify-content: space-between;
  font-weight: 300;
  padding: 10px;
  margin: 20px 0 0;
}

.person {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  margin-bottom: 10px;
}

 

 

 

Javascript:

I first get all of my dom elements in a javascript const so I can manipulate them when I need to through the javascript dom method. 

 

const main = document.getElementById("main");
const addUserBtn = document.getElementById("add-user");
const doubleBtn = document.getElementById("double");
const showMillionairesBtn = document.getElementById("show-millionaires");
const sortBtn = document.getElementById("sort");
const calculateWealthBtn = document.getElementById("calculate-wealth");

 

I have an array called data which holds the name and value for users. 

  1. In the function below I want to reset the main HTML before adding the name of users and how much they own, therefore I'm putting a generic blank HTML there.
  2. Then I loop through my data using the "forEach" method which can accept the item, index, and array as arguments but they are not all necessary if you don't need to access the index and the entire array in each loop you can exclude these arguments. 
  3. inside my loop, I'm creating a div element and then adding the class person to it(I've styled person class in my CSS above)
  4. still in my loop I want to add HTML content to my div, so I use element.innerHtml to pass on HTML with name and money from my data.
  5. finally, to see this element I need to append it to an existing HTML element, so I'm adding it to my "main" div.

 now every time I call updateDom it should update my HTML to show the latest available data in my data array.

function updateDom(providedData = data){
  // clear the main div
  main.innerHTML = '<h2><strong>Person</strong> Wealth</h2>'

  providedData.forEach((item, index, array) => {
    const element = document.createElement('div');
    element.classList.add('person');

    element.innerHTML = `<strong>${item.name}</strong> £${formatMoney(item.money)}`;

    main.appendChild(element);

  })



}

 

map array method, returns another map, it basically map every value to a new value depending on the function you provide to it, in the example below im doubling the money for every item and returning the name as it was using the spread operator "..."

updateDOm() is calling the function I used above. 

function doubleMoney(){
  data = data.map(user=> {return {...user, money: user.money * 2};});
  updateDom();  

}