Weather Generator to retain value in LocalStorage

[Xesna]

You can easily follow the code since majority of it is just list of arrays containing a list of strings to certain weather conditions and whether each one met the precipitation/humidity requirement to do that condition with the following cold or hot temperature.


<div class="fade">
   <a href="http://nindao.proboards.com/board/13/meteor-country">
       <div align="center">
        <div style="float:center;
                   width: 225px;
                   height: 40px;
                   background-image: url(https://i.ibb.co/khnn59V/Size.jpg);
                   background-position: center;
                   -moz-border-radius: 100px;
                   -webkit-border-radius: 100px;
                   -o-border-radius: 100px;
                   border-radius: 100px;
                   border: 2px solid #444444;">
        </div>
       </div>
   </a>
   <div align="center">
       <div style="font: 25pt Garamond; float:center;"> <i>Kakougakure</i><br>
    <div style="font: 10pt Garamond; line-height: 100%; letter-spacing: 1px;">
               <i><p id = "temperature_result"></p><br/>
               <p id ="weather_result"></p><br/>
               <p id = "windspd_result"></p><br/>
               <p id = "chance_result"></p><br/></i>
           </div>
               <script type="text/javascript">
                   
                   var t = (Math.floor((Math.random() * 87) + 1)).toString();
                   
                   var weather;
                   
                   // 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",
                              "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"];
                   
                   // 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"];
                   
                   // Wind Velocity
                   var win_number = Math.floor((Math.random() * 52) + 1).toString();
                   
                   // Rain Chance
                   var rain_number = Math.floor((Math.random() * 100) + 1).toString();
                   
                   // Cardinal Direction
                   var i = Math.floor((Math.random() * 8) + 1);
                   var direction = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
                   
                   var per;
                   var percent = ["Drizzle", "Isolated", "Scattered", "Numerous"];
                   
                   // Drizzle of Superarid to Perarid
                   if(rain_number < 20)
                   {
                       per = percent[0];
                       
                       // Tundra to Tropical
                       if(t >= 33)
                       {
                           var hotArray = Math.floor((Math.random() * 6) + 1);
                           
                           if(hotArray == 1)
                           {
                               var bknArray = Math.floor((Math.random() * 3) + 1);
                               
                        weather = bkn[bknArray];
                           }
                           else if(hotArray == 2)
                           {
                               var skcArray = Math.floor((Math.random() * 6) + 1);
                               
                        weather = skc[skcArray];
                           }
                           else if(hotArray == 3)
                           {
                               var fewArray = Math.floor((Math.random() * 3) + 1);
                               
                        weather = few[fewArray];
                           }
                           else if(hotArray == 4)
                           {
                               var sctArray = Math.floor((Math.random() * 3) + 1);
                               
                               weather = sct[sctArray];
                           }
                           else if(hotArray == 5)
                           {
                               var ovcArray = Math.floor((Math.random() * 3) + 1);
                               
                               weather = ovc[ovcArray];
                           }
                           else
                           {
                            var windArray = Math.floor((Math.random() * 7) + 1);
                               
                               weather = wind[windArray];
                           }
                       }
                       // Tundra to Arctic
                       else
                       {
                           var snArray = Math.floor((Math.random() * 44) + 1);
                       
                           weather = sn[snArray];
                       }
                   }
                   // Isolated of Arid to Semi-humid
                   else if(rain_number >= 20 && rain_number <= 29)
                   {
                       per = percent[1];
                       
                       // Confierous to Tropical
                       if(t >= 38)
                       {
                           var hotArray = Math.floor((Math.random() * 7) + 1);
                           
                           if(hotArray == 1)
                           {
                               var bknArray = Math.floor((Math.random() * 3) + 1);
                               
                        weather = bkn[bknArray];
                           }
                           else if(hotArray == 2)
                           {
                               var skcArray = Math.floor((Math.random() * 6) + 1);
                               
                        weather = skc[skcArray];
                           }
                           else if(hotArray == 3)
                           {
                               var fewArray = Math.floor((Math.random() * 3) + 1);
                               
                        weather = few[fewArray];
                           }
                           else if(hotArray == 4)
                           {
                               var sctArray = Math.floor((Math.random() * 3) + 1);
                               
                               weather = sct[sctArray];
                           }
                           else if(hotArray == 5)
                           {
                               var ovcArray = Math.floor((Math.random() * 3) + 1);
                               
                               weather = ovc[ovcArray];
                           }
                           else if(hotArray == 6)
                           {
                            var windArray = Math.floor((Math.random() * 7) + 1);
                               
                               weather = wind[windArray];
                           }
                           else
                           {
                               var fgArray = Math.floor((Math.random() * 13) + 1);
                               
                               weather = fg[fgArray];
                           }
                       }
                       // Taiga to Arctic
                       else
                       {
                           var snArray = Math.floor((Math.random() * 44) + 1);
                       
                           weather = sn[snArray];
                       }
                   }
                   // Scattered of Humid to Perhumid
                   else if(rain_number >= 30 && rain_number <= 50)
                   {
                       per = percent[2];
                       
                       // Decidous to Tropical
                       if(t >= 43)
                       {
                           var hotArray = Math.floor((Math.random() * 5) + 1);
                           
                           if(hotArray == 1)
                           {
                               var shraArray = Math.floor((Math.random() * 21) + 1);
                               
                        weather = shra[shraArray];
                           }
                           else if(hotArray == 2)
                           {
                               var tsraArray = Math.floor((Math.random() * 52) + 1);
                               
                        weather = tsra[tsraArray];
                           }
                           else if(hotArray == 3)
                           {
                            var windArray = Math.floor((Math.random() * 7) + 1);
                               
                               weather = wind[windArray];
                           }
                           else if(hotArray == 4)
                           {
                               var fgArray = Math.floor((Math.random() * 13) + 1);
                               
                               weather = fg[fgArray];
                           }
                           else
                               weather = haze[0];
                       }
                       // Coniferous to Arctic
                       else
                       {
                           var coldArray = Math.floor((Math.random() * 5) + 1);
                           
                           if(coldArray == 1)
                           {
                               var mixArray = Math.floor((Math.random() * 12) + 1);
                       
                               weather = mix[mixArray];
                           }
                           else if(coldArray == 2)
                           {
                               var rasnArray = Math.floor((Math.random() * 12) + 1);
                       
                               weather = rasn[rasnArray];
                           }
                           else if(coldArray == 3)
                           {
                               var fzraArray = Math.floor((Math.random() * 7) + 1);
                       
                               weather = fzra[fzraArray];
                           }
                           else if(coldArray == 4)
                           {
                               var ipArray = Math.floor((Math.random() * 16) + 1);
                       
                               weather = ip[ipArray];
                           }
                           else
                           {
                               var snArray = Math.floor((Math.random() * 44) + 1);
                       
                               weather = sn[snArray];
                           }
                       }
                   }
                   // Numerous of Superhumid
                   else
                   {
                       per = percent[3];
                   
                       // Mediterranean to Tropical
                       if(t >= 54)
                       {
                          var hotArray = Math.floor((Math.random() * 3) + 1);
                         
                          if(hotArray == 1)
                          {
                              var shraArray = Math.floor((Math.random() * 21) + 1);
                       
                              weather = shra[shraArray];
                          }
                          else if(hotArray == 2)
                          {
                              var tsraArray = Math.floor((Math.random() * 52) + 1);
                       
                              weather = tsra[tsraArray];
                          }
                          else
                          {
                              var windArray = Math.floor((Math.random() * 7) + 1);
                       
                              weather = wind[windArray];  
                          }
                       }
                       // Decidous to Arctic
                       else
                       {
                          var coldArray = Math.floor((Math.random() * 3) + 1);
                           
                          if(coldArray == 1)
                          {
                              var mixArray = Math.floor((Math.random() * 12) + 1);
                       
                              weather = mix[mixArray];
                          }
                          else if(coldArray == 2)
                          {
                              var rasnArray = Math.floor((Math.random() * 12) + 1);
                       
                              weather = rasn[rasnArray];
                          }
                          else
                          {
                              var snArray = Math.floor((Math.random() * 44) + 1);
                       
                              weather = sn[snArray];
                          }
                       }
                   }
                   
                   document.getElementById("temperature_result").innerHTML = t + "°C";

   //localStorage.setItem("weather", weather);
   //document.getElementById("weather_result").innerHTML = localStorage.getItem("weather");
                   
                   document.getElementById("windspd_result").innerHTML = "Windy: " + direction[i] + " " + win_number + " km/h";
                   document.getElementById("chance_result").innerHTML = per + " Chance of Rain: " + rain_number + "%";
                   
                   document.getElementById("temperature_result").style.fontSize = "16px";
                   document.getElementById("weather_result").style.fontSize = "16px";
                   document.getElementById("windspd_result").style.fontSize = "16px";
                   document.getElementById("chance_result").style.fontSize = "16px";
              </script>
       </div>
   </div>
