## DEV Community Gass

Posted on • Updated on

# One of my favorite JS challenges on Stack Overflow

This one got me hooked for hours. I love when I find uncommon questions and have the time to attempt to solve them.

After one year and four months of been active on Stack Overflow and having answered almost 300 questions, this one is one of my favorite challenges.

## The question

How does one randomly change an element across the board for all users without using a back-end ?

Well, to be honest the question was not exactly like that, the user wasn't discarding the use of a back-end but it just made it more interesting.

## How did I solve it?

The first time I read the question I thought it was not possible without a back-end. But after some time thinking I realized that the key to unlock this mistery was in the value that new Date().getTime() provides, due to the fact that returns a number that is the same across all computers around the world and is unique!

You can see the ⚙️ working snippet here

## Code explanation

First things first..

``````<div id="root"/>
``````

I retrieve the milliseconds since January 1, 1970 and then I convert it to hours:

``````const hours = Math.round(new Date().getTime()/(1000*60*60))
``````

Slice `hours` six digit number into three numbers and add them inside an array.

I'm creating this array with the purpose of having multiple unique numbers to create a random number depending on the time, which will be the same across all computers.

``````const numbers = [
Number(hours.toString().slice(0,2)),
Number(hours.toString().slice(2,4)),
Number(hours.toString().slice(4,6))
]
``````

Now, I need images to display, depending on the random number that the code will generate. I get some URLs from Lorem Picsum and add them inside an array:

``````images = [
'https://picsum.photos/id/237/200/300',
'https://picsum.photos/id/236/200/300',
'https://picsum.photos/id/235/200/300',
'https://picsum.photos/id/234/200/300',
'https://picsum.photos/id/233/200/300',
'https://picsum.photos/id/232/200/300',
'https://picsum.photos/id/231/200/300',
'https://picsum.photos/id/230/200/300',
'https://picsum.photos/id/229/200/300',
'https://picsum.photos/id/228/200/300'
];
``````

Okay, is time to create the function that will return a random number by the hour.

### So how do we do it ?

I'll show you step by step..

Inside `hourlyRand()` the first thing I build is an arrow function that will return a pseudo random number as a string depending on the `numbersArr` (array of numbers) passed to it.

This does not make much sense now 😵‍💫 but it will a few lines down the road.

``````function hourlyRand(){
const pseudoRandString = (numbersArr) => {
let rand = 1
numbersArr.forEach((n, i) => {
if(n !== 0) rand = rand * n
})
return rand.toString()
}
}
``````

Now using `pseudoRandString(numbersArr)` function I pass the `numbers` array initialized at the top like so `pseudoRandString(numbers)` and I assign the value to `randString` variable:

``````  let randString = pseudoRandString(numbers)
``````

By slicing the `randString` I can get a two digit number. But these numbers have a typeof `string` so I need to convert back to `Number` and assign the value to `n`:

``````  // length of the pseudo random number string
let L = randString.length

let n = Number(randString.slice(L-3,L-1))
``````

And the function `hourlyRand()` is almost ready. The only thing pending is to return `n`

The finished function `hourlyRand()` looks like so:

``````function hourlyRand(){
const pseudoRandString = (numbersArr) => {
let rand = 1
numbersArr.forEach((n, i) => {
if(n !== 0) rand = rand * n
})
return rand.toString()
}

// get a pseudo random number and convert to string
let randString = pseudoRandString(numbers)

// length of the pseudo random number string
let L = randString.length

// slice the string and convert to number
let n = Number(randString.slice(L-3,L-1))

// return the double digit hourly random number
return n
}
``````

Now that we have all we need, we get the two digit random number from `hourlyRand()` and divided by 10 (because we have 10 images) and round it:

``````// pseudo-random number between 0 and 9
let n = Math.round(hourlyRand()/10)
``````

Finally to display the hourly random image just add `n` as an index of the images array:

``````const element = document.getElementById('root')
element.innerHTML = '<img src=' + images[n] + '/>'
`````` I don't think your logic is exactly right, but I like the idea.

For example, when hours is 459730 (tomorrow sometime I think), n will be 10, and out of the range of 0->9 because hourlyRand() returns 9.5

It also isn't very random because of how your pseudo random number generator works. A better hash function would look more random.

Even something like this would be more random than all that complexity IMHO.

``````let n = ((new Date().getTime() / (1000 * 60 * 60) | 0) * 27) % 10;
``````