Local weather app - external icons

1

Hi there. I wrote my Local Weather App on my personal computer. I’d like to copy my code to codepen but I use external icons in my project (https://erikflowers.github.io/weather-icons/). How can I use it inside codepen? I also tried to put my code on github pages but there is a problem with http links…

2

You can add external CSS (and JavaScript) files in Codepen by going to (in your pen) Settings -> CSS -> Add External CSS.
Do you have the icons stylesheet on your computer or are you adding it via a <link> tag in your HTML? If you are using a local copy then you’ll need a link to a copy of the icons stylesheet online.

EDIT: If you don’t already have a link to an online copy, here’s a list of links to Weather Icons hosted on a CDN.

1 Like
3

Thank you. Here is my Weather App - http://codepen.io/jundymek/pen/aJdYoo . What do you think about it?

4

It looks good! I think the font you used for the degrees looks nice alongside the number’s font (what font are you using?).

Two (small) things:

  • The weather icon overlapped the ‘℃’ on first load.
  • When you switch units it rounds the number to the nearest whole number, but on first load it shows a decimal (for my weather at least). It’s a small touch, but you might run the temperature through Math.floor when the page loads to keep the numbers consistent.

I think your design looks good, especially with the box’s shadow and the diagonal line in the background (for some reason those two fit well together in my opinion).

Keep up the good work!

5

Thanks. First of all I need to fix responsive design. On mobile phones app looks awful. I set container width to 50%, it looks as it should on PC but on smaller Windows IT is not ok… I use Audiofile font in my projects.

6

I was just looking for those links, thanks :smiley: