Different Kinds of Weather

When I build an app, it takes time for me to brainstorm ideas since when I have a creative spark, it is similar to a storm. The ideas hit the ground like lightning and more ideas come forth. The idea came to me, and I wanted to create a weather app. Now when it comes to weather apps, they are simple but informative in the way they present the data. I created a new app called Galaxy Weather using the OpenWeatherMap API. I created an account on their website and used their API to fetch the weather. Their API allows me to search cities all over the world and retrieve their weather information.

The initial screen

When making this app, I had to think about what I wanted to show. I wanted results, cities, weather times, sunset, sunrise, the date, and many other factors. I had to create different components that all coincide with one another in the creation of this app. I had the Forecast Hour component handled the times of the weather in 3-hour intervals. The Results component showed the results of any given city, state, or country.

const ForecastHour = props => {const { temp, month, day, hour, icon } = props;const iconUrl = `https://openweathermap.org/img/w/${icon}.png`return (<ForecastWrap><Text align="center">{month}.{day}</Text><Text align="center">{hour}:00</Text><WeatherIcon src={iconUrl} /><SmallLabel align="center" weight="400">{temp}&#176;</SmallLabel></ForecastWrap>   );};
ForecastHour.propTypes = {temp: PropTypes.number.isRequired,month: PropTypes.string.isRequired,day: PropTypes.string.isRequired,hour: PropTypes.number.isRequired,icon: PropTypes.string.isRequired};

The code above shows how I assigned multiple variables to props. I then implemented those variables in the HTML and made them required by Proptypes. These values are then shown when the application retrieves its search results.

An example of a returned search

As you can see above the returned search gives you the name of the place you search, wind speed, precipitation percentage, sunrise, sunset, and the forecast hour. My creativity really sparked with Galaxy Weather and you can check it live at https://cashman1396.github.io/galaxy-weather/. I hope you enjoy this weather app I have created.

FullStack Developer and Avid Gamer