Okay, so today I wanted to mess around with something I’ve been calling “boxing random.” Basically, I wanted to see if I could create different sized boxes and fill them randomly with, well, anything. Could be colors, numbers, whatever. It’s kinda like those surprise grab bags you get, but digital.
Getting Started
First, I needed a way to, you know, make the boxes. I decided to go with a simple setup using just plain old HTML and CSS. I figured I could easily adjust the sizes that way. No need for anything fancy. So, I started whipping up some <div> elements.
I played around with the width and height, making some small, some big, some skinny, some wide. I gave each one a border, just so I could visually see what the heck was going on.
- Made a bunch of
<div>tags. - Gave ’em different widths and heights using inline CSS.
- Added borders to each one, just to make them visible.
Making it Random
Now for the fun part – the randomness! I knew I needed JavaScript for this. The whole idea was that every time I refreshed the page, or maybe clicked a button, the boxes would get filled with something different. So, I created script tag.
I started by grabbing all those <div> elements I made earlier. I used *('div') to do that. Easy peasy.
Then, I made a loop to go through each of those <div> elements. Inside the loop, I used to pick a random number. That’s like the core of the whole “random” thing, right?
Filling the Boxes
Now with my random number, I figured I could do a few things. Initially, I decided to just change the background color of each box. I used the random number to generate a random color code (you know, those hex codes like #FF0000 for red). There are different ways to do this, but I just used the simplest way for now. I update the `*`.I was stoked! Each box had a different, totally random color, every time I refreshed the page!
Later, I thought, “Why stop at colors?” So I tweaked the code a bit. Instead of just changing the color, I made it so sometimes the box would get a random number inside it. Other times, it would get a random letter. I used an `if` statement, basically a coin flip, to decide whether to put a number or a letter.
Putting It All Together
I added a button. I wanted to be able to trigger the randomness whenever I felt like it, not just on page refresh. I made the button run my random-filling code when it’s clicked.I hooked up that button using `addEventListener` to a new function, the function contain all my random logic.
The Final Result
It’s pretty simple, really. A bunch of different-sized boxes that get filled with random stuff – colors, numbers, letters – every time I click the button. It’s not exactly going to win any awards, but it was a fun little experiment. It helped me brush up on some basic JavaScript stuff, and I got to play around with randomness, which is always kind of neat. It’s like a little digital lottery, but with boxes instead of balls.
Next time,I maybe try to create the box dynamic,who knows.