</div>

The area of focus is again, retaining the value without it changing until the site is closed.

//localStorage.setItem("weather", weather);
//document.getElementById("weather_result").innerHTML = localStorage.getItem("weather");

I had it working previously, but after I tried applying the method to temperature, direction, win_number, per, and rain_number; however, it broke the weather from being retained throughout the local storage. I know I used something like typeof(Storage) !== "undefined" for the setItem(), then used the same if with the added localStorage.getItem("result") !== "undefined" for the getItem(). But, again, I wasn't able to recover what I did.

TL;DR: After hours of trying to properly implement, I still can't seem to retain the value of weather after a refresh, switching to a different view, etc.

If anyone can assist me in my plight, I'd be grateful.

FYI: I do not want to use a weather widget, it is useless if you're trying to create your own weather for an fictional world. Plus, the widgets look ugly.

[Xesna]

                   

                   var localStorage;

                   try
                   {
                       var veer = false;

                       if(veer == false)
                       {
                           var wind = ["Windy", "Breezy", "Fair and Windy", "A Few Clouds and Windy",
                                       "Partly Cloudy and Windy", "Mostly Cloudy and Windy", "Overcast and Windy"];

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

                           myWeather = wind[windArray];

                           veer = true;
                       }
                       else
                           localStorage.setItem("cacheWeather", myWeather);

                       document.getElementById("weather_result").innerHTML = localStorage.getItem("cacheWeather");
                   }
                   catch(e)
                   {
  if(isQuotaExceeded(e))
                       {
        // Storage full, maybe notify user or do some clean-up
  }
   }

   function isQuotaExceeded(e)
                   {
  var quotaExceeded = false;

                       if(e)
                       {
       if(e.code)
                           {
      switch(e.code)
                               {
          case 22:
                                  {
                                    quotaExceeded = true;

                                    break;
                                  }
          case 1014:
                                  {
          // Firefox

          if(e.name === 'NS_ERROR_DOM_QUOTA_REACHED')
                                       {
            quotaExceeded = true;
          }

                                      break;
         }
                              }
                           }
                           else if(e.number === -2147024882)
                           {
      // Internet Explorer 8
                               quotaExceeded = true;
                            }
         }
                       return quotaExceeded;
  }


I am now able to retain the value and initialize it once, previously, I had it functioning where the value was being retained but reset every time due to no check for a single initialization. It is fixed for now, but I am going to close my browser, then my tabs and see if it changes the values.

EDIT: Not working. Values still change, so I am trying to implement a Singleton.

[Todge]

You can use document.referrer to check on the previous pages URL, and check it against the current. If they match, then load saved content, if mot, set the saved content.

Something like this...

var locHistory = document.referrer.split('.')[0];
var curLocation = document.location.toString();
if(!curLocation.match(locHistory))
{
   localStorage.setItem("weather", weather);
}
document.getElementById("weather_result").innerHTML = localStorage.getItem("weather");

You should be able to follow it, but if not, yell.

[Xesna]

Mar 2, 2019 16:07:49 GMT -8 Todge said:

You can use document.referrer to check on the previous pages URL, and check it against the current. If they match, then load saved content, if mot, set the saved content.

Something like this...

var locHistory = document.referrer.split('.')[0];
var curLocation = document.location.toString();
if(!curLocation.match(locHistory))
{
   localStorage.setItem("weather", weather);
}
document.getElementById("weather_result").innerHTML = localStorage.getItem("weather");

You should be able to follow it, but if not, yell.

I appreciate it. I'll look at it once I am done coding my assignments.

