Local Weather App review and questions

Hi. I’ve built the Weather App with extended functionality - it also shows the forecast for tomorrow. Could you pls give me some feedback. I also have the following questions:

  1. You can mention that the background picture doesn’t fit fully into sections. How can I fix this?
  2. In Weather Underground API that I use exists an opportunity to use small grafic signs of weather (for example, for today it will be Object.current_observation.icon_url ). I wasn’t able to insert them like I did with text/numbers - using “document.getElementById(‘elementId’).innerHTML”. Is there a way to do it via innerHTML or other method(s)?
  3. I don’t like how my switch C/F button works. I’ve read about “toggle()” from jQuiery but wasn’t able to apply in to my project. Can you give me a hint on it?
  4. I’ve noticed that it takes some time to load the background images. Is there a way to speed them up?

My codepen:

See the Pen Local Weather App by Vasilii (@Vasilii1) on CodePen.

I will assist you with #4. The reason the background images load slowly is because the files are large in size. The only way to make them load faster is to download them and manually resize them with image editor software such as PhotoShop and then host the images on a server of your choosing (third party company or your own server).

1 Like

For issue #2, I am not sure what you tried before, but the icon_url property was returning a url with “http” prefix and since Codepen is served over “https”, you were getting a Mixed Content error message in the browser’s console. In fact, anytime you are trying to use an image with “http” prefix, you are going to get this error in the console and the image will not display.

It just so happens that Weather Underground images you were trying to use can also be served over “https”, so I created a small hack as follows to display the “https” version. I added the var iconURL above your existing document.getElementById(‘weather’).innerHTML = line and added the applicable image tag to make it work. See below for the code.

 var iconURL = cObj.current_observation.icon_url.replace('http','https');
 document.getElementById('weather').innerHTML = cObj.current_observation.weather + '<br/><img src="' + iconURL + '">';

You definitely need to learn how to view the console in the browser (Ctrl-Shift-I) on keyboard if using Chrome. You will see many errors that will not show up in the Codepen console.

For #3, why don’t you describe in words exactly what you want to happen for your C/F button. Once you write it out, you should be able to break it down into steps which then can be written into code. If you post your button action description and take an attempt at writing some pseudo-code for the steps, then we can help you out better if you are having trouble.

One other suggestion for you is to move the two scripts (switchVisible and switchVisible1) out of your html section and into your JavaScript section in Codepen. It will make your html section easier to read and keeps all the JavaScript together.

Thank you for your help! I´ve moved switchVisible and switchVisible1 in js section. Also now it shows the weather sign. As for #3 (switch C/F button) the steps are more or less the following:

  1. Press the button
  2. It hides the default temp in C and shows it in F
  3. When it shows F and you click the button it shows temp in C again
    I’ve found the jQuery example of toggle() that fits me perfectly but I wasn’t able to implement it, Here is the example’s code:
<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>toggle demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<p style="display: none">Good Bye</p>
$( "button" ).click(function() {
  $( "p" ).toggle();

Also - any hints on #1 (background pics not fitting)?