Inside index.html, the only change we'll make is to add an id attribute of wind to the <div> element that contains the weather icon, as follows:

<section class="scrollblock" id="wedday">
  <div class="day">Wednesday</div>
  <div class="forecast">69&deg; Windy</div>
  <div class="icon" id="wind"><img src    ="images/Cloud-Wind.svg" alt="Cloudy Windy" width="300" height="300"></div>
</section>

Technically, this isn't strictly necessary as we have other available ways to select that item for animation, but selecting an item by id is the quickest and most efficient way. By working directly with id, we can get a little performance boost from our code.

Next, we can open up scripts.js and add the details of the animation we'd like to create. Add the following code just below the animation block we...