EDIT: Okay. It does solve an issue somewhat, but the issue is having it to populate the local storage AT LEAST once, but to do that I need to call the: localStorage.setItem("weather", wind[windArray]); outside the if. However, doing that will just reset the value. This was more or less the issue I was trying to get around in the morning to the afternoon. I had it where it populated twice, but on the second call it stored the value and remained constant throughout the forum. I am going to keep toying with it.

EDIT: I got it.


                   var localStorage;

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

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

                       if(localStorage.getItem("weather") === null)
                           localStorage.setItem("weather", wind[windArray]);

                       document.getElementById("weather_result").innerHTML =
                              localStorage.getItem("weather");
                   }
EDIT: Since it is functioning, I am going to see if there is a way to share the value throughout clients, right now it is just displaying to different weather values. On Firefox it will be Breezy and on Google Chrome, it would be Windy. Is there any possible way to do this?

[Todge]

Mar 2, 2019 20:22:15 GMT -8 Xesna said:

Mar 2, 2019 16:07:49 GMT -8 Todge said:

You can use document.referrer to check on the previous pages URL, and check it against the current. If they match, then load saved content, if mot, set the saved content.

Something like this...

var locHistory = document.referrer.split('.')[0];
var curLocation = document.location.toString();
if(!curLocation.match(locHistory))
{
   localStorage.setItem("weather", weather);
}
document.getElementById("weather_result").innerHTML = localStorage.getItem("weather");

You should be able to follow it, but if not, yell.

I appreciate it. I'll look at it once I am done coding my assignments.

EDIT: Okay. It does solve an issue somewhat, but the issue is having it to populate the local storage AT LEAST once, but to do that I need to call the: localStorage.setItem("weather", wind[windArray]); outside the if. However, doing that will just reset the value. This was more or less the issue I was trying to get around in the morning to the afternoon. I had it where it populated twice, but on the second call it stored the value and remained constant throughout the forum. I am going to keep toying with it.

EDIT: I got it.


                   var localStorage;

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

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

                       if(localStorage.getItem("weather") === null)
                           localStorage.setItem("weather", wind[windArray]);

                       document.getElementById("weather_result").innerHTML =
                              localStorage.getItem("weather");
                   }
EDIT: Since it is functioning, I am going to see if there is a way to share the value throughout clients, right now it is just displaying to different weather values. On Firefox it will be Breezy and on Google Chrome, it would be Windy. Is there any possible way to do this?

Not using web storage, no. A plugin super user key would allow the same data to be read no matter what browser you decide to use, but, logging out of one and in with another, the code would assume a new login and change the data anyway. The only way around that that I can see would be to make the change in weather time delayed.

[Xesna]

Mar 3, 2019 8:20:27 GMT -8 Todge said:

Mar 2, 2019 20:22:15 GMT -8 Xesna said:

EDIT: Since it is functioning, I am going to see if there is a way to share the value throughout clients, right now it is just displaying to different weather values. On Firefox it will be Breezy and on Google Chrome, it would be Windy. Is there any possible way to do this?

Not using web storage, no. A plugin super user key would allow the same data to be read no matter what browser you decide to use, but, logging out of one and in with another, the code would assume a new login and change the data anyway. The only way around that that I can see would be to make the change in weather time delayed.

Hm~ I've been wondering that as well to make the value persistent until 24hrs have passed, do you know where I can find the source? Or if you can, show me the code to do so? I will take it from there and see if I am successful. If not, I will come back here if I am stuck.

[Todge]

Mar 5, 2019 12:41:22 GMT -8 Xesna said:

