Skip to content

Commit 561d175

Browse files
mrscobblermrscobbler
committed
Daily UIs #5, #6, & #7 
1 parent 9a30629 commit 561d175

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+22472
-0
lines changed

‎005-app-icon/.gitignore

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
node_modules
5+
6+
# testing
7+
coverage
8+
9+
# production
10+
build
11+
12+
# misc
13+
.DS_Store
14+
.env
15+
npm-debug.log

‎005-app-icon/README.md

Whitespace-only changes.

‎005-app-icon/daily-ui-app-icon.md

+294
Large diffs are not rendered by default.

‎005-app-icon/gradient.png

12.5 KB
Loading

‎005-app-icon/package.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "005-app-icon",
3+
"version": "0.0.1",
4+
"private": true,
5+
"devDependencies": {
6+
"react-scripts": "0.6.1"
7+
},
8+
"dependencies": {
9+
"concurrently": "^3.1.0",
10+
"mathjs": "^3.5.3",
11+
"node-sass": "^3.10.1",
12+
"nodemon": "^1.11.0",
13+
"react": "^15.3.2",
14+
"react-addons-update": "^15.3.2",
15+
"react-dom": "^15.3.2"
16+
},
17+
"scripts": {
18+
"start": "react-scripts start",
19+
"build": "react-scripts build",
20+
"test": "react-scripts test --env=jsdom",
21+
"eject": "react-scripts eject",
22+
"build-css": "node-sass --include-path scss src/App.scss src/App.css",
23+
"watch-css": "nodemon -e scss -x \"npm run build-css\"",
24+
"start-with-sass": "concurrently --kill-others \"npm run watch-css\" \"npm start\""
25+
}
26+
}

‎005-app-icon/public/favicon.ico

24.3 KB
Binary file not shown.

‎005-app-icon/public/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
7+
<!--
8+
Notice the use of %PUBLIC_URL% in the tag above.
9+
It will be replaced with the URL of the `public` folder during the build.
10+
Only files inside the `public` folder can be referenced from the HTML.
11+
12+
Unlike "/favicon.ico" or "favico.ico", "%PUBLIC_URL%/favicon.ico" will
13+
work correctly both with client-side routing and a non-root public URL.
14+
Learn how to configure a non-root public URL by running `npm run build`.
15+
-->
16+
<title>React App</title>
17+
</head>
18+
<body>
19+
<div id="root"></div>
20+
<!--
21+
This HTML file is a template.
22+
If you open it directly in the browser, you will see an empty page.
23+
24+
You can add webfonts, meta tags, or analytics to this file.
25+
The build step will place the bundled scripts into the <body> tag.
26+
27+
To begin the development, run `npm start`.
28+
To create a production bundle, use `npm run build`.
29+
-->
30+
</body>
31+
</html>

