title: Icons/background/descriptions not aligned in weather app (JavaScript)
body: <p>It's sunny and daytime at my location, and the way I've set up the code it should show a blue background and sunny icon, but it's showing the background and icon for "night-clear". I've tried messing about with the backgroundID section to make it work but there's still something wrong. Here's the piece of the code: </p>
  
  <pre><code>var location = weatherData.name,
              condition = weatherData.weather[0].description, 
              id = weatherData.weather[0].id,
              countryShort = weatherData.sys.country,
              iconClass,
              bgIndex,
              backgroundId = [299, 499, 599, 699, 799, 800, 904],
              backgroundIcon = ['thunderstorm', 'sprinkle', 'rain', 'snow', 'fog', 'night-clear', 'cloudy', 'hot'],
              backgroundImg = [
                  'https://www.dropbox.com/s/7cypfufwhoemt9v/thunder.png?dl=1',
                  'https://www.dropbox.com/s/t53xhepev02tfzs/rain%20fog.png?dl=1',
                  'https://www.dropbox.com/s/t53xhepev02tfzs/rain%20fog.png?dl=1',
                  'https://www.dropbox.com/s/6l75dkzo3uugfli/snow.png?dl=1',
                  'https://www.dropbox.com/s/t53xhepev02tfzs/rain%20fog.png?dl=1',
                  'https://www.dropbox.com/s/w9scp9a0quffttx/night%20clear.png?dl=1',
                  'https://www.dropbox.com/s/t53xhepev02tfzs/rain%20fog.png?dl=1'
                'https://www.dropbox.com/s/dzerxsrq4mz9z6l/day%20clear.png?dl=1'
  
              ];
  </code></pre>
  
  <p>And here's the full code: <a href="http://codepen.io/l-emi/pen/OXBwxL" rel="nofollow noreferrer">http://codepen.io/l-emi/pen/OXBwxL</a></p>
  
  <p>Here's what I'm seeing:</p>
  
  <p><a href="https://i.stack.imgur.com/OjW6C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OjW6C.png" alt="enter image description here"></a></p>