Mar 3, 2019 8:20:27 GMT -8 Todge said:

Not using web storage, no. A plugin super user key would allow the same data to be read no matter what browser you decide to use, but, logging out of one and in with another, the code would assume a new login and change the data anyway. The only way around that that I can see would be to make the change in weather time delayed.

Hm~ I've been wondering that as well to make the value persistent until 24hrs have passed, do you know where I can find the source? Or if you can, show me the code to do so? I will take it from there and see if I am successful. If not, I will come back here if I am stuck.

What do you mean by 'the source'?

The current time, according to the PB server, can be accessed with 'pb.data('serverDate')', you can change that to a coherent date using 'toDateString()'. You will obviuosly need to store the current date in the key for you to compare to, and if 24 hours have passed, refresh it along with the new weather data.

[Xesna]

Mar 5, 2019 13:30:05 GMT -8 Todge said:

Mar 5, 2019 12:41:22 GMT -8 Xesna said:

Hm~ I've been wondering that as well to make the value persistent until 24hrs have passed, do you know where I can find the source? Or if you can, show me the code to do so? I will take it from there and see if I am successful. If not, I will come back here if I am stuck.

What do you mean by 'the source'?

The current time, according to the PB server, can be accessed with 'pb.data('serverDate')', you can change that to a coherent date using 'toDateString()'. You will obviuosly need to store the current date in the key for you to compare to, and if 24 hours have passed, refresh it along with the new weather data.

By source, I mean link or source code or a reference the how-to. Alright, I'll see what I can whip up.

[Xesna]

Bump.



var weather;

var localStorage;            

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

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

   if(localStorage.getItem("weather") === null)
       localStorage.setItem("weather", wind[windArray]);

   document.getElementById("weather_result").innerHTML = localStorage.getItem("weather");

   setInterval(function ()
   {
        var wind = ["Windy", "Breezy", "Fair and Windy", "A Few Clouds and Windy",
                    "Partly Cloudy and Windy", "Mostly Cloudy and Windy", "Overcast and Windy"];

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

        if(localStorage.getItem("weather") !== null || localStorage.getItem("weather") === null)
             localStorage.setItem("weather", wind[windArray]);

        document.getElementById("weather_result").innerHTML = localStorage.getItem("weather");
   }, 86400000);
}
catch(e)
{
   if(isQuotaExceeded(e))
   {
    // Storage full, maybe notify user or do some clean-up
   }
}
function isQuotaExceeded(e)
{
   var quotaExceeded = false;

   if(e)
   {
    if(e.code)
       {
         switch(e.code)
           {
               case 22:
               {
                    quotaExceeded = true;

                    break;
               }
        case 1014:
               {
             // Firefox
             if(e.name === 'NS_ERROR_DOM_QUOTA_REACHED')
                   {
            quotaExceeded = true;
             }
                   
                   break;
      }
           }
    }
       else if(e.number === -2147024882)
       {
         // Internet Explorer 8
         quotaExceeded = true;
    }
   }

   return quotaExceeded;
}

document.getElementById("weather_result").style.fontSize = "16px";
I created the plugin and the setInterval() is working properly, I believe? Now, it saves the data and shares the information across my browsers without changing the values. I created the plugin in as you suggested by doing a forum super key, however, the issue I am now having is syncing the information across multiple PCs.

EDIT: I will change the setInterval() to what you said of pd date, I am testing if the value changes.

[Todge]

So far so good then...

A Super Forum Key will mean that all members will see the same weather at the same time.. If you want the weather to be different for each member, but remain the same across browsers, you need to use a Super User Key.

Using setInterval() will work if you leave the browser open for more than 24 hours, but the count will be reset whenever the page is refreshed.. I see you are trying to use pd.date, hopefully that should work better.

[Xesna]

Mar 9, 2019 11:16:00 GMT -8 Todge said:

So far so good then...

A Super Forum Key will mean that all members will see the same weather at the same time.. If you want the weather to be different for each member, but remain the same across browsers, you need to use a Super User Key.

