Weather Generator to retain value in LocalStorage

[Todge]

Mar 12, 2019 20:28:11 GMT -8 Xesna said:

Haha. I just figured it out for pb.plugin.key('Weather').get() when I was explaining my friend about the code, then I face palmed myself when I inserted it. Thanks. Yes, I've done the changes as needed and I changed the User (private) to as you suggested, Forum (super), now it carries the weather across without any changes. Big step since last week. I greatly appreciate it.

No worries..

With the pb.plugin.key('Weather').get() can I use it for temperature, wind speed, and rain percentage as well to store/retain their values? Or do I need to have different keys for those variables?

The weather is stored as an array in the weather key, so you can store multiple weather characteristics within the same key, at the moment the array is as follows...

pb.plugin.key('Weather').get()[0] is the date the weather was last set, for comparative purposes.
pb.plugin.key('Weather').get()[1] is the element number of the wind array to be displayed.

There is no reason why you can't add to that array for temperature, rainfall, wind speed or for whatever else you see fit, so no, you only need the one key.

Do you happen to know how I can add °C to the output of the temperature?

There are a couple of ways of doing this, but the easiest would be just to add displaying the temperature..

$('#temperature_result').html(pb.plugin.key('Weather').get()[1]+'°C');

function run_weather()
{
    // Set Wind Array...
    var wind = ["Windy", "Breezy", "Fair and Windy", "A Few Clouds and Windy",
                "Partly Cloudy and Windy", "Mostly Cloudy and Windy", "Overcast and Windy"];

    // Get date according to PD Date...
    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var today = months[new Date(pb.data('serverDate')).getMonth()];
    today += new Date(pb.data('serverDate')).getDate();

    // If key has not been set, or day has changed, choose an array item and set key, otherwise display weather...
    if(pb.plugin.key('Weather').get() == undefined || pb.plugin.key('Weather').get()[0] != today)
    {
        var t = (Math.floor((Math.random() * 87) + 1)).toString();

        var windArray = Math.floor((Math.random() * 6) + 1);

        set_weather_key(today, t, windArray);
    }
    else
    {
        $('#temperature_result').html(pb.plugin.key('Weather').get()[1]);

        $('#weather_result').html(wind[pb.plugin.key('Weather').get()[1]]);
    }

    return;
}

function set_weather_key(day, temperature, wind)
{
    // Create weather array for key...
    var key_data = new Array(day, temperature, wind);

    // Alert member that temperature needs updating...
    $('#temperature_result').html('<b>Weather is out of date.<br><br>Please click here to update</b>').css('cursor','pointer');    

    // Alert member that weather needs updating...
    $('#weather_result').html('<b>Weather is out of date.<br><br>Please click here to update</b>').css('cursor','pointer');

    // Alert member that wind speed needs updating...
    //document.getElementById("windspd_result").innerHTML = "Windy: " + direction[i] + " " + win_number + " km/h";

    // Alert member that rain percentage needs updating...
    //document.getElementById("chance_result").innerHTML = per + " Chance of Rain: " + rain_number + "%";

    // Add click event, set key and display weather...
    $('#weather_result').click(function(){
        pb.plugin.key('Weather').set({ value: key_data });
        $(this).off('click').css('cursor','');

        run_weather();
    });

    return;
}



$(document).ready(function(){
    if(pb.data('user').is_logged_in == 1)
    {
        run_weather();
    }
});

In your code above you are saving the temperature before the wind element, but haven't changed that when displaying result, currently you are displaying the wind as the element number according to the temperature, so if your temperature is more than 6, the code will break, or display 'undefined' as the wind.
As such it is usually best to add to the end of an array rather than inserting elements into the middle of it, that way you will not upset the current list.
To display the wind correctly you will need to change the element number in the line..

$('#weather_result').html(wind[pb.plugin.key('Weather').get()[1]]);

In this case, the red number should be '2'.

I'm not sure weather this part of your code is needed...

// Alert member that temperature needs updating...
$('#temperature_result').html('<b>Weather is out of date.<br><br>Please click here to update</b>').css('cursor','pointer');

As both the wind and temperature will be updated at the same time do you need to alert the viewer twice?

[Xesna]

No. It would be best if all variables: temperature, weather, wind, and rain would share the single click rather than individually.

EDIT: I'll take a look at what you mentioned and work on it when I have some time, I am going to be bashing my brains in doing page tables.

[Todge]

Good luck, and feel free to yell if you get stuck, or PM me if you prefer.

[Bob]

I notice you're working with an array of values for your weather data.  Any reason you're going this route over a JSON object?  The sheer readability and extensibility of a JSON object will pay dividends if you're going to find yourself returning to this codebase down the road.  Right now you need to go back and reference which index refers to which piece of data.  The code doesn't explain that in-place.  And you're fairly locked into a specific order; if you change the index of your temperature data, for example, you need to change its reference everywhere else in the code.

A JSON object solves all of that.  Building and saving it is as simple as:
// Define it
const keyData = {
  date: day,
  temp: temperature,
  wind: wind
};

// Save it
pb.plugin.key('Weather').set({ value: keyData });That could be done right in your  set_weather_key()  function.  The key names are arbitrary; you can make them line up 1:1 with your parameters if you want.  I only changed them to demonstrate that.

When you retrieve your data, you'd just use it as an object.  For example:
console.log(
  pb.plugin.key('Weather').get().date,
  pb.plugin.key('Weather').get().temp,
  pb.plugin.key('Weather').get().wind
);

// Or assign it to a variable
const weatherData = pb.plugin.key('Weather').get();
console.log(
  weatherData.date,
  weatherData.temp,
  weatherData.wind
);
The principles of your code all remain the same.  You'd still check to make sure the key is defined.  You're still want to see if it has been set today before updating.  But that would look like this instead:
if(!pb.plugin.key('Weather').get() || pb.plugin.key('Weather').get().date != today) {
 ...
}

And you'll want to change out references throughout the remainder of your code.  You won't be referencing the temperature via an index of 1 anymore, for example.  Instead, it'd be:
pb.plugin.key('Weather').get().temp;
Just make sure you use the key defined when creating the object.

As much as I hate the terminology, this will make your code far more self-documenting.  Coming back to it will be easier.  You won't need to remember which index you store the temp, wind, or rain data in.  None of that.  Just settle on a naming convention that makes sense to you, and rely on good ole' natural language to reference your data.

