Best way to put html (Weather Project)

#1

Hey guys, Brazilian guy here so maybe my English is gonna have some mistakes. Well, I’m making the Weather app, almost finished, and I had this problem with the better way to show the specific weather. I really don’t know how is the better way since everything was made with css.
I know, maybe a lot of thing on the css could be better and I’m learning a lot with this project and I’m gonna change a lot of things, but here my problem is: How can I show, to the user, the weather and the better way to do this? Should be $().html()? There is a better way? Thank you, guys.

Here is my pen: https://codepen.io/pedrobslisboa/pen/qxgGjW?editors=0100

#2

The usual method is to call an api and get the weather from that using Javascript.
By friend made a video explaining how to do this.:point_left:

#3

This part I know, but how can I “filter” all the CSS’s on the pen to show only Sun, or Cloud, got it? All the images were made by me and with CSS. I want to know what is the better way to show those images. Should be e.g. $(".weather").html(’<div class"cloud"><div class"cloud-1">’)? Is this the better way?

For exemple, my code for the flakes:

<div class="boxFlake boxFlake-2">
    <div class="flake flake-1">
    
  </div>
    <div class="flake flake-2">
    
  </div>
    <div class="flake flake-3">
    
  </div>
  </div>
    <div class="boxFlake boxFlake-3">
    <div class="flake flake-1">
    
  </div>
    <div class="flake flake-2">
    
  </div>
    <div class="flake flake-3">
    
  </div>
  </div>
     <div class="boxFlake boxFlake-4">
    <div class="flake flake-1">
    
  </div>
    <div class="flake flake-2">
    
  </div>
    <div class="flake flake-3">
    
  </div>
  </div>
    <div class="boxFlake boxFlake-5">
    <div class="flake flake-1">
    
  </div>
    <div class="flake flake-2">
    
  </div>
    <div class="flake flake-3">
    
  </div>
  </div>

Should I use $().html() with all this content? I really don’t wanna use the original images, I’m doing this to learn better CSS and other things.

#4

One thing you could do but it is complicated. You could show and hide the relevant weather types using show hide (in CSS hide using display: none). So if the weather is snow show the flakes and hide the sun. If the weather is cloudy, hide the sun and hide the flakes. I didn’t sea rain drops? Will you add them? We get them regularly here in England!! :rofl:

#5

I’m gonna try this! Thank you.

About the rain, it’s there if you want to see, I’ve changed from snow to rain to you see :grin:

#6