<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/tvweinstock/pen/WZXNeq?limit=all&page=59&q=app" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css'>
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300");
*, *:before, *:after {
box-sizing: inherit;
}
html {
font-family: 'Open Sans Condensed', sans-serif;
color: #CDD5C1;
}
body {
margin: 0;
}
h2 {
text-transform: uppercase;
font-weight: lighter;
font-size: 40px;
margin: 0;
}
p {
margin: 0;
}
.panels {
min-height: 100vh;
overflow: hidden;
display: flex;
font-size: 20px;
}
.panel {
flex: 1;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(#123352, #1d5372, #3885a2);
border-right: 1px solid rgba(205, 213, 193, 0.3);
cursor: pointer;
transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.3s;
}
.panel.open {
flex: 4;
font-size: 30px;
}
.panel > * {
flex: 1 0 auto;
margin: 0;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform 0.5s;
}
.panel > *:first-child {
justify-content: flex-end;
}
.panel > *:last-child {
justify-content: flex-start;
}
.dawn {
background: linear-gradient(#123352, #1d5372, #3885a2);
}
.morning {
background: linear-gradient(#8dcdba, #eee07a, #f0eebc);
color: #363c80;
}
.afternoon-1 {
background: linear-gradient(#f0eebc, #e6756f, #ee8049);
color: #fff;
}
.afternoon-2 {
background: linear-gradient(#ee8049, #facf62, #e6756f);
color: #fff;
}
.evening-1 {
background: linear-gradient(#facf62, #e6756f, #884186);
color: #fff;
}
.evening-2 {
background: linear-gradient(#291c6b, #4a257d, #884186);
color: #9eaf81;
}
.night-1 {
background: linear-gradient(#884186, #111642, #011548);
}
.night-2 {
background: linear-gradient(#111642, #1d5372, #123352);
}
.weather-icon i {
font-family: 'weathericons';
font-style: normal;
font-weight: normal;
line-height: 1;
font-size: 40px;
padding: 20px 0;
}
.weather-icon i.icon-01d:before {
content: '\f00d';
}
.weather-icon i.icon-01n:before {
content: '\f02e';
}
.weather-icon i.icon-02d:before {
content: '\f002';
}
.weather-icon i.icon-02n:before {
content: '\f086';
}
.weather-icon i.icon-03d:before, .weather-icon i.icon-03n:before {
content: '\f041';
}
.weather-icon i.icon-04d:before, .weather-icon i.icon-04n:before {
content: '\f013';
}
.weather-icon i.icon-09d:before, .weather-icon i.icon-09n:before {
content: '\f017';
}
.weather-icon i.icon-10d:before {
content: '\f009';
}
.weather-icon i.icon-10n:before {
content: '\f029';
}
.weather-icon i.icon-11d:before, .weather-icon i.icon-11n:before {
content: '\f01d';
}
.weather-icon i.icon-13d:before, .weather-icon i.icon-13n:before {
content: '\f01d';
}
.weather-icon i.icon-50d:before, .weather-icon i.icon-50n:before {
content: '\f01b';
}
</style></head><body>
<div id="app"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.0/moment.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.9/moment-timezone-with-data-2010-2020.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser-polyfill.min.js'></script>
<script >var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) {if (window.CP.shouldStopExecution(1)){break;} var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); }
window.CP.exitedLoop(1);
} return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var WeatherApp = function (_React$Component) {
_inherits(WeatherApp, _React$Component);
function WeatherApp() {
_classCallCheck(this, WeatherApp);
var _this = _possibleConstructorReturn(this, (WeatherApp.__proto__ || Object.getPrototypeOf(WeatherApp)).call(this));
_this.state = {
currentTime: moment(),
cities: {
'San Mateo': {
weatherId: 5391959,
timeZone: 'America/Los_Angeles'
},
'Toronto': {
weatherId: 6167865,
timeZone: 'America/Toronto'
},
'Paris': {
weatherId: 2988507,
timeZone: 'Europe/Paris'
},
'Sydney': {
weatherId: 2147714,
timeZone: 'Australia/Sydney'
}
}
};
return _this;
}
_createClass(WeatherApp, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
window.setInterval(function () {
return _this2.setState({ currentTime: moment() });
}, 5000);
}
}, {
key: 'render',
value: function render() {
var _state = this.state,
cities = _state.cities,
currentTime = _state.currentTime;
return React.createElement(
'div',
{ className: 'panels' },
Object.keys(cities).map(function (cityName) {
return React.createElement(City, { name: cityName,
weatherId: cities[cityName].weatherId,
timeZone: cities[cityName].timeZone,
bgImg: cities[cityName].bgImg,
currentTime: currentTime,
key: cityName
});
})
);
}
}]);
return WeatherApp;
}(React.Component);
var City = function (_React$Component2) {
_inherits(City, _React$Component2);
function City(props) {
_classCallCheck(this, City);
var _this3 = _possibleConstructorReturn(this, (City.__proto__ || Object.getPrototypeOf(City)).call(this, props));
var _this3$props = _this3.props,
timeZone = _this3$props.timeZone,
currentTime = _this3$props.currentTime;
_this3.state = {
weatherData: {},
localTime: currentTime.tz(timeZone).format('HH:mm dddd'),
currentHour: currentTime.tz(timeZone).format('HH'),
open: false,
bgGradient: ''
};
_this3.getWeatherInfo = _this3.getWeatherInfo.bind(_this3);
_this3.updateCurrentTime = _this3.updateCurrentTime.bind(_this3);
_this3.toggleOpen = _this3.toggleOpen.bind(_this3);
return _this3;
}
_createClass(City, [{
key: 'getWeatherInfo',
value: function () {
var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(id) {
var res, weatherInfo;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {if (window.CP.shouldStopExecution(2)){break;}
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return fetch('https://api.openweathermap.org/data/2.5/weather?id=' + id + '&units=metric&appid=c5baa00af2bfbc51b5a8bff68a069bb0').then(function (res) {
return res.json();
});
case 2:
res = _context.sent;
weatherInfo = {
temp: res.main.temp,
desc: res.weather[0].main,
icon: 'icon-' + res.weather[0].icon
};
this.setState({
weatherData: weatherInfo
});
case 5:
case 'end':
return _context.stop();
}
}
window.CP.exitedLoop(2);
}, _callee, this);
}));
function getWeatherInfo(_x) {
return _ref.apply(this, arguments);
}
return getWeatherInfo;
}()
}, {
key: 'setGradient',
value: function setGradient(currentHour) {
if (currentHour < 3) {
this.setState({ bgGradient: 'night-2' });
} else if (currentHour < 6) {
this.setState({ bgGradient: 'dawn' });
} else if (currentHour < 9) {
this.setState({ bgGradient: 'morning' });
} else if (currentHour < 12) {
this.setState({ bgGradient: 'afternoon-1' });
} else if (currentHour < 15) {
this.setState({ bgGradient: 'afternoon-2' });
} else if (currentHour < 18) {
this.setState({ bgGradient: 'evening-1' });
} else if (currentHour < 21) {
this.setState({ bgGradient: 'evening-2' });
} else if (currentHour < 24) {
this.setState({ bgGradient: 'night-1' });
}
}
}, {
key: 'updateCurrentTime',
value: function updateCurrentTime() {
var _props = this.props,
timeZone = _props.timeZone,
currentTime = _props.currentTime;
this.setState({ localTime: currentTime.tz(timeZone).format('dddd HH:mm') });
this.setGradient(this.state.currentHour);
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var _this4 = this;
var weatherId = this.props.weatherId;
this.getWeatherInfo(weatherId);
window.setInterval(function () {
return _this4.updateCurrentTime();
}, 5000);
this.setGradient(this.state.currentHour);
}
}, {
key: 'toggleOpen',
value: function toggleOpen() {
var currentState = this.state.open;
this.setState({ open: !currentState });
}
}, {
key: 'render',
value: function render() {
var _props2 = this.props,
name = _props2.name,
bgImg = _props2.bgImg;
var localTime = this.state.localTime;
var _state$weatherData = this.state.weatherData,
desc = _state$weatherData.desc,
temp = _state$weatherData.temp,
icon = _state$weatherData.icon;
var activeClass = this.state.open ? 'open' : '';
var gradientClass = this.state.bgGradient;
return React.createElement(
'div',
{ className: 'panel ' + activeClass + ' ' + gradientClass,
onClick: this.toggleOpen
},
React.createElement(
'div',
null,
React.createElement(
'h2',
null,
name
),
React.createElement(
'p',
null,
localTime
)
),
React.createElement(
'div',
{ className: 'weather-icon' },
React.createElement('i', { className: icon }),
temp ? React.createElement(
'span',
null,
' ',
desc,
' ',
temp,
'\xB0C '
) : ''
)
);
}
}]);
return City;
}(React.Component);
ReactDOM.render(React.createElement(WeatherApp, null), document.querySelector('#app'));
//# sourceURL=pen.js
</script>
</body></html>