‎005-app-icon/src/App.css

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@import 'https://fonts.googleapis.com/css?family=Lato';
2+
@import url(weather/css/weather-icons.min.css);
3+
@import url(weather/css/weather-icons-wind.min.css);
4+
body {
5+
display: flex;
6+
height: 100vh;
7+
align-items: center;
8+
justify-content: center;
9+
font-family: 'Lato';
10+
background: #111; }
11+
12+
.Sky {
13+
height: 2400px;
14+
width: 200px;
15+
background: #373056;
16+
background: -moz-linear-gradient(top, #373056 1%, #362942 8%, #362942 14%, #82bfe5 40%, #c3e9f7 57%, #efad51 67%, #a33737 70%, #192f49 97%);
17+
background: -webkit-linear-gradient(top, #373056 1%, #362942 8%, #362942 14%, #82bfe5 40%, #c3e9f7 57%, #efad51 67%, #a33737 70%, #192f49 97%);
18+
background: linear-gradient(to bottom, #373056 1%, #362942 8%, #362942 14%, #82bfe5 40%, #c3e9f7 57%, #efad51 67%, #a33737 70%, #192f49 97%);
19+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373056', endColorstr='#192f49',GradientType=0 );
20+
position: absolute;
21+
left: 0;
22+
top: -200px;
23+
z-index: 2;
24+
transition: top 2s ease 1s; }
25+
26+
.Icon {
27+
width: 200px;
28+
height: 200px;
29+
border-radius: 30px;
30+
overflow: hidden;
31+
position: relative;
32+
z-index: 2; }
33+
.Icon[data-hour='0'] .Sky {
34+
top: 100px; }
35+
.Icon[data-hour='1'] .Sky {
36+
top: 0px; }
37+
.Icon[data-hour='2'] .Sky {
38+
top: -100px; }
39+
.Icon[data-hour='3'] .Sky {
40+
top: -200px; }
41+
.Icon[data-hour='4'] .Sky {
42+
top: -300px; }
43+
.Icon[data-hour='5'] .Sky {
44+
top: -400px; }
45+
.Icon[data-hour='6'] .Sky {
46+
top: -500px; }
47+
.Icon[data-hour='7'] .Sky {
48+
top: -600px; }
49+
.Icon[data-hour='8'] .Sky {
50+
top: -700px; }
51+
.Icon[data-hour='9'] .Sky {
52+
top: -800px; }
53+
.Icon[data-hour='10'] .Sky {
54+
top: -900px; }
55+
.Icon[data-hour='11'] .Sky {
56+
top: -1000px; }
57+
.Icon[data-hour='12'] .Sky {
58+
top: -1100px; }
59+
.Icon[data-hour='13'] .Sky {
60+
top: -1200px; }
61+
.Icon[data-hour='14'] .Sky {
62+
top: -1300px; }
63+
.Icon[data-hour='15'] .Sky {
64+
top: -1400px; }
65+
.Icon[data-hour='16'] .Sky {
66+
top: -1500px; }
67+
.Icon[data-hour='17'] .Sky {
68+
top: -1600px; }
69+
.Icon[data-hour='18'] .Sky {
70+
top: -1700px; }
71+
.Icon[data-hour='19'] .Sky {
72+
top: -1800px; }
73+
.Icon[data-hour='20'] .Sky {
74+
top: -1900px; }
75+
.Icon[data-hour='21'] .Sky {
76+
top: -2000px; }
77+
.Icon[data-hour='22'] .Sky {
78+
top: -2100px; }
79+
.Icon[data-hour='23'] .Sky {
80+
top: -2200px; }
81+
82+
.WeatherIcon {
83+
width: 100px;
84+
height: 100px;
85+
position: absolute;
86+
top: 25%;
87+
left: 25%;
88+
z-index: 5;
89+
color: white;
90+
font-size: 90px;
91+
text-align: center; }
92+
93+
.Information {
94+
position: absolute;
95+
bottom: 10px;
96+
left: 0;
97+
z-index: 99;
98+
padding: 10px 30px;
99+
color: white;
100+
width: 100%;
101+
display: flex;
102+
align-items: center;
103+
justify-content: space-between;
104+
box-sizing: border-box; }
105+
.Information .Location {
106+
font-size: 14px;
107+
text-transform: uppercase; }

‎005-app-icon/src/App.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from 'react'
2+
import './App.css';
3+
4+
var Icon = React.createClass({
5+
getInitialState : function(){
6+
return {
7+
time: 1,
8+
icon: '',
9+
location: '',
10+
temp:"",
11+
weather_code:"",
12+
};
13+
},
14+
fetchWeatherData(city){
15+
const baseUrl = `http://api.openweathermap.org`;
16+
const path = `/data/2.5/weather`;
17+
const appId = `1fbaf6e0d29ea877ae5852504eef4e82`;
18+
const query = `units=imperial&appid=${appId}`;
19+
fetch(`${baseUrl}${path}?q=${city}&${query}`)
20+
.then((response)=>{
21+
return response.json()})
22+
.then((data)=>{
23+
var date = new Date();
24+
var time = date.getHours();
25+
this.setState({time:time,
26+
temp:Math.round(data.main.temp),
27+
location:city,
28+
weather_code:data.weather[0].id
29+
})
30+
})
31+
.catch((error)=>{
32+
console.log(error)
33+
});
34+
},
35+
36+
fetchIP: function() {
37+
fetch('//freegeoip.net/json/')
38+
.then((response)=>{
39+
return response.json();
40+
}).then((data)=>{
41+
let city = data.city;
42+
this.fetchWeatherData(city);
43+
}).catch((error)=>{
44+
console.log(error)
45+
});
46+
47+
},
48+
componentDidMount: function() {
49+
this.fetchIP();
50+
},
51+
render: function() {
52+
return (
53+
<div className="Icon" data-hour={this.state.time}>
54+
<div className="Sky"></div>
55+
<WeatherIcon src={this.state.icon} weatherCode={this.state.weather_code} timeOfDay={this.state.time}/>
56+
<div className="Information">
57+
<div className="Location">{this.state.location}</div>
58+
<div className="Temperature">{this.state.temp} &deg; F</div>
59+
</div>
60+
</div>
61+
);
62+
}
63+
});
64+
65+
var WeatherIcon = React.createClass({
66+
render: function() {
67+
let timeOfDay =
68+
(this.props.timeOfDay > 7 && this.props.timeOfDay < 18)
69+
? 'day' : 'night';
70+
let className = 'WeatherIcon wi '
71+
className += 'wi-owm-'+timeOfDay+'-'+this.props.weatherCode;
72+
return (<i className={className}></i>);
73+
}
74+
});
75+
76+
export default Icon;

‎005-app-icon/src/App.scss

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
2+
@import 'https://fonts.googleapis.com/css?family=Lato';
3+
@import 'weather/css/weather-icons.min.css';
4+
@import 'weather/css/weather-icons-wind.min.css';
5+
body {
6+
display: flex;
7+
height: 100vh;
8+
align-items: center;
9+
justify-content: center;
10+
font-family: 'Lato';
11+
background: #111;
12+
}
13+
14+
.Sky {
15+
height: 2400px;
16+
width: 200px;
17+
background: #373056; // Old browsers
18+
background: -moz-linear-gradient(top, #373056 1%, #362942 8%, #362942 14%, #82bfe5 40%, #c3e9f7 57%, #efad51 67%, #a33737 70%, #192f49 97%); // FF3.6-15
19+
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
20+
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+
21+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373056', endColorstr='#192f49',GradientType=0 ); // IE6-9
22+
23+
position: absolute;
24+
left: 0;
25+
top: -200px;
26+
z-index: 2;
27+
transition: top 2s ease 1s;
28+
}
29+
30+
// Sky animation
31+
32+
.Icon {
33+
width: 200px;
34+
height: 200px;
35+
36+
border-radius: 30px;
37+
overflow: hidden;
38+
position: relative;
39+
z-index: 2;
40+
41+
// For loop
42+
@for $i from 0 through 23 {
43+
&[data-hour='#{$i}'] {
44+
.Sky {
45+
top: -100 * ($i - 1) + px;
46+
}
47+
}
48+
}
49+
50+
}
51+
.WeatherIcon{
52+
width:100px;
53+
height:100px;
54+
position:absolute;
55+
top:25%;
56+
left:25%;
57+
z-index: 5;
58+
color:white;
59+
font-size:90px;
60+
text-align:center;
61+
}
62+
.Information {
63+
position: absolute;
64+
bottom: 10px;
65+
left: 0;
66+
z-index: 99;
67+
padding: 10px 30px;
68+
color: white;
69+
width: 100%;
70+
display: flex;
71+
align-items: center;
72+
justify-content: space-between;
73+
box-sizing: border-box;
74+
75+
.Location {
76+
font-size: 14px;
77+
text-transform: uppercase;
78+
}
79+
80+
}

‎005-app-icon/src/App.test.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div');
7+
ReactDOM.render(<App />, div);
8+
});

‎005-app-icon/src/index.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
}

‎005-app-icon/src/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
import './index.css';
5+
6+
ReactDOM.render(
7+
<App />,
8+
document.getElementById('root')
9+
);

‎005-app-icon/src/logo.svg

+7
Loading

‎005-app-icon/src/weather-icons-master.zip

8.78 MB
Binary file not shown.

0 commit comments

Comments
 (0)