Using setInterval() will work if you leave the browser open for more than 24 hours, but the count will be reset whenever the page is refreshed.. I see you are trying to use pd.date, hopefully that should work better.

Hm. Okay. I will try to do that today if I can and implement the pd.data.

EDIT: I tried implementing it, but don't know too much nor was I able to find forums, links, sources on how to utilize it properly. I did this however, though I am not sure it is any good and given it doesn't focus on DTS (Daylight Saving Time), I will have to take that into account, maybe.


var day = new Date();

   

var nextDay = new Date(day);



   var wind = ["Windy", "Breezy", "Fair and Windy", "A Few Clouds and Windy",

               "Partly Cloudy and Windy", "Mostly Cloudy and Windy", "Overcast and Windy"];



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

                       

   // If localStorage is null, generate weather first time around. Otherwise, if it has

   // been 24hrs, change the weather.

   if((localStorage.getItem("weather") === null) && (day !== nextDay.setDate(day.getDate()+1)))

       localStorage.setItem("weather", wind[windArray]);

   

   // Otherwise, if weather exists, get weather.

   document.getElementById("weather_result").innerHTML = localStorage.getItem("weather");
EDIT: I still dislike having the weather not being consistent across the browsers unless I use User Super Key, which I might have to consider doing. Though, I do not know if it will cause a conflict with the Forum Super Key. Also, Forum Super Key doesn't keep the same weather value like Fog across multiple devices, so not all members will see the same value.

EDIT UPDATE: Okay. The Forum Super Key doesn't work if you're using other devices or browsers, the values will be changed which is not the desired. If I am on Brave, Fog, stored in the localStorage with the Forum Super Key it should be applicable to a mobile phone on having Fog, which doesn't it will say Breezy. Hm~ I am probably approaching the entire javascript wrong.

Left: Brave and Right: Firefox logged in with the same account.

In addition to, (day !== nextDay.setDate(day.getDate()+1)) isn't doing what I think it should do by checking the nextDate since how I am approaching it: March 10 !== March 11, when it will never be true, even when the next day occurs it will be March 11 !== March 12. I am trying to see if I can it where just gets the time and checks if it passed 24hrs. I am assuming I can do it by using var h = today.getHour(), var m = today.getMinute(), and var s = today.getSeconds(); or something and do an if statement that checks if var time = (h + ":" + m + ":" + s) >= 24, if it is of course in military time.

EDIT RECENT: Well, somehow the javascript Plugin is not reaching the header in the leftsidebar now. Disabling it for now until I get it resolved.

[Todge]

Mar 10, 2019 8:37:17 GMT -8 Xesna said:

Mar 9, 2019 11:16:00 GMT -8 Todge said:

So far so good then...

A Super Forum Key will mean that all members will see the same weather at the same time.. If you want the weather to be different for each member, but remain the same across browsers, you need to use a Super User Key.

Using setInterval() will work if you leave the browser open for more than 24 hours, but the count will be reset whenever the page is refreshed.. I see you are trying to use pd.date, hopefully that should work better.

Hm. Okay. I will try to do that today if I can and implement the pd.data.

EDIT: I tried implementing it, but don't know too much nor was I able to find forums, links, sources on how to utilize it properly. I did this however, though I am not sure it is any good and given it doesn't focus on DTS (Daylight Saving Time), I will have to take that into account, maybe.


var day = new Date();

   

var nextDay = new Date(day);



   var wind = ["Windy", "Breezy", "Fair and Windy", "A Few Clouds and Windy",

               "Partly Cloudy and Windy", "Mostly Cloudy and Windy", "Overcast and Windy"];



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

                       

   // If localStorage is null, generate weather first time around. Otherwise, if it has

   // been 24hrs, change the weather.

   if((localStorage.getItem("weather") === null) && (day !== nextDay.setDate(day.getDate()+1)))

       localStorage.setItem("weather", wind[windArray]);

   

   // Otherwise, if weather exists, get weather.

   document.getElementById("weather_result").innerHTML = localStorage.getItem("weather");
