<div id="icon"></div>

@import 'https://fonts.googleapis.com/css?family=Lato';
body {
	display: flex;
	height: 100vh;
	align-items: center;
	justify-content: center;
	font-family: 'Lato';
	background: #111;
}

.Sky {
	height: 2400px;
	width: 200px;
	background: #373056; // Old browsers
	background: -moz-linear-gradient(top,  #373056 1%, #362942 8%, #362942 14%, #82bfe5 40%, #c3e9f7 57%, #efad51 67%, #a33737 70%, #192f49 97%); // FF3.6-15
	background: -webkit-linear-gradient(top,  #373056 1%,#362942 8%,#362942 14%,#82bfe5 40%,#c3e9f7 57%,#efad51 67%,#a33737 70%,#192f49 97%); // Chrome10-25,Safari5.1-6
	background: linear-gradient(to bottom,  #373056 1%,#362942 8%,#362942 14%,#82bfe5 40%,#c3e9f7 57%,#efad51 67%,#a33737 70%,#192f49 97%); // W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373056', endColorstr='#192f49',GradientType=0 ); // IE6-9


	position: absolute;
	left: 0;
	top: -200px;
	z-index: 2;
	transition: top 2s ease 1s;
}

// Sky animation

.Icon {
	width: 200px;
	height: 200px;
	
	border-radius: 30px;
	overflow: hidden;
	position: relative;
	z-index: 2;
	
	// For loop
	@for $i from 0 through 23 {
		&[data-hour='#{$i}'] {
			.Sky {
				top: -100 * ($i - 1) + px;
			}
		}
	}
	
}
.WeatherIcon{
	width:100px;
	height:100px;
	position:absolute;
	top:25%;
	left:25%;
	z-index: 5;
	color:white;
	font-size:90px;
	text-align:center;
}
.Information {
	position: absolute;
	bottom: 10px;
	left: 0;
	z-index: 99;
	padding: 10px 30px;
	color: white;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	
	.Location {
		font-size: 14px;
		text-transform: uppercase;
	}
	
}
View Compiled
/* Hard-coded weather data because fetch doesn't work over mixed content (http/https)*/
var weatherData ={"coord":{"lon":-121.29,"lat":37.96},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"base":"stations","main":{"temp":57.43,"pressure":1018,"humidity":54,"temp_min":55.4,"temp_max":60.8},"visibility":16093,"wind":{"speed":13.87,"deg":320},"clouds":{"all":1},"dt":1480636680,"sys":{"type":1,"id":495,"message":0.1691,"country":"US","sunrise":1480691027,"sunset":1480725946},"id":5399020,"name":"Stockton","cod":200}
var Icon = React.createClass({
  getInitialState : function(){
    return {
      time: 1,
      icon: '',
      location: '',
      temp:"",
      weather_code:"",
    };
  },
  fetchWeatherData(city){
		/* Commented out fetching weather data */
    /*fetch('http://api.openweathermap.org/data/2.5/weather?q='+city+'&units=imperial&appid=1fbaf6e0d29ea877ae5852504eef4e82')
			.then((response)=>{
			console.log(response);
      return response.json()}).then((data)=>{
			console.log(data);
          var date = new Date();
          var time = date.getHours();
          this.setState({time:time,temp:Math.round(data.main.temp),location:city,weather_code:data.weather[0].id})
      }).catch((error)=>{
        console.log(error)
      });*/
		var date = new Date();
    var time = date.getHours();
		this.setState({time:time,temp:Math.round(weatherData.main.temp),location:city,weather_code:weatherData.weather[0].id})
  },

  fetchIP: function() {
    fetch('//freegeoip.net/json/').then((response)=>{
        return response.json();
    }).then((data)=>{
        let city = data.city;
        this.fetchWeatherData(city);
    }).catch((error)=>{
       console.log(error)
    });
    
  },
  componentDidMount: function() {
    this.fetchIP();
  },
  render: function() {
    return (
      <div className="Icon" data-hour={this.state.time}>
        <div className="Sky"></div>
        <WeatherIcon src={this.state.icon} weatherCode={this.state.weather_code} timeOfDay={this.state.time}/>
        <Information location={this.state.location} temp={this.state.temp} />
      </div>
    );
  }
});

var Information = React.createClass({
  render: function() {
    return (
      <div className="Information">
        <div className="Location">{this.props.location}</div>
        <div className="Temperature">{this.props.temp} &deg; F</div>  
      </div>
    );
  }
});

var WeatherIcon = React.createClass({  
  render: function() {
    let timeOfDay = this.props.timeOfDay > 7 && this.props.timeOfDay < 18 ? 'day' : 'night';
    let className = 'WeatherIcon wi wi-owm-'+timeOfDay+'-'+this.props.weatherCode;
    return (<i className={className}></i>);
  }
});

ReactDOM.render(
	<Icon />,
	document.getElementById('icon')
);
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css
  2. https://codepen.io/jackoliver/pen/88b39118383792095d325aaa5bf28102.css

External JavaScript

  1. https://npmcdn.com/react@15.3.0/dist/react.min.js
  2. https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js
  3. https://code.jquery.com/jquery-2.2.4.min.js