Best way to put html (Weather Project)

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

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:

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.

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:

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: