Display random temp and 3 day forecast

[cyclingg]

I am working on javaScript that will show the date and time correctly for 3 different cities (time zones). I have this working fine. Then I need to show the high and low temperatures for each city and then a 3 day forecast.

This is what I have so far:
http://cdpn.io/imhdw

I am having trouble with the high and low temperatures and the 3 day forecast from the current day. I gave up on the forecast for now and am concentrating on the temperatures.

For the temperatures, I tried to use the Math.random function. It worked; but, it keeps giving me a random number between 1 and 20 (20 is my highest). I want the highs to range from 10 to 20 and the lows to range from 1to 9. Is there a way to use Math.random to range from 0.5 to 1.0 instead of 0.0 to 1.0? I tried using a for loop to use only 10 to 20 but I still have the lower numbers used.
This is what I tried with no luck:
elem = document.getElementById(“vancHigh”);
for (var i = 10; i <= 20; i++)
{
var randomNum = Math.ceil(Math.random() * 20);
var displayStr = randomNum;
elem.innerHTML = displayStr;
}

I am thinking that the randomNum variable is using the Math.random which is using numbers 1 – 20 and not using the “for” statement. Am I out to lunch on this one?

I am going round in circles and maybe need to look at it again in the morning.

Thanks.

[dyr]

Math.random always gives a number between 0 (inclusive) and 1 (exclusive) and has nothing to do with the range in your for loop.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

You just scale it to whatever range you want. So if you want the high’s to be between 10 and 20 you would multiply by 10 and add 10. Math.random() * 10 + 10. Multiplying the random number by 10 will give you numbers in a range of 0 to 10. Adding 10 to that will give you numbers in a range 10 to 20. You may use Math.ceil() or Math.floor() for rounding based on what you want the final range to be.

Recap: Math.random() always yields numbers from 0.0 to 1 (not including 1) and to get random numbers in a different range you simply transform that output by multiplying, adding, dividing, etc.

[cyclingg]

dyr, thank you very much. I never thought about adding 10. Something so simple.

Thanks.

[dyr]

You’re welcome. :)

[cyclingg]

One more thing. If you use Math.random(), is there a way for the number to become random for just one day. It would stay the same number for the whole day? As it is now, the number will change every time the page is loaded or re-loaded.

Thanks.

[dyr]

That’s an interesting and somewhat challenging question. I can think of several ways of achieving what you want but they would be dependent on your server setup and specific use cases.

Idea 1: you could generate and cache the results for a day. This could mean caching the data client-side (cookies, localstorage) or server side (depends on your setup and how you’re processing requests.) The client-side solution would mean each client gets a different set of numbers but then subsequent page loads from the same client would yield the same numbers. If you’re caching the data server-side it would be possible to deliver the same data to every client within a given day.

Idea 2: use a seed-based random number generator that you can control the input of. Math.random() uses the current time as a seed and you can’t alter that behavior. I think trying to implement your own seeded PRNG algorithm is probably overkill but I can recommend this one: http://davidbau.com/encode/seedrandom.js which will likely suit your use case just fine. This short script adds a function to the Math object called seedrandom which will take any input you give it and produce a random number. If you call the function twice with the same input you’ll get the same output. With this knowledge it’s relatively trivial to create a script that will output the same number each time within a given day: just use today’s date as the seed (use month/day/year but not time, since that will change throughout the day)! Successive calls to this function within the same day will always yield the same result.

I hope that gets you started on the right track.

[cyclingg]

Hmm. I think I will hold off on that at the moment. I am still learning and maybe down the road I will look into this further. As my code is now, I think it will have to do for what I want.

Thanks for the link.

[Author]

Posts