wealth list with Javascript array methods

3 min readDec 14, 2020

This demo is learned from Brad Traversy’s course.

Demo Github

When mentioning Array, there always is a list coming up in my mind. The first thing of Javascript is manipulating DOM to achieve the goal.

This demo concludes the arrray methods:sort(),forEach(),map() and filter().


fetch random user api

create elements and appendChild to DOM


first remember to link the CSS and js in HTML file

aside is all the buttons with events added later in js

the main stores the data list


imported the font from Google fonts if you want

make everything in the center

with the line separating the aside and main

the title aligns at the other side with space-between

the h3 and .person will be appended in js


get the DOM and set an array to store the new data

the five events listeners represent five events buttons in the aside

add a new user:

To fetch random user names, it’s easy to use a random user generator API

If you come to Access-control-allow-origin error, try to understand the answer in…




❤️Front-end Web Development self-taught *share what I learned*