|
| 1 | +const main = document.getElementById("main"); |
| 2 | +const addUserButton = document.getElementById("add-user"); |
| 3 | +const doubleButton = document.getElementById("double"); |
| 4 | +const showMillionairesButton = document.getElementById("show-millionaires"); |
| 5 | +const sortButton = document.getElementById("sort"); |
| 6 | +const calculateWealthButton = document.getElementById("calculate-wealth"); |
| 7 | + |
| 8 | +let data = []; |
| 9 | + |
| 10 | +async function getRandomUser() { |
| 11 | + const res = await fetch("https://randomuser.me/api"); |
| 12 | + const data = await res.json(); |
| 13 | + const user = data.results[0]; |
| 14 | + const newUser = { |
| 15 | + name: `${user.name.first} ${user.name.last}`, |
| 16 | + money: Math.floor(Math.random() * 1000000), |
| 17 | + }; |
| 18 | + addData(newUser); |
| 19 | +} |
| 20 | + |
| 21 | +function addData(user) { |
| 22 | + data.push(user); |
| 23 | + updateDOM(); |
| 24 | +} |
| 25 | + |
| 26 | +// forEach() |
| 27 | +function updateDOM(providedData = data) { |
| 28 | + main.innerHTML = "<h2><strong>Person</strong> Wealth</h2>"; |
| 29 | + providedData.forEach((person) => { |
| 30 | + const element = document.createElement("div"); |
| 31 | + element.classList.add("person"); |
| 32 | + element.innerHTML = `<strong>${person.name}</strong> ${formatMoney( |
| 33 | + person.money |
| 34 | + )}`; |
| 35 | + main.appendChild(element); |
| 36 | + }); |
| 37 | +} |
| 38 | + |
| 39 | +// Format number as money - https://stackoverflow.com/questions/149055/how-to-format-numbers-as-currency-string |
| 40 | +function formatMoney(number) { |
| 41 | + return "$" + number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,"); |
| 42 | +} |
| 43 | + |
| 44 | +// map() |
| 45 | +function doubleMoney() { |
| 46 | + data = data.map((user) => { |
| 47 | + return { ...user, money: user.money * 2 }; |
| 48 | + }); |
| 49 | + updateDOM(); |
| 50 | +} |
| 51 | + |
| 52 | +// sort() |
| 53 | +function sortByRichest() { |
| 54 | + data.sort((a, b) => b.money - a.money); |
| 55 | + updateDOM(); |
| 56 | +} |
| 57 | + |
| 58 | +// filter() |
| 59 | +function showMillionaires() { |
| 60 | + data = data.filter((user) => user.money > 1000000); |
| 61 | + updateDOM(); |
| 62 | +} |
| 63 | + |
| 64 | +// reduce() |
| 65 | +function calculateWealth() { |
| 66 | + const wealth = data.reduce( |
| 67 | + (accumulator, user) => (accumulator += user.money), |
| 68 | + 0 |
| 69 | + ); |
| 70 | + const wealthElement = document.createElement("div"); |
| 71 | + wealthElement.innerHTML = `<h3>Total wealth: <strong>${formatMoney( |
| 72 | + wealth |
| 73 | + )}</strong></h3>`; |
| 74 | + main.appendChild(wealthElement); |
| 75 | +} |
| 76 | + |
| 77 | +addUserButton.addEventListener("click", getRandomUser); |
| 78 | +doubleButton.addEventListener("click", doubleMoney); |
| 79 | +sortButton.addEventListener("click", sortByRichest); |
| 80 | +showMillionairesButton.addEventListener("click", showMillionaires); |
| 81 | +calculateWealthButton.addEventListener("click", calculateWealth); |
| 82 | + |
| 83 | +// Init |
| 84 | +getRandomUser(); |
| 85 | +getRandomUser(); |
| 86 | +getRandomUser(); |
0 commit comments