WEATHER APP

If you allow to grab your Device Location or type in a City of your Choice, the WeatherApp will display the weather of today in a moving clouf & a 5-days forecast. A picture of the weather accourding to day or nighttime will appear in the background.

DemoCode

Built With

• React
• React Hooks
• React Transition Group
• SCSS
• Flexbox

Librarys

• Moment to display Dates/Days
• Emotion to access CSS in JSX
• Body-Classname provides a declarative way to specify document.body.className
• React Icons - for Weather Icons
• React Spinners for Loading - Page

APIs

• Open Weather API

Special Gotchas

Fetch Geolocation

constgetLocation=()=>{navigator.geolocation.getCurrentPosition((position)=>{constlat=position.coords.latitude;constlon=position.coords.longitude;fetchData(lat,lon);},error);};

Fetch Weatherdata & Errorhandling

constonSearch=(cityName)=>{fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${cityName}&appid=${process.env.REACT_APP_OPENWEATHER_API_KEY}&units=metric`).then((res)=>{if(res.status===404){thrownewError("I didn't find this city. Please try again!");}else{setErr(null);returnres.json();}}).then((data)=>setData(data),(err)=>setErr(err));};

Hidden Key

Key for open Weather APIs is hidden in .env file, which is part of .gitignore to avoid pushing it to github

Open API Fetch

The weather is either pulled with the latitude/ longitude or accourding to a city with is typed in.

Error-Handling

If the typed in City-name is not known by the API, it returns 404 + there will be thrown an error to inform the user.

Show different Pages accourding to an event

Show either
Sucess -> if

• Geolocation is allowed
• Data from Open Weather API is fetched

Error -> if

• Geolocation is not allowed

Loading -> if

• Data is on it's way

constrenderData=()=>{if(data){return<Home{...data}onSearch={onSearch}err={err}/>}elseif(errorState){return<NoLocationAllowedsetErrorStateFalse={setErrorStateFalse}onSearch={onSearch}/>}else{return<LoadingisLoading={!data}/>}}return([...]<divclassName='Maincomponent fade'>{renderData()}</div>[...]);

Animations

Fading in Animations on changing Sites with React Transition Group

I used React Switch Transition, because i wanted to control the render between state transitions. The Current Weather Blub is animated, if the city is changing and a new Blub is displayed. The part in JSX has a key for each Weather + and a timeset which is the mirrowed in the CSS Part, where is set what is going to happen in the time-in & -out.

<SwitchTransition><CSSTransitionkey={props.city.id}timeout={{enter:800,exit:50}}classNames='currentWeather'><CurrentWeather{...props}/></CSSTransition></SwitchTransition>

There are 3 stages for Entry & Exit, which areexplained here & the enter animation in CSS:

.currentWeather-enter{transform:scale(0.98);opacity:0.5;}.currentWeather-enter-active{transform:scale(1);opacity:1;transition:transform0.8scubic-bezier(0.37,0,0.63,1),opacity0.8s;}

Blob-Animation of Current Weather

<span></span><span></span><span></span><span></span><span></span><divclassName="pic">...</div>

servral->span{position:absolute;top:0;left:0;background:radial-gradient(#ffffff5090%,#ffffff);&:nth-child{border-radius:differentborder-radiustodifferentchilds;animation:rotateanimation;}}

Border-Animation of 5-day Forecast

import emotion Libary to use CSS with Javascript

/** @jsx jsx */import{jsx,css,keyframes}from"@emotion/core";

use a random Number to set the borders in a time intervall

constsetrandNum=()=>{returnsetInterval(()=>setRandNumTopLeft(Math.floor(Math.random()*40)+50),16000);};constmorph=keyframes`    50% {        border-radius:${randNumTopLeft3}px${randNumTopRight3}px${randNumBottomLeft3}px${randNumBottomRight3}px /${randNumTopLeft4}px${randNumTopRight4}px${randNumBottomLeft4}px${randNumBottomRight4}px;    } ....      <div       css={css`animation:${morph}16sease-in-out;animation-iteration-count:infinite;`}      className="Day"    >

Changing Background-Pics Animations

The Open Weather App sents a Code for each Weather Conditions at Day & Night-Time. I got royalty free pics fromUnsplash andPexels. I renamed the pics like the codes and put the Codes as a variabel in the urls for the background-pic. To access the CSS i used the libary emotion + to access the body tag to change the background-pic on body i used the react-body-classname library.

/** @jsx jsx */importBodyClassNamefrom'react-body-classname';import{jsx}from'@emotion/core'letsectionStyle=(process.env.PUBLIC_URL+`/images/${image()}.png`);<BodyClassNameclassName="container"css={{backgroundImage:`url("${errorState?errorStyle:sectionStyle}")`}}>

Calculations

Round a num

const temp = (props.main.temp * 2).toFixed() / 2;
Rounded to .5

Contact

Don't hesitate to get in touch!