Get Weather (Summer/Winter) using ReactJS Application

I came through below example in one of the articles on internet, so thought of mentioning it here. This example explains a lot of concepts of ReactJS.

In this, we will get the latitude of the current location of the user, based on that we display the season (winter or summer).

Create a new react application. Delete all the files from src folder except index.js. Create new files in src folder: Season.js, Loading.js and index.css.

Also install Semantic UI React package.

npm install --save semantic-ui-react

Include below link in index.html file

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" >

index.js

Copy and paste below code in index.js file. User has to allow the application to access the location.

import React from 'react';
import ReactDOM from 'react-dom';
import Season from './Season';
import Loading from './Loading';
import './index.css';

class App extends React.Component {
    // initializing component state
    state = { lat: null, errMsg: '' };

    // initial data loading
    componentDidMount() {
        window.navigator.geolocation.getCurrentPosition(
            position => this.setState({ lat: position.coords.latitude }),
            err => this.setState({ errMsg: err.getMessage() })
        );
    }

    // custom method
    renderComponent() {
        if (this.state.errMsg && !this.state.lat) {
            return <div><b>Error: </b>{this.state.errMsg}</div>
        }
        else if (!this.state.errMsg && this.state.lat) {
            return <Season lat={this.state.lat} />
        }
        else {
            return <Loading message="Kindly allow us to access your location..." />
        }
    }

    render() {
        return (            
            <div>
                {this.renderComponent()}
            </div>

        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

Season.js

Get the icon name and details from Semantic UI React Site. There are lots of icons available for use.
Copy and paste below code in below file

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// get the season based on latitude and current month
const getSeason = (lat, month) => {
    if (month > 2 && month < 9) { return lat > 0 ? 'summer' : 'winter';
    } else {
        return lat > 0 ? 'winter' : 'summer';
    }
}

// configuration 
const seasonConfig = {
    summer: {
        text: "It's hot!",
        iconName: 'sun'
    },
    winter: {
        text: "It's cold!",
        iconName: 'snowflake'
    }
}

// functional component
const Season = (props) => {
    const currentSeason = getSeason(props.lat, new Date().getMonth());
    const { text, iconName } = seasonConfig[currentSeason];
    return (
        <div className={`season-display ${currentSeason}`}>
            <i className={`massive icon-left ${iconName} icon`} />
            <h1>{text}</h1>
            <i className={`massive icon-right ${iconName} icon`} />
        </div>
    );
};

export default Season;

Loading.js

Copy and paste below code in this file

import React from 'react';
import ReactDOM from 'react-dom';
import { Loader, Dimmer } from 'semantic-ui-react';

// loading the Loader component
const Loading = props => {
    return (
        <Dimmer active>
            <Loader>{props.message}</Loader>
        </Dimmer>
    );
}

//setting default value of Loader component
Loading.defaultProps = {
    message: "Loading..."
};

export default Loading;

index.css

Copy and paste below code in index.css file

.icon-left{
    position: absolute;
    top: 10px;
    left: 10px;
}
.icon-right{
    position: absolute;
    bottom: 10px;
    right: 10px;
}
.season-display{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.season-display.winter i{
    color: blue;
}
.season-display.summer i{
    color: orange;
}
.winter{
    background-color: aquamarine;
}
.summer{
    background-color: orange;
}

As it is January here and I am in Northern Hemisphere, it’s winters here!!
Below is the output of above code