ckingbailey / local-weather-app Goto Github PK

Use a variety of nth-of-type selectors to vary hail timing so that you don't get that chunky, whole-blocks-of-hail-resetting-at-once effect.

make flash of lightning animation move around randomly on each iteration.

after first iteration clouds should move in from left edge of window, rather than re-appearing in the middle of the background as they do now. s'thing like:
cloud1.addEventListener(animationiteration, function() {
cloud1.style.left = -10vw;
});
BONUS: make them fade in on first iteration.

created pretty, winky sun for clear weather animation, now add it to cloudy weather animation.

Using the unit 100vw to make leaves travel horizontally produces unsightly effects on different screen widths. Make it use an absolute width, rather than a screen-relative one.

need extreme weather animation.
OpenWeatherMap API, group 90x, extreme:
900 tornado
901 tropical storm
902 hurricane
903 cold
904 hot
905 windy
906 hail

@jmeas suggests adding another layer of if statement and use modified version of existing animations, so, for example, windy could take the existing clouds and make them move very fast, or tropical storm and hurricane could take the existing rain animation and add a pronounced horizontal movement to the drops.

storm clouds & lightning elements are in the wrong parent divs.
should go:

these divs are appended in thunder.js

It's confusing to have randomInt() be the default and randomFlt() not default. I don't want to have to remember which of these two very similar functions is default. Make them both regular exports so I can always depend on going import {random} from '//randomRolls';

Even better, and I'm just thinking of this right now, make them both properties of the objects random, export them both as default, then I can import them as import random from 'path/to/randomRolls' and just use the one that need as random.int or random.float.

-> set a 0% state on lightning animation
-> consider adding some scale or opacity property to the animation
-> set different duration or delay on before & after elements