EDIT: I still dislike having the weather not being consistent across the browsers unless I use User Super Key, which I might have to consider doing. Though, I do not know if it will cause a conflict with the Forum Super Key. Also, Forum Super Key doesn't keep the same weather value like Fog across multiple devices, so not all members will see the same value.

EDIT UPDATE: Okay. The Forum Super Key doesn't work if you're using other devices or browsers, the values will be changed which is not the desired. If I am on Brave, Fog, stored in the localStorage with the Forum Super Key it should be applicable to a mobile phone on having Fog, which doesn't it will say Breezy. Hm~ I am probably approaching the entire javascript wrong.

Left: Brave and Right: Firefox logged in with the same account.

In addition to, (day !== nextDay.setDate(day.getDate()+1)) isn't doing what I think it should do by checking the nextDate since how I am approaching it: March 10 !== March 11, when it will never be true, even when the next day occurs it will be March 11 !== March 12. I am trying to see if I can it where just gets the time and checks if it passed 24hrs. I am assuming I can do it by using var h = today.getHour(), var m = today.getMinute(), and var s = today.getSeconds(); or something and do an if statement that checks if var time = (h + ":" + m + ":" + s) >= 24, if it is of course in military time.

EDIT RECENT: Well, somehow the javascript Plugin is not reaching the header in the leftsidebar now. Disabling it for now until I get it resolved.

The only way to have the weather consistent across all browsers is to use a key..
If you use a User Key it will be consistent across all browsers for each member.. You do not need a Super user Key, as I said before, sorry.
If you use a Super Forum Key the weather will be consistent across all browsers AND all members, or even all viewers if you allow guest access.

Here's a plugin of your above code using a User Key to store the weather, and to change it when day changes according to ProBoards Date..

Weather Plugin.pbp (1.09 KB)

Plugins do not currently work on mobile devices unless they are in desktop mode.

[Xesna]

Mar 10, 2019 13:59:41 GMT -8 Todge said:

The only way to have the weather consistent across all browsers is to use a key..

If you use a User Key it will be consistent across all browsers for each member.. You do not need a Super user Key, as I said before, sorry.

If you use a Super Forum Key the weather will be consistent across all browsers AND all members, or even all viewers if you allow guest access.

Here's a plugin of your above code using a User Key to store the weather, and to change it when day changes according to ProBoards Date..

Weather Plugin.pbp (1.09 KB)

Plugins do not currently work on mobile devices unless they are in desktop mode.

I appreciate it. I will look into it. Also, I tried using the pd.data previously but only reason I had trouble was I kept getting undefined and as I said before, I was trying to find something to work with to see what I was doing wrong; alas, to no avail. Furthermore, I saw this: pb.plugin.key('Weather').get(), is this from the insert key being utilized? I tried doing the insertion and it kept saying I needed to select a variable, but I wasn't sure how that was being done. Again, mentioned underneath, I will analyze the code.

EDIT: Question: What is this occurrence?


Invalid item.

Error Code: 2

Key: Weather

Object Id: 0

It appears when I am a guest and using Firefox.
EDIT: Also, sorry for making you go through the trouble, hopefully, I can learn what you've done with the plugin, so I can apply it to: temperature, wind, and rain chance.

P.S: Tried it in all browsers, the value is being kept consistent with the user, which is good. I've been trying to get that part functioning, so I am going to dissect your code and learn from it. Once, I am able to apply the other features, I am going to slowly update it and change it to beta for release. Hopefully, I can make a thread, and if you don't mind, I make it public for other individuals to use as well since after all you did majority of the plugin work. It is only fair to ask for you permission, and add credit to your work, since you've assisted me greatly. I want others to enjoy the plugin in as well and make their forum unique in that aspect.

[Todge]

Mar 10, 2019 20:16:01 GMT -8 Xesna said:

Mar 10, 2019 13:59:41 GMT -8 Todge said:

The only way to have the weather consistent across all browsers is to use a key..

If you use a User Key it will be consistent across all browsers for each member.. You do not need a Super user Key, as I said before, sorry.

If you use a Super Forum Key the weather will be consistent across all browsers AND all members, or even all viewers if you allow guest access.

