Weather app - Added some extra features

Weather app - Added some extra features
0

#1

I’ve worked on this one for over a week, I added a few extra features such as a loading bar and others ;), I put a lot of effort trying to make it look as presentable as possible. I’ve also implemented Bulma, a CSS framework which i’m still getting used too AND there’s also bootstrap! . I’m still having difficulty with Javascript, hopefully, it’ll be a breeze in a couple weeks. Feel free to fork it out. Pretty happy with this project :slight_smile:

I’m OPEN to ANY criticism, I would like to know how I could have made this a better web app

https://codepen.io/Lexry/full/ZJMeOK/

Cheers,
Glen


#2

I have two suggestions:

Suggestion #1) I strongly recommend not doing this:

        //Refresh page
        $("#btn1").click(function() {
          location.reload(true);
        });

The button should execute everything in the function (you named papi). You just need to create papi as a standalone function inside the $(document).ready(function() { and then call it at the very end of the this $(document).ready(function() { code block (2nd line from the end).

The call would be:

  papi();

and then on the next line, put the following code to make the button refresh the content of the page without reloading it entirely.

  //Refresh page
  $("#btn1").on("click", papi);

To implement what I have described here will take a little it of juggling the code. Just be careful what moving things around to make sure {} and () still match up.


Suggestion #2) The other thing that will make your page load much faster is find a smaller sized background image. The rain image you are using is 3.2 MB, which takes extra time to load.


#3

I originally planned on doing that instead but didn’t know how to do so, or didn’t know what to search on google at the time. I’m not sure if my refresh button works now :s. I changed my background photo to a much smaller size image.


#4

its really cool… Nice design. Am still starting mine and your has inspired me.


#5

Would love to see your end product!