[Xesna]

The reason is I am barely learning javascript, so for the mean time I am sticking to the array list until I know about javascripting, then I will modify the code later in the future. Thank you for the assistance nonetheless, I will use it as a reference when I dabble with it more.

[Xesna]

Mar 15, 2019 10:45:55 GMT -8 Todge said:

Good luck, and feel free to yell if you get stuck, or PM me if you prefer.

Again, thank you again for the assistance, I however ran into the issue of:

function run_weather()
{
   // Set Wind Array...
   var wind = ["Windy", "Breezy", "Fair and Windy", "A Few Clouds and Windy",
               "Partly Cloudy and Windy", "Mostly Cloudy and Windy", "Overcast and Windy"];
   
   // Set Cardinal Direction...
   var direction = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
   
   // Set rain percentage...
   var percent = ["Drizzle", "Isolated", "Scattered", "Numerous"];
   
   // Get date according to PD Date...
   var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   var today = months[new Date(pb.data('serverDate')).getMonth()];
   today += new Date(pb.data('serverDate')).getDate();
   
   // If key has not been set, or day has changed, choose an array item and set key, otherwise display weather...
   if(pb.plugin.key('Weather').get() == undefined || pb.plugin.key('Weather').get()[0] != today)
   {
       // Set temperature...
    var t = (Math.floor((Math.random() * 87) + 1)).toString();
       
       // Grab random index from wind array...
       var windArray = Math.floor((Math.random() * 6) + 1);
                   
       // Set cardinal direction...
       var c = Math.floor((Math.random() * 8) + 1);
       
       // Wind Velocity...
    //var v = Math.floor((Math.random() * 52) + 1).toString();

       var p = Math.floor((Math.random() * 4) + 1);
       
       // Rain Chance...
       //var rainChance = Math.floor((Math.random() * 100) + 1).toString();
       
       set_weather_key(today, t, windArray, c, p);
   }
   else
   {
       $('#temperature_result').html(pb.plugin.key('Weather').get()[1]+'°C');
       
       $('#weather_result').html(wind[pb.plugin.key('Weather').get()[1]]);
       
       $('#windspd_result').html('Windy: ' + direction[pb.plugin.key('Weather').get()[1]]);
       
       $('#chance_result').html(percent[pb.plugin.key('Weather').get()[1]]);
   }
   
   return;
}

function set_weather_key(day, t, wind, c, p)
{
   // Create weather array for key...
   var key_data = new Array(day, t, wind, c, p);
   
   // Alert member that weather needs updating...
   $('#weather_result').html('<b>Weather is out of date.<br><br>Please click here to update</b>').css('cursor','pointer');
   
   // Add click event, set key and display weather...
   $('#weather_result').click(function(){
       pb.plugin.key('Weather').set({ value: key_data });
       $(this).off('click').css('cursor','');
       run_weather();
   });
   return;
}

$(document).ready(function(){
   if(pb.data('user').is_logged_in == 1)
   {
       run_weather();
   }
});

the following snippets:

// Wind Velocity...
var v = Math.floor((Math.random() * 52) + 1).toString();
...
// Rain Chance...
var rainChance = Math.floor((Math.random() * 100) + 1).toString();