Here's a plugin of your above code using a User Key to store the weather, and to change it when day changes according to ProBoards Date..

Weather Plugin.pbp (1.09 KB)

Plugins do not currently work on mobile devices unless they are in desktop mode.

I appreciate it. I will look into it. Also, I tried using the pd.data previously but only reason I had trouble was I kept getting undefined and as I said before, I was trying to find something to work with to see what I was doing wrong; alas, to no avail. Furthermore, I saw this: pb.plugin.key('Weather').get(), is this from the insert key being utilized? I tried doing the insertion and it kept saying I needed to select a variable, but I wasn't sure how that was being done. Again, mentioned underneath, I will analyze the code.

EDIT: Question: What is this occurrence?


Invalid item.

Error Code: 2

Key: Weather

Object Id: 0

It appears when I am a guest and using Firefox.
EDIT: Also, sorry for making you go through the trouble, hopefully, I can learn what you've done with the plugin, so I can apply it to: temperature, wind, and rain chance.

P.S: Tried it in all browsers, the value is being kept consistent with the user, which is good. I've been trying to get that part functioning, so I am going to dissect your code and learn from it. Once, I am able to apply the other features, I am going to slowly update it and change it to beta for release. Hopefully, I can make a thread, and if you don't mind, I make it public for other individuals to use as well since after all you did majority of the plugin work. It is only fair to ask for you permission, and add credit to your work, since you've assisted me greatly. I want others to enjoy the plugin in as well and make their forum unique in that aspect.

pb.plugin.key('Weather').get() is the way you access the key data, yes, and it can be inserted into your code by first placing the cursor in your code where you want the access code inserted, click on the key you want to you on the right, and then click 'insert'. If you want more information on keys in general, you can read about them here..

The error code you are getting is because, as a guest, you are trying to access a key that does not exist. User keys can only be read by the user that that key applies to, and so, as a guest, it throws an error. There are a couple of ways to deal with this. You can change the key to a Super Forum Key and allow guests access. That would mean that ALL members and guests would see the same weather at the same time, on all browsers, or you can run the main function only if the viewer is a member, you can do this by changing this part of the code...

$(document).ready(function(){
   run_weather();
});

to this

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

That would essentially hide the weather from guests.

As for the plugin itself, the coding is yours, all I did was to re-arrange it into a way that it would hopefully make sense to you and to add a key for data storage. Use and change it how you like, and there's no need to credit me for the code that you have created.

[Xesna]

Mar 11, 2019 15:08:01 GMT -8 Todge said:

pb.plugin.key('Weather').get() is the way you access the key data, yes, and it can be inserted into your code by first placing the cursor in your code where you want the access code inserted, click on the key you want to you on the right, and then click 'insert'. If you want more information on keys in general, you can read about them here..

The error code you are getting is because, as a guest, you are trying to access a key that does not exist. User keys can only be read by the user that that key applies to, and so, as a guest, it throws an error. There are a couple of ways to deal with this. You can change the key to a Super Forum Key and allow guests access. That would mean that ALL members and guests would see the same weather at the same time, on all browsers, or you can run the main function only if the viewer is a member, you can do this by changing this part of the code...

$(document).ready(function(){
   run_weather();
});

to this

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

That would essentially hide the weather from guests.

As for the plugin itself, the coding is yours, all I did was to re-arrange it into a way that it would hopefully make sense to you and to add a key for data storage. Use and change it how you like, and there's no need to credit me for the code that you have created.

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.

Now, I'll add the code as you mentioned and don't be modest, you well-deserved a pat on the back. Credit to you friend, cheers! I'll work on this when I am done doing my coding assignments, then as stated in my previous post, make it public when I am done with it.

EDIT: 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?

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


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();
   }
});
$('#temperature_result').html('<b>Weather is out of date.<br><br>Please click here to update</b>').css('cursor','pointer');

I am getting the temperature value except, previously I had it where it would be: document.getElementById("temperature_result").innerHTML = t + "°C"; where it would display 34°C. I am trying to see where can add the + "°C" part?