Use randomly gen. font awesome icons as the background

Code Help HTML/CSS/JS
1

Hello Ask

I want to use js to randomly pick font awesome icons and place them in a grid (like background-image in css) with z-index: -1 so it basically acts like a background.

could I get some help? specifically at the generation part

I’ve tried generation but it fails (can’t see anything, I suspect it’s because of the wrong classes)

1 Like
2

@doxr can you provide the link of your repl?

2 Likes
3

Well, do I really need one? It’s just generic js code. I’ll put all the code in a repl and give you the link if needed

4

I made a Phind search, if it helps.

1 Like
5

Let me test it out, I asked Phind but I never received an answer like this

Edit: 1. nothing generated and 2. my site messed up :frowning:

6

I want to add that I somehow have 6.0.0 pro (don’t ask how) and I think duotone is best for a background.

Here is what I started with:

let icons = ['fa-gamepad', 'fa-gamepad-modern', 'fa-house', 'fa-moon'];
function randomicon(ico-list) {
  const chooseOne = Math.floor(Math.random() * icons.length);
  return icons[chooseOne];
}

Now the generation thing should look something like this:

  blockUserScreen() 
// I think this will be kind of laggy so you should probably put a loading screen

function generate  {
  CreateIconTag
  const randomIcon = randomicon(icons)
  AddClasses(['fa-duotone', randomIcon])
  PutTagInBody
  tag.style.z-index = "-1"
}

while (notFilledUpBackground) {
  generate();
}

wait(Math.random(5, 9));
unblockUserScreen(); //loading screen is gone

I know I wrote that the same way you write english but I think that’s how I’ll achieve this.

Specifically: How do I create the icon tag, how do I add those classes, I think I use appendChild, and how do I check that the icons have successfully filled up the background?

I’m on a chromebook, full screen’s dimentions are 1365 x 767 iirc
idk about non full screen, you have to take in the fact that maybe people closed the bookmark tab, or use autohide shelf, or maybe they made chrome smaller