Hey fellow campers, could I have some feedback on my weather app?

Code Feedback
1

Heres the pen:

It works for me, but I’ve been having the same weather for 3 days now and I’d like to know if it works around the world
Some weather conditions were not considered (like hail, etc), but I think it should cover 90% of weather conditions :slight_smile:

EDIT: small question: On the full page my name is at the bottom of the page, but in the browser integrated codepen-plugin it is under the WWWeather logo. Here’s how my css for my name looks like:

.page-footer {
    position: absolute;
    bottom: 0;
    min-width: 100%;
    margin-bottom: 0 !important;
}

What can I do to make it stay at the bottom, regardless of screen size?

1 Like
2

You coded the application very well and it’s accurate for me. It’s also very good looking.
I have the <a> with your GitHub link in the correct position even when I resize, zoom and put it in my browser (not in CodePen).

I only have one small suggestion. Instead of typing var a lot of times, you can use “,” at the end and avoid var, like so:

// weather backgrounds
var clearSky        = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504020580/WWWeather/clearsky.png",
    fewClouds       = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018658/WWWeather/fewclouds.jpg",
    scatteredClouds = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504015796/WWWeather/scattered-clouds.png",
    brokenClouds    = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018658/WWWeather/brokenclouds.jpg",
    drizzle         = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018659/WWWeather/drizzle.png",
    rain            = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018658/WWWeather/rain.jpg",
    thunderStorm    = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018659/WWWeather/thunderstorm.jpg",
    snow            = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018659/WWWeather/snow.jpg",
    mist            = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018660/WWWeather/mist.jpg";
// weather SVGs
var sun             = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119685/WWWeather/SVGs/Sun.svg",
    cloudSun        = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119681/WWWeather/SVGs/Cloud-Sun.svg",
    cloud           = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119681/WWWeather/SVGs/Cloud.svg",
    cloudDrizzle    = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119681/WWWeather/SVGs/Cloud-Drizzle.svg",
    cloudRain       = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119681/WWWeather/SVGs/Cloud-Rain.svg",
    cloudLightning  = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119681/WWWeather/SVGs/Cloud-Lightning.svg",
    cloudFog        = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119681/WWWeather/SVGs/Cloud-Fog.svg",
    cloudWind       = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119685/WWWeather/SVGs/Cloud-Wind.svg",
    snowflake       = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119684/WWWeather/SVGs/Snowflake.svg";

Or so:

// weather backgrounds
var clearSky        = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504020580/WWWeather/clearsky.png",
    fewClouds       = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018658/WWWeather/fewclouds.jpg",
    scatteredClouds = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504015796/WWWeather/scattered-clouds.png",
    brokenClouds    = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018658/WWWeather/brokenclouds.jpg",
    drizzle         = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018659/WWWeather/drizzle.png",
    rain            = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018658/WWWeather/rain.jpg",
    thunderStorm    = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018659/WWWeather/thunderstorm.jpg",
    snow            = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018659/WWWeather/snow.jpg",
    mist            = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504018660/WWWeather/mist.jpg",
// weather SVGs
    sun             = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119685/WWWeather/SVGs/Sun.svg",
    cloudSun        = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119681/WWWeather/SVGs/Cloud-Sun.svg",
    cloud           = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119681/WWWeather/SVGs/Cloud.svg",
    cloudDrizzle    = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119681/WWWeather/SVGs/Cloud-Drizzle.svg",
    cloudRain       = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119681/WWWeather/SVGs/Cloud-Rain.svg",
    cloudLightning  = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119681/WWWeather/SVGs/Cloud-Lightning.svg",
    cloudFog        = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119681/WWWeather/SVGs/Cloud-Fog.svg",
    cloudWind       = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119685/WWWeather/SVGs/Cloud-Wind.svg",
    snowflake       = "http://res.cloudinary.com/detqxj5bf/image/upload/v1504119684/WWWeather/SVGs/Snowflake.svg";

EDIT: I prefer the first one :slight_smile:

3

I see! Thanks for the tip! Does that change also affect the js file’s load time, or is it purely a syntax/readability thing?

4

It’s syntax/readability and less code thing. I haven’t heard anything about the performance.

5

You are right, it doesn’t affect performance.

I would maybe make more obvious that the user has to click on the upper banner to get his weather. But aside from that, the app is simple and effective, good work!

1 Like
6

I can see your irritation with the footer. I was so confused when I saw your name between my weather and temperature. Anyway, just remove .page-footer { bottom: 0; } from your code. It works fine for me without that.

Anyway, since your AJAX skills seem to work fine for me, I’m going to nitpick so you can get some more practice. As of now, my weather is “broken clouds.” Try making the conditions capitalized to look more professional.

My temperature is also 72.664 degrees Fahrenheit. Rounding to the nearest integer might make that look a bit better too. That being said, great job making the temp clickable to change between Celsius and Fahrenheit, I remember that taking me forever to implement.

Design-wise, you might want to remove some of the space between the title and the condition. Add a text-shadow so the white stands out against other partial-white backgrounds (in my case, the grey / white clouds and muddying up the text).

I hope you learned a lot from this project, the weather app was a turning point for me! Your project as it stands is definitely something to be proud of, especially when the first successful API call goes through correctly! Great job, keep coding! :slight_smile:

1 Like
7

So much quality feedback! Thanks a lot :slight_smile: capitalizing the conditions came to my mind as well, but now that you’ve mentioned it too I definitely will make the changes, as well as the other feedback you gave

8

Do you know why this caused the problem?

9

I want to say that

position: absolute;
bottom: 0;

is positioning the element at the bottom of the window. Absolute positioning is going to position the element based off of its parent element. In this case, the window is its parent element, so it will always be at the bottom of the window, regardless of what elements are there in terms of the HTML.

By removing bottom: 0, the element is just being placed in the normal flow of the HTML. Essentially, I don’t think you even need that position attribute for your footer to be at the bottom of the page. You could experiment a bit, because I could definitely be wrong! Test it out!

10

So I found the time to implement some of the suggestions you made. Would appreciate it if you could go over it again and let me know what you think! :smiley:

11

Other than a bit of design problems (easy fixes, the margins are inconsistent), my only complaint would be to make the Celsius temperature rounded to the nearest int so it’s consistent with the Fahrenheit temperature.

Beautifully reworked and I think it’s time to move onto the Wikipedia Viewer!