@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} ° 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