I tried passing them through the function set_weather_key, but in the pb...[#] of the key, I would get undefined as a result. Thus, my work around was to store the random values into an array, alas. I do not know much about JavaScript as of yet. I haven't had much time to fiddle with it except these few hours. *Sigh* Life of a college student, lmao. Any case, I was thinking if there is a way to call the globalized var arrays, then pass the randomized values into the function, then somehow append the values into the zero index of the arrays to store them and call them in the else statement. I am speaking hypothetically, of course. I tried doing it, but failed miserably. JS is extremely fickle in comparison to Python. OTL

EDIT: On a side note, as what you mentioned before - in regards to the weather result - it is strange: $('#weather_result').html(wind[pb.plugin.key('Weather').get()[1]]); rather than what you suggested it being: $('#weather_result').html(wind[pb.plugin.key('Weather').get()[2]]); for when I put 2 in the array, I do not get any values printed in comparison to 1. I do not know why, might be how the keys are being stored. Though, they're being stored accordingly: temperature, windArray, cardinal direction, velocity, type of rain, rain chance.

[Todge]

Apr 27, 2019 19:08:57 GMT -8 Xesna said:

Mar 15, 2019 10:45:55 GMT -8 Todge said:

Good luck, and feel free to yell if you get stuck, or PM me if you prefer.

Again, thank you again for the assistance, I however ran into the issue of:



the following snippets:

// Wind Velocity...
var v = Math.floor((Math.random() * 52) + 1).toString();
...
// Rain Chance...
var rainChance = Math.floor((Math.random() * 100) + 1).toString();

I tried passing them through the function set_weather_key, but in the pb...[#] of the key, I would get undefined as a result. Thus, my work around was to store the random values into an array, alas. I do not know much about JavaScript as of yet. I haven't had much time to fiddle with it except these few hours. *Sigh* Life of a college student, lmao. Any case, I was thinking if there is a way to call the globalized var arrays, then pass the randomized values into the function, then somehow append the values into the zero index of the arrays to store them and call them in the else statement. I am speaking hypothetically, of course. I tried doing it, but failed miserably. JS is extremely fickle in comparison to Python. OTL

EDIT: On a side note, as what you mentioned before - in regards to the weather result - it is strange: $('#weather_result').html(wind[pb.plugin.key('Weather').get()[1]]); rather than what you suggested it being: $('#weather_result').html(wind[pb.plugin.key('Weather').get()[2]]); for when I put 2 in the array, I do not get any values printed in comparison to 1. I do not know why, might be how the keys are being stored. Though, they're being stored accordingly: temperature, windArray, cardinal direction, velocity, type of rain, rain chance.

Don't forget that whenever you change the way the key contains the data you will need to clear it for the code to function, otherwise you will try to grab data that is either not there, hence the undefined, or is simply wrong.

Once this is corrected you should be able to grab the correct data from the correct array entries... Using [1] for all entries allows the plugin to work simply because the data it is trying to access otherwise is non-existent and will either return undefined or will throw an error.

Failing that, I have amended the plugin I gave you before but this time containing all of your additions. I have also simplified the way the weather is displayed, so that you do not need to add a separate <div> to your template to contain all of the weather aspects.

ALSO, if you look at the way the arrays are now set, the random elements are taken from the arrays length, so you can add extra elements to the rain or wind etc. without the need to update the code to take account of the added array indices.

Also[2], try to name your variables in such a way that you will recognise them.. It will save you a lot of hair pulling in the future.

Weather Plugin version 2

[Xesna]

Apr 28, 2019 16:30:44 GMT -8 Todge said:

Don't forget that whenever you change the way the key contains the data you will need to clear it for the code to function, otherwise you will try to grab data that is either not there, hence the undefined, or is simply wrong.

Once this is corrected you should be able to grab the correct data from the correct array entries... Using [1] for all entries allows the plugin to work simply because the data it is trying to access otherwise is non-existent and will either return undefined or will throw an error.

Failing that, I have amended the plugin I gave you before but this time containing all of your additions. I have also simplified the way the weather is displayed, so that you do not need to add a separate <div> to your template to contain all of the weather aspects.

ALSO, if you look at the way the arrays are now set, the random elements are taken from the arrays length, so you can add extra elements to the rain or wind etc. without the need to update the code to take account of the added array indices.

Also[2], try to name your variables in such a way that you will recognise them.. It will save you a lot of hair pulling in the future.

Weather Plugin version 2

Side note, turns out, you ARE right with the numbers and my response was based on the output given *face palm* ; which in this case, is now proper.

Todge Honestly, I envy your approach. I need to get better in JS to get to your coding level. In any case, I really appreciate your help. <3 Now, with this, I need to expand to the other weathers, mwhahaha!:


// 3

var bkn = ["Mostly Cloudy", "Mostly Cloudy with Haze", "Mostly Cloud and Breezy"];

                   

// 6

var skc = ["Fair", "Clear", "Fair with Haze", "Clear with Haze", "Fair and Breezy",

          "Clear and Breezy"];

                   

// 3

var few = ["A Few Clouds", "A Few Clouds with Haze", "A Few Clouds and Breezy"];

                   

// 3

var sct = ["Partly Cloudy", "Partly Cloudy with Haze", "Partly Cloudy and Breezy"];

                   

// 3

var ovc = ["Overcast", "Overcast with Haze", "Overcast and Breezy"];

                   

// 13

var fg = ["Mist", "Fog", "Freezing Fog", "Shallow Fog", "Partial Fog", "Patches of Fog",

         "Fog in Vicinity", "Freezing Fog in Vicinity", "Partial Fog in Vicinity",

         "Patches of Fog in Vicinity", "Showers in Vicinity Fog", "Light Freezing Fog",

         "Heavy Freezing Fog"];

                   

// 1

var smoke = ["Smoke"];

                   

// 7

var fzra = ["Freezing Rain", "Freezing Drizzle", "Light Freezing Rain", "Light Freezing Drizzle",

           "Heavy Freezing Drizzle", "Freezing Rain in Vicinity", "Freezing Drizzle in Vicinity"];

                   

// 16

var ip = ["Ice Pellets", "Light Ice Pellets", "Heavy Ice Pellets", "Ice Pellets in Vicinity",

         "Drizzling Ice Pellets", "Thunderstorm Ice Pellets", "Ice Crystals", "Hail", "Small Hail",

         "Snow Pellets", "Light Small Hail", "Light Snow Pellets", "Heavy Small Hail", "Heavy Snow Pellets",

                              "Drizzling Hail", "Hail Showers"];

                   

// 12

var mix = ["Freezing Rain Snow", "Light Freezing Rain Snow", "Heavy Freezing Rain Snow",

          "Freezing Drizzle Snow", "Light Freezing Drizzle Snow", "Heavy Freezing Drizzle Snow",

          "Snow Freezing Rain", "Light Snow Freezing Rain", "Heavy Snow Freezing Rain",

          "Snow Freezing Drizzle", "Light Snow Freezing Drizzle", "Heavy Snow Freezing Drizzle"];

                   

// 12

var raip = ["Raining Ice Pellets", "Light Rain Ice Pellets", "Heavy Rain Ice Pellets", "Drizzle Ice Pellets",

           "Light Drizzle Ice Pellets", "Heavy Drizzle Ice Pellets", "Ice Pellets Rain", "Light Ice Pellets Rain",

           "Heavy Ice Pellets Rain", "Ice Pellets Drizzle", "Light Ice Pellets Drizzle", "Heavy Ice Pellets Drizzle"];

                   

// 12

var rasn = ["Rain Snow", "Light Rain Snow", "Heavy Rain Snow", "Snow Rain", "Light Snow Rain", "Heavy Snow Rain",

           "Drizzle Snow", "Light Drizzle Snow", "Heavy Drizzle Snow", "Snow Drizzle", "Light Snow Drizzle",
           "Heavy Drizzle Snow"];

                   

// 21

var shra = ["Rain Showers", "Light Rain Showers", "Light Rain and Breezy", "Heavy Rain Showers",
           "Rain Showers in Vicinity",
"Light Rain Showers", "Heavy Rain Showers", "Rain Shower",
           "Rain Shower in Vicinity", "Foggy Rain Showers",
"Misty Rain Showers", "Light Foggy Rain Showers",
           "Light Misty Rain Showers", "Heavy Foggy Rain Showers",
"Heavy Misty Rain Showers",
           "Foggy Rain Showers in Vicinity", "Misty Rain Showers in Vicinity",
"Light Foggy Rain Showers",
           "Light Misty Rain Showers", "Heavy Foggy Rain Showers", "Heavy Misty Rain Showers"];

                   

// 52

var tsra = ["Thunderstorm", "Thunderstorm with Rain", "Light Thunderstorm Rain", "Heavy Thunderstorm with Rain",
           "Thunderstorm with Rain and Fog",
"Thunderstorm with Rain and Mist",
           "Light Thunderstorm with Rain and Fog,", "Light Thunderstorm with Rain and Mist",
           "Heavy Thunderstorm with Rain and Fog",
"Heavy Thunderstorm with Rain and Wind",
           "Heavy Thunderstorm with Rain and Mist", "Thunderstorm with Showers in Vicinity",
           "Light Thunderstorm with Rain and Haze",
"Heavy Thunderstorm with Rain and Haze", "Thunderstorm with Fog",
           "Thunderstorm with Light Rain", "Thunderstorm with Heavy Rain", "Thunderstorm with Light Rain and Fog",

           "Thunderstorm with Light Rain and Mist", "Thunderstorm with Heavy Rain and Fog",
           "Thunderstorm with Heavy Rain and Mist", "Thunderstorm in Vicinity with Fog",

           "Thunderstorm in Vicinity with Mist", "Thunderstorm with Showers in Vicinity",
           "Thunderstorm in Vicinity with Haze", "Thunderstorm with Light Rain and Haze",

           "Thunderstorm with Heavy Rain and Haze", "Thunderstorm with Fog", "Thunderstorm and Hail",
           "Light Thunderstorm with Rain and Hail", "Heavy Thunderstorm with Rain and Hail",

           "Thunderstorm with Rain, Hail, and Fog", "Thunderstorm with Rain, Hail, and Mist",
           "Light Thunderstorm with Rain, Hail, and Fog", "Light Thunderstorm with Rain, Hail, and Mist",

           "Heavy Thunderstorm with Rain, Hail, and Fog", "Heavy Thunderstorm with Rain, Hail, and Mist",
           "Thunderstorm with Showers in Vicinity and Hail", "Light Thunderstorm with Rain, Hail, and Haze",

           "Thunderstorm with Hail and Fog", "Thunderstorm in Vicinity and Hail",
           "Thunderstorm in Vicinity with Hail and Haze", "Thunderstorm with Haze in Vicinity and Hail",  

           "Thunderstorm with Small Hail", "Thunderstorm with Snow Pellets", "Thunderstorm with Rain and Small Hail",
           "Thunderstorm with Rain and Snow Pellets", "Light Thunderstorm with Rain and Small Hail",

           "Light Thunderstorm with Rain and Snow Pellets", "Heavy Thunderstorm with Rain and Small Hail",
           "Heavy Thunderstorm with Rain and Snow Pellets"];

                   

// 44

var sn = ["Snow", "Light Snow", "Heavy Snow", "Snow with Showers", "Light Snow with Showers", "Heavy Snow with Showers",
         "Snow with Fog", "Snow with Mist", "Light Snow with Fog", "Light Snow with Mist",  
"Heavy Snow with Fog",
         "Heavy Snow with Mist", "Snow with Showers and Fog", "Snow with Showers and Mist",
         "Light Snow with Showers and Fog", "Light Snow with Showers and Mist", "Heavy Snow with Showers and Fog",

         "Heavy Snow with Showers and Mist", "Snow and Fog", "Light Snow and Fog", "Heavy Snow with Fog",
         "Snow with Showers and Fog", "Snow with Showers and Fog", "Light Showers with Snow and Fog",
         "Heavy Showers with Snow and Fog",
"Showers in Vicinity with Snow", "Snow with Showers in Vicinity and Fog",
         "Snow with Showers in Vicinity and Mist", "Low Drifting Snow", "Blowing Snow", "Light Snow with Low Drifting",
         "Heavy Snow with Low Drifting",
"Blowing Light Snow", "Blowing Heavy Snow", "Blowing Light Snow with Fog",
         "Blowing Light Snow with Mist", "Heavy Snow with Low Drifting", "Thunderstorm with Snow",
         "Light Thunderstorm with Snow", "Heavy Thunderstorm with Snow",
"Snow Grains", "Light Snow Grains",
         "Heavy Snow Grains", "Blowing Snow in Vicinity"];

                   

// 7

var wind = ["Windy", "Breezy", "Fair and Windy", "A Few Clouds and Windy", "Partly Cloudy and Windy",
           "Mostly Cloudy and Windy", "Overcast and Windy"];

                   

// 4

var nsvrtsra = ["Funnel Cloud", "Funnel Cloud in Vicinity", "Tornado", "Water Spout"];



// 17

var dust = ["Dust", "Low Drifting Dust", "Blowing Dust", "Sand", "Blowing Sand", "Low Drifting Sand", "Dust Whirls",
           "Sand Whirls", "Dust Whirls in Vicinity", "Sand Whirls in Vicinity", "Dust Storm", "Heavy Dust Storm",

           "Dust Storm in Vicinity", "Sand Storm", "Heavy Sand Storm", "Sand Storm in Vicinity"];

                   

// 1

var haze = ["Haze"];
Time to finish this sucker right after finals! Wish me luck! I am going to need it, Programming Languages and Operating Systems is no joke. 

[Todge]

You are most welcome, and good luck.

[Xesna]

Apr 30, 2019 12:37:19 GMT -8 Todge said:

You are most welcome, and good luck.

Thanks. 

[Xesna]

function run_weather()
{
   // Get date according to PD Date...
   var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   var today = months[new Date(pb.data('serverDate')).getMonth()];
   today += new Date(pb.data('serverDate')).getDate();  

   // Set Weather Arrays..
   var bkn = ["Mostly Cloudy", "Mostly Cloudy with Haze", "Mostly Cloud and Breezy"];                  

   var skc = ["Fair", "Clear", "Fair with Haze", "Clear with Haze", "Fair and Breezy", "Clear and Breezy"];                

   var few = ["A Few Clouds", "A Few Clouds with Haze", "A Few Clouds and Breezy"];                  

   var sct = ["Partly Cloudy", "Partly Cloudy with Haze", "Partly Cloudy and Breezy"];                  

   var ovc = ["Overcast", "Overcast with Haze", "Overcast and Breezy"];

   var fg = ["Mist", "Fog", "Freezing Fog", "Shallow Fog", "Partial Fog", "Patches of Fog", "Fog in Vicinity", "Freezing Fog in Vicinity", "Partial Fog in Vicinity",

             "Patches of Fog in Vicinity", "Showers in Vicinity Fog", "Light Freezing Fog", "Heavy Freezing Fog"];  

   var smoke = ["Smoke"];                  

   var fzra = ["Freezing Rain", "Freezing Drizzle", "Light Freezing Rain", "Light Freezing Drizzle", "Heavy Freezing Drizzle", "Freezing Rain in Vicinity", "Freezing Drizzle in Vicinity"];

   var ip = ["Ice Pellets", "Light Ice Pellets", "Heavy Ice Pellets", "Ice Pellets in Vicinity", "Drizziling Ice Pellets", "Thunderstorm Ice Pellets", "Ice Crystals", "Hail", "Small Hail",

             "Snow Pellets", "Light Small Hail", "Light Snow Pellets", "Heavy Small Hail", "Heavy Snow Pellets", "Drizziling Hail", "Hail Showers"];

   var mix = ["Freezing Rain Snow", "Light Freezing Rain Snow", "Heavy Freezing Rain Snow", "Freezing Drizzle Snow", "Light Freezing Drizzle Snow", "Heavy Freezing Drizzle Snow",

              "Snow Freezing Rain", "Light Snow Freezing Rain", "Heavy Snow Freezing Rain", "Snow Freezing Drizzle", "Light Snow Freezing Drizzle", "Heavy Snow Freezing Drizzle"];

   var raip = ["Raining Ice Pellets", "Light Rain Ice Pellets", "Heavy Rain Ice Pellets", "Drizzle Ice Pellets", "Light Drizzle Ice Pellets", "Heavy Drizzle Ice Pellets", "Ice Pellets Rain",

               "Light Ice Pellets Rain", "Heavy Ice Pellets Rain", "Ice Pellets Drizzle", "Light Ice Pellets Drizzle", "Heavy Ice Pellets Drizzle"];

   var rasn = ["Rain Snow", "Light Rain Snow", "Heavy Rain Snow", "Snow Rain", "Light Snow Rain", "Heavy Snow Rain", "Drizzle Snow", "Light Drizzle Snow", "Heavy Drizzle Snow",

               "Snow Drizzle", "Light Snow Drizzle", "Heavy Drizzle Snow"];

   var shra = ["Rain Showers", "Light Rain Showers", "Light Rain and Breezy", "Heavy Rain Showers", "Rain Showers in Vicinity", "Light Rain Showers", "Heavy Rain Showers", "Rain Shower",

               "Rain Shower in Vicinity", "Foggy Rain Showers", "Misty Rain Showers", "Light Foggy Rain Showers", "Light Misty Rain Showers", "Heavy Foggy Rain Showers", "Heavy Misty Rain Showers",

               "Foggy Rain Showers in Vicinity", "Misty Rain Showers in Vicinity", "Light Foggy Rain Showers", "Light Misty Rain Showers", "Heavy Foggy Rain Showers", "Heavy Misty Rain Showers"];

   var tsra = ["Thunderstorm", "Thunderstorm with Rain", "Light Thunderstorm Rain", "Heavy Thunderstorm with Rain", "Thunderstorm with Rain and Fog", "Thunderstorm with Rain and Mist",

               "Light Thunderstorm with Rain and Fog,", "Light Thunderstorm with Rain and Mist", "Heavy Thunderstorm with Rain and Fog",

               "Heavy Thunderstorm with Rain and Wind", "Heavy Thunderstorm with Rain and Mist", "Thunderstorm with Showers in Vicinity", "Light Thunderstorm with Rain and Haze",

               "Heavy Thunderstorm with Rain and Haze", "Thunderstorm with Fog", "Thunderstorm with Light Rain", "Thunderstorm with Heavy Rain", "Thunderstorm with Light Rain and Fog",

               "Thunderstorm with Light Rain and Mist", "Thunderstorm with Heavy Rain and Fog", "Thunderstorm with Heavy Rain and Mist", "Thunderstorm in Vicinity with Fog",

               "Thunderstorm in Vicinity with Mist", "Thunderstorm with Showers in Vicinity", "Thunderstorm in Vicinity with Haze", "Thunderstorm with Light Rain and Haze",

               "Thunderstorm with Heavy Rain and Haze", "Thunderstorm with Fog", "Thunderstorm and Hail", "Light Thunderstorm with Rain and Hail", "Heavy Thunderstorm with Rain and Hail",

               "Thunderstorm with Rain, Hail, and Fog", "Thunderstorm with Rain, Hail, and Mist", "Light Thunderstorm with Rain, Hail, and Fog", "Light Thunderstorm with Rain, Hail, and Mist",

               "Heavy Thunderstorm with Rain, Hail, and Fog", "Heavy Thunderstorm with Rain, Hail, and Mist", "Thunderstorm with Showers in Vicinity and Hail", "Light Thunderstorm with Rain, Hail, and Haze",

               "Thunderstorm with Hail and Fog", "Thunderstorm in Vicinity and Hail", "Thunderstorm in Vicinity with Hail and Haze", "Thunderstorm with Haze in Vicinity and Hail",  

               "Thunderstorm with Small Hail", "Thunderstorm with Snow Pellets", "Thunderstorm with Rain and Small Hail", "Thunderstorm with Rain and Snow Pellets", "Light Thunderstorm with Rain and Small Hail",

               "Light Thunderstorm with Rain and Snow Pellets", "Heavy Thunderstorm with Rain and Small Hail", "Heavy Thunderstorm with Rain and Snow Pellets"];                  

   var sn = ["Snow", "Light Snow", "Heavy Snow", "Snow with Showers", "Light Snow with Showers", "Heavy Snow with Showers", "Snow with Fog", "Snow with Mist", "Light Snow with Fog", "Light Snow with Mist",  

             "Heavy Snow with Fog", "Heavy Snow with Mist", "Snow with Showers and Fog", "Snow with Showers and Mist", "Light Snow with Showers and Fog", "Light Snow with Showers and Mist",

             "Heavy Snow with Showers and Fog", "Heavy Snow with Showers and Mist", "Snow and Fog", "Light Snow and Fog", "Heavy Snow with Fog", "Snow with Showers and Fog", "Snow with Showers and Fog",

             "Light Showers with Snow and Fog", "Heavy Showers with Snow and Fog", "Showers in Vicinity with Snow", "Snow with Showers in Vicinity and Fog", "Snow with Showers in Vicinity and Mist",

             "Low Drifting Snow", "Blowing Snow", "Light Snow with Low Drifting", "Heavy Snow with Low Drifting", "Blowing Light Snow", "Blowing Heavy Snow", "Blowing Light Snow with Fog",

             "Blowing Light Snow with Mist", "Heavy Snow with Low Drifting", "Thunderstorm with Snow", "Light Thunderstorm with Snow", "Heavy Thunderstorm with Snow", "Snow Grains", "Light Snow Grains",

             "Heavy Snow Grains", "Blowing Snow in Vicinity"];

   var wind = ["Windy", "Breezy", "Fair and Windy", "A Few Clouds and Windy", "Partly Cloudy and Windy", "Mostly Cloudy and Windy", "Overcast and Windy"];

   var nsvrtsra = ["Funnel Cloud", "Funnel Cloud in Vicinity", "Tornado", "Water Spout"];

   var dust = ["Dust", "Low Drifting Dust", "Blowing Dust", "Sand", "Blowing Sand", "Low Drifting Sand", "Dust Whirls", "Sand Whirls", "Dust Whirls in Vicinity", "Sand Whirls in Vicinity",

               "Dust Storm", "Heavy Dust Storm", "Dust Storm in Vicinity", "Sand Storm", "Heavy Sand Storm", "Sand Storm in Vicinity"];

   var haze = ["Haze"];

   // Cardinal Direction...
   var direction = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];

   // Set Rain Type for Percentage...
   var rainType = ["Drizzle", "Isolated", "Scattered", "Numerous"];
   var rainTemp;

   // Randomize Weather...
   var state = ["bkn", "skc", "few", "sct", "ovc", "fg", "smoke", "fzra", "ip", "mix",
                "raip", "rasn", "shra", "tsra", "sn", "wind", "nsvrtsra", "dust", "haze"];

   // If key has not been set, or day has changed, choose an array item and set key, otherwise display weather...
   if(pb.plugin.key('Weather').get() == undefined || pb.plugin.key('Weather').get()[0] != today)
   {
       // Set temperature...
    var temperature = (Math.floor((Math.random() * 87) + 1)).toString();    

    // Grab random index for state of weather...
    //var index = Math.floor((Math.random() * (state.length - 1)) + 1);

    // Get string from state and store it.
    //var stateString = state[index];      

       // Grab random index for the state
       var weatherArr = Math.floor((Math.random() * (wind.length - 1)) + 1);    

       // Set cardinal direction...
       var windDirection = Math.floor((Math.random() * (direction.length - 1)) + 1);    

       // Set Wind Velocity...
    var windVelocity = Math.floor((Math.random() * 52) + 1).toString();    

       // Rain Chance...
       var rainChance = Math.floor((Math.random() * 100) + 1).toString();  

       if(rainChance < 20)
          rainTemp = 0;
       else if(rainChance >= 20 && rainChance <= 29)
          rainTemp = 1;
       else if(rainChance >= 30 && rainChance <= 50)
          rainTemp = 2;
       else(rainChance > 50)
          rainTemp = 3;    

       set_weather_key(today, temperature, weatherArr, windDirection, windVelocity, rainTemp, rainChance);
   }
   else
   {
       // Get weather array for easy access...
       var weather = pb.plugin.key('Weather').get();

       var tempToday = $('<div></div>').html('<b>Temperature</b>: ' + weather[1] + '°C<br><br>');
       var climate = $('<div></div>').html('<b>Weather</b>: ' + wind[weather[2]] + '<br><br>');
       var windy = $('<div></div>').html('<b>Wind</b>: ' + direction[weather[3]] + ' ' + weather[4] + 'km/h<br><br>');
       var rainy = $('<div></div>').html('<b>Rain</b>: ' + rainType[weather[5]] + ' ' + weather[6] + '% chance');

       $('#weather_result').append(tempToday, climate, windy, rainy);
   }

   return;
}


function set_weather_key(day, temp, weatherArr, windDir, windVel, rainTemp, rainChance)
{
   // Create weather array for key...
   var key_data = new Array(day, temp, weatherArr, windDir, windVel, rainTemp, rainChance);

   // Alert member that weather needs updating...
   $('#weather_result').html('<b>Weather is out of date.<br><br>Please click here to update</b>').css('cursor','pointer');

   // Add click event, set key and display weather...
   $('#weather_result').click(function(){
       pb.plugin.key('Weather').set({ value: key_data });

       $(this).off('click').css('cursor','').html('');

       run_weather();
   });

   return;
}



$(document).ready(function(){
   if(pb.data('user').is_logged_in == 1)

   {
       run_weather();
   }
});

---

Okay, I tried doing an array of string: 


   // Randomize Weather...
   var state = ["bkn", "skc", "few", "sct", "ovc", "fg", "smoke", "fzra", "ip", "mix",
                "raip", "rasn", "shra", "tsra", "sn", "wind", "nsvrtsra", "dust", "haze"];

To get the index of that array:


    // Grab random index for state of weather...
    var index = Math.floor((Math.random() * (state.length - 1)) + 1);


    // Get string from state and store it.
    var stateString = state[index];


       // Grab random index for the state
       var weatherArr = Math.floor((Math.random() * (stateString.length - 1)) + 1);

To get the length of the array associated to the weather, but I know when I do that I just get a single character rather than the actual literal array, why is that? 


       // Grab random index for the state
       var weatherArr = Math.floor((Math.random() * (wind.length - 1)) + 1);
EDIT: Shouldn't it have worked given it is an array name? Or is it due to the fact it is a string and not a var tied to the array itself? If so, how can I have an array take in arrays themselves? I am assuming it is the use of keys again, right? Ugh. The struggle when learning a new programming language. 

[Todge]

May 13, 2019 13:30:43 GMT -8 Xesna said:

Okay, I tried doing an array of string: 


 // Randomize Weather...
var state = ["bkn", "skc", "few", "sct", "ovc", "fg", "smoke", "fzra", "ip", "mix",
"raip", "rasn", "shra", "tsra", "sn", "wind", "nsvrtsra", "dust", "haze"];

To get the index of that array:


 // Grab random index for state of weather...
var index = Math.floor((Math.random() * (state.length - 1)) + 1);


Correct...

 // Get string from state and store it.
var stateString = state[index];


Now, this will create a string variable containing the contents of the state array index you chose previously..

Which is why...

// Grab random index for the state
var weatherArr = Math.floor((Math.random() * (stateString.length - 1)) + 1);


Will only give you a single, randomly picked character..

I'm not sure what you are trying to achieve, but, if you want to create an array, and add to that array, you can do this....

// Create an empty array...
var statestring = new Array();

// Add state to statestring array...
statestring.push(state[index]);


Just to confuse you, you can add to an array using it's length too, as the length will count from 1 and the array indices will start from 0, .length will always give you the last unused index of an array, so instead of the push method I chose above, you can also use..
statestring[statestring.length] = state[index];

If this is not what you are trying to do, let me know and I'll try to help in a more constructive way.

[Xesna]

May 14, 2019 16:14:45 GMT -8 Todge said:

If this is not what you are trying to do, let me know and I'll try to help in a more constructive way.

To put it simply:

// Grab random index associated to the weather
var weatherArr = Math.floor((Math.random() * (wind.length - 1)) + 1);
In our case, it would be the wind array containing:

var wind = ["Windy", "Breezy", "Fair and Windy", "A Few Clouds and Windy",
"Partly Cloudy and Windy", "Mostly Cloudy and Windy", "Overcast and Windy"];
Right? But I also have other arrays named: bkn, skc, few, sct, ovc, fg, smoke, fzra, ip, mix,
raip, rasn, shra, tsra, sn, wind, nsvrtsra, dust, and haze. Which is why I wanted to store these variables names inside an array and I figured storing strings won't do, so I tried doing an array within an array:

// Randomize Weather...

var state = [bkn, skc, few, sct, ovc, fg, smoke, fzra, ip, mix, raip, rasn, shra, tsra, sn, wind, nsvrtsra, dust, haze];
...what do you know the hypothetical worked!

// Randomize Weather...
var state = [bkn, skc, few, sct, ovc, fg, smoke, fzra, ip, mix, raip, rasn, shra, tsra, sn, wind, nsvrtsra, dust, haze];

// If key has not been set, or day has changed, choose an array item and set key, otherwise display weather...
if(pb.plugin.key('Weather').get() == undefined || pb.plugin.key('Weather').get()[0] != today)
{
 // Set temperature...
 var temperature = (Math.floor((Math.random() * 87) + 1)).toString();

 // Grab random index for state of weather...

 var index = Math.floor((Math.random() * (state.length - 1)) + 1);

 // Grab random index for the state
 var weatherArr = Math.floor((Math.random() * (state[index].length - 1)) + 1);

 ...
 ...
 ...
 set_weather_key(today, temperature, weatherIndex, windDirection, windVelocity, rainTemp, rainChance);
}
What you suggested is basically the approach. Now, the only issue is when in the else statement:

else
   {
       // Get weather array for easy access...
       var weather = pb.plugin.key('Weather').get();

       var tempToday = $('<div></div>').html('<b>Temperature</b>: ' + weather[1] + '°C<br><br>');

       var climate = $('<div></div>').html('<b>Weather</b>: ' + state[weather[2]] + '<br><br>');

       var windy = $('<div></div>').html('<b>Wind</b>: ' + direction[weather[3]] + ' ' + weather[4] + 'km/h<br><br>');

       var rainy = $('<div></div>').html('<b>Rain</b>: ' + rainType[weather[5]] + ' ' + weather[6] + '% chance');

       $('#weather_result').append(tempToday, climate, windy, rainy);
   }
On line: var climate = $('<div></div>').html('<b>Weather</b>: ' + state[weather[2]] + '<br><br>');

Rather than getting one single string, I get the entire string inside the array, as shown below:

If I do: state[X][weather[2]], where X is any value from 0 ~ 18 or the state.length, it will give me a single string.

However, it is not proper given the state is not bkn (blanket) but rather skc (sky clear) as seen above, which I know it is state[weather[2]][X] instead. But X has to be the state.length to get the proper string... hm?

I tried this: var climate = $('<div></div>').html('<b>Weather</b>: ' + state[weather[2]][weather[2]] + '<br><br>'); 

Since we know the state is skc, which is indicated by state[weather[2]], we just needed to associate the index it generated for the string. Hm? Adding weather[2] wouldn't work. Maybe passing in the index inside set_weather_key(): 

set_weather_key(today, temperature, weatherIndex, windDirection, windVelocity, rainTemp, rainChance, index);
Would fix it by doing: var climate = $('<div></div>').html('<b>Weather</b>: ' + state[weather[7]][weather[2]] + '<br><br>'); instead. Given the state holds a list of variables names associated to their respective array containing strings.

So, in theory, weather[7] would be a number generated based on the length from 0 ~ 18, so by saying state[weather[7]], which we should get the index inside that array being skc, and as before: skc[1] or skc[weather[2]] is 'Clear' for our weather. At the moment, it is unfortunately returning an undefined, for weather[7].

Which is odd given, it should just hold a number since when I put the var index outside the if statement:

// Randomize Weather...
var state = [bkn, skc, few, sct, ovc, fg, smoke, fzra, ip, mix, raip, rasn, shra, tsra, sn, wind, nsvrtsra, dust, haze];

// Grab random index for state of weather...
var index = Math.floor((Math.random() * (state.length - 1)) + 1);

// If key has not been set, or day has changed, choose an array item and set key, otherwise display weather...
if(pb.plugin.key('Weather').get() == undefined || pb.plugin.key('Weather').get()[0] != today)
{
 // Set temperature...
 var temperature = (Math.floor((Math.random() * 87) + 1)).toString();

 ...
 ...
 ...
}
I get values for it and calling it as such: var climate = $('<div></div>').html('<b>Weather</b>: ' + index + ' ' + weather[2] + '<br><br>');

EDIT: Of course, the values are randomly generated, but for our sake, it is merely to test to see if it is getting anything, which we are, but by placing it inside, we're are just getting undefined which is not true. Though, I believe this is the case due to the IF/ELSE statement we have implemented, so I might have to wait until the 24hrs have passed to test my hypothetical approach of: var climate = $('<div></div>').html('<b>Weather</b>: ' + state[weather[7]][weather[2]] + '<br><br>');

For now, I am just going to test the key of weather[7] if I have a value or not tomorrow, for if I do, then progress in the right direction, hopefully it is a number so I can proceed.

• The image to the top left (or far left/left) is the weather[7] key with the index being passed inside the method/function/define/etc. of set_weather_key() and resulting in undefined and weather[2] being 1.
  
  
• The image in the top right (or center/middle) is using the index and calling it outside the IF/ELSE statement, which will continuously change values due to such, the index being 7 and weather[2] being 1.
  
  
• The image in the bottom (or far right/right) is using state[index][weather[2]], however, the index is also outside or otherwise there wouldn't be an association. The output of weather being: Light Ice Pellets.

**Note: Depending on perspective, the images will be positioned differently on resolution, and thus when reading the listed sentences, find the key words in bold. In addition to, these are just visual representations to see what I meant.

ADDED EDIT (TODAY @ 12:23 am of 5/21/2019): It worked. Only issue is the rain chance now.

   // Set Rain Type for Percentage...

   var rainType = ["Drizzle", "Isolated", "Scattered", "Numerous"];        

   // If key has not been set, or day has changed, choose an array item and set key, otherwise display weather...

   if(pb.plugin.key('Weather').get() == undefined || pb.plugin.key('Weather').get()[0] != today)

   {
       ...
       ...
       ...
       ...

       var rainTemp;

       ...
       ...        

       // Rain Chance...

       var rainChance = Math.floor((Math.random() * 100) + 1);

       

       if(rainChance >= 0 && rainChance <= 20)

          rainTemp = rainType[0];

       else if(rainChance > 20 && rainChance <= 29)

          rainTemp = rainType[1];

       else if(rainChance > 29 && rainChance <= 50)

          rainTemp = rainType[2];

       else if(rainChance > 50 && rainChance <= 100)

          rainTemp = rainType[3];

       ...
       ...
   }
The output is, "Rain: Numerous 28% chance" when in fact, the rain chance should be greater than 50 and less than or equal to 100. Or possibly, the string should be Isolated rather than Numerous, whatever the case may be. I do not know why it is giving me the incorrect output.

Additional Note: Respond within the next 24hrs just out of courtesy for the rules. I do not want anyone getting in trouble. <3

[Todge]

May 20, 2019 13:18:41 GMT -8 Xesna said:

 // Set Rain Type for Percentage...

var rainType = ["Drizzle", "Isolated", "Scattered", "Numerous"];

// If key has not been set, or day has changed, choose an array item and set key, otherwise display weather...

if(pb.plugin.key('Weather').get() == undefined || pb.plugin.key('Weather').get()[0] != today)

{
...
...
...
...

var rainTemp;

...
...

// Rain Chance...

var rainChance = Math.floor((Math.random() * 100) + 1);



if(rainChance >= 0 && rainChance <= 20)

rainTemp = rainType[0];

else if(rainChance > 20 && rainChance <= 29)

rainTemp = rainType[1];

else if(rainChance > 29 && rainChance <= 50)

rainTemp = rainType[2];

else if(rainChance > 50 && rainChance <= 100)

rainTemp = rainType[3];

...
...
 }
The output is, "Rain: Numerous 28% chance" when in fact, the rain chance should be greater than 50 and less than or equal to 100. Or possibly, the string should be Isolated rather than Numerous, whatever the case may be. I do not know why it is giving me the incorrect output.

Additional Note: Respond within the next 24hrs just out of courtesy for the rules. I do not want anyone getting in trouble. <3

Hmm.. I would need to see the plugin working to try and find out why you are getting the incorrect values, as from what I can see, it 'should' all be good assuming the correct values are being written to the key.

But, as far as your else/if statement is concerned, I would say this....

// Rain Chance...

var rainChance = Math.floor((Math.random() * 100) + 1);

All good...

if(rainChance >= 0 && rainChance <= 20)

rainTemp = rainType[0];

rainChance will always be more than or equal to 0, so the red is not needed..

else if(rainChance > 20 && rainChance <= 29)

rainTemp = rainType[1];

because this is an 'else if' statement, for this to be triggered ranChance will have to be more than 20 according to the previous if statement, so again, the red is not needed..

else if(rainChance > 29 && rainChance <= 50)

rainTemp = rainType[2];

same here with the more than 29 query...

else if(rainChance > 50 && rainChance <= 100)

rainTemp = rainType[3];

because this is the last of the else/if statements, it should only be else, as this will be triggererd if all previous queries failed, so you can lose the entire if part of the query..

Personally, I would not use less than or equal to either, you are asking 2 questions when, as we are dealing with integers, only one is needed... In this case, <=20 is the same as <21, but that is up to you..

so, the else/if part of your code can be reduced to..

if(rainChance < 21)

rainTemp = rainType[0];

else if(rainChance < 30)

rainTemp = rainType[1];

else if(rainChance < 51)

rainTemp = rainType[2];

else

rainTemp = rainType[3];

[Xesna]

May 25, 2019 16:24:32 GMT -8 Todge said:

Hmm.. I would need to see the plugin working to try and find out why you are getting the incorrect values, as from what I can see, it 'should' all be good assuming the correct values are being written to the key.

But, as far as your else/if statement is concerned, I would say this....

// Rain Chance...

var rainChance = Math.floor((Math.random() * 100) + 1);

All good...

if(rainChance >= 0 && rainChance <= 20)

rainTemp = rainType[0];

rainChance will always be more than or equal to 0, so the red is not needed..

else if(rainChance > 20 && rainChance <= 29)

rainTemp = rainType[1];

because this is an 'else if' statement, for this to be triggered ranChance will have to be more than 20 according to the previous if statement, so again, the red is not needed..

else if(rainChance > 29 && rainChance <= 50)

rainTemp = rainType[2];

same here with the more than 29 query...

else if(rainChance > 50 && rainChance <= 100)

rainTemp = rainType[3];

because this is the last of the else/if statements, it should only be else, as this will be triggererd if all previous queries failed, so you can lose the entire if part of the query..

Personally, I would not use less than or equal to either, you are asking 2 questions when, as we are dealing with integers, only one is needed... In this case, <=20 is the same as <21, but that is up to you..

so, the else/if part of your code can be reduced to..

if(rainChance < 21)

rainTemp = rainType[0];

else if(rainChance < 30)

rainTemp = rainType[1];

else if(rainChance < 51)

rainTemp = rainType[2];

else

rainTemp = rainType[3];

Indeed. Given I am doing a random generator, I won't be expecting negative values, okay. Sorry. I've been coding for so long in school, doing every possible test case has been drilled inherently without my knowledge. I will test to see if the value is fixed through another user since apparently every user gets different values.

EDIT: Of course, I am not sure if this was what is was doing previously where to user had different weather conditions, but the case is apparent few days back when I tried testing the weather array values. And I haven't messed with the code much expect the weather. In any case, that is another matter we will discuss in a later date.