Skip to content

Commit 954f39f

Browse files
qucode1qucode1
committed
Initial commit
0 parents  commit 954f39f

19 files changed

+2065
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎api/openWeatherMap.jsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
var axios = require("axios");
2+
3+
const OPEN_WEATHER_MAP_URL = "http://api.openweathermap.org/data/2.5/weather?units=metric&appid=177cb6005572c76b18089a6d3a9fd98a";
4+
5+
// http://api.openweathermap.org/data/2.5/weather?q=krefeld,de&units=metric&appid=177cb6005572c76b18089a6d3a9fd98a
6+
7+
8+
module.exports = {
9+
getTemp: function(location){
10+
var encodedLocation = encodeURIComponent(location);
11+
var requestUrl = `${OPEN_WEATHER_MAP_URL}&q=${encodedLocation}`;
12+
13+
return axios.get(requestUrl).then(function(res){
14+
15+
if(res.data.cod && res.data.message) {
16+
throw new Error(res.data.message);
17+
} else {
18+
return res.data.main.temp;
19+
}
20+
}, function(res){
21+
throw new Error(res.data.message);
22+
})
23+
}
24+
}

‎app/app.jsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
var React = require("react");
2+
var ReactDOM = require("react-dom");
3+
var {Route, Router, IndexRoute, hashHistory} = require("react-router");
4+
5+
var Main = require("Main");
6+
var Weather = require("Weather");
7+
var About = require("About");
8+
var Examples = require("Examples");
9+
10+
ReactDOM.render(
11+
<Router history={hashHistory}>
12+
<Route path="/" component={Main}>
13+
<Route path="about" component={About}/>
14+
<Route path="examples" component={Examples}/>
15+
<IndexRoute component={Weather}/>
16+
</Route>
17+
</Router>,
18+
document.getElementById("app")
19+
);

‎app/components/About.jsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
var React = require("react");
2+
3+
// var About = React.createClass({
4+
// render: function(){
5+
// return(
6+
// <h3>About Component</h3>
7+
// )
8+
// }
9+
// });
10+
11+
var About = (props) => {
12+
return(
13+
<h3>About Component</h3>
14+
)
15+
};
16+
17+
module.exports = About;

‎app/components/Examples.jsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var React = require("react");
2+
3+
var Examples = React.createClass({
4+
render: function(){
5+
return(
6+
<h3>Examples Component</h3>
7+
)
8+
}
9+
});
10+
11+
module.exports = Examples;

‎app/components/Main.jsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
var React = require("react");
2+
3+
var Nav = require("Nav");
4+
5+
// var Main = React.createClass({
6+
// render: function(){
7+
// return (
8+
// <div>
9+
// <h2>Main Component</h2>
10+
// <Nav/>
11+
// {this.props.children}
12+
// </div>
13+
// )
14+
// }
15+
// });
16+
17+
var Main = (props) => {
18+
return (
19+
<div>
20+
<h2>Main Component</h2>
21+
<Nav/>
22+
{props.children}
23+
</div>
24+
)
25+
};
26+
27+
module.exports = Main;

‎app/components/Nav.jsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
var React = require("react");
2+
var {Link, IndexLink} = require("react-router");
3+
4+
// var Nav = React.createClass({
5+
// render: function(){
6+
// return (
7+
// <nav>
8+
// <h2>Nav Component</h2>
9+
// <IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: "bold"}}>Get Weather</IndexLink>
10+
// <Link to="/about" activeClassName="active" activeStyle={{fontWeight: "bold"}}>About</Link>
11+
// <Link to="/examples" activeClassName="active" activeStyle={{fontWeight: "bold"}}>Examples</Link>
12+
// </nav>
13+
// )
14+
// }
15+
// });
16+
17+
var Nav = (props) => {
18+
return (
19+
<nav>
20+
<h2>Nav Component</h2>
21+
<IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: "bold"}}>Get Weather</IndexLink>
22+
<Link to="/about" activeClassName="active" activeStyle={{fontWeight: "bold"}}>About</Link>
23+
<Link to="/examples" activeClassName="active" activeStyle={{fontWeight: "bold"}}>Examples</Link>
24+
</nav>
25+
)
26+
};
27+
28+
module.exports = Nav;

‎app/components/Weather.jsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
var React = require("react");
2+
3+
var WeatherForm = require("WeatherForm");
4+
var WeatherMessage = require("WeatherMessage");
5+
var openWeatherMap = require("openWeatherMap");
6+
7+
var Weather = React.createClass({
8+
getInitialState: function(){
9+
return {
10+
isLoading: false
11+
}
12+
},
13+
handleSearch: function(location){
14+
var that = this;
15+
16+
this.setState({isLoading: true});
17+
18+
openWeatherMap.getTemp(location).then(function(temp){
19+
that.setState({
20+
location: location,
21+
temp: temp,
22+
isLoading: false
23+
});
24+
25+
}, function(errorMessage){
26+
console.log(errorMessage);
27+
that.setState({
28+
errorMessage: errorMessage,
29+
isLoading: false
30+
});
31+
});
32+
},
33+
render: function(){
34+
var {isLoading, temp, location, errorMessage} = this.state;
35+
36+
function renderMessage(){
37+
if(isLoading){
38+
return <h3>Fetching Weather...</h3>
39+
} else if(temp && location){
40+
return <WeatherMessage location={location} temp={temp}/>
41+
} else if(errorMessage){
42+
return <p>Couldn't get current weather data</p>
43+
}
44+
}
45+
46+
return(
47+
<div>
48+
<h3>Weather Component</h3>
49+
<WeatherForm onSearch={this.handleSearch}/>
50+
{renderMessage()}
51+
</div>
52+
);
53+
}
54+
});
55+
56+
module.exports = Weather;

‎app/components/WeatherForm.jsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
var React = require("react");
2+
3+
var WeatherForm = React.createClass({
4+
onFormSubmit: function(e){
5+
e.preventDefault();
6+
7+
var location = this.refs.location.value;
8+
9+
if(location.length > 0){
10+
this.refs.location.value = "";
11+
this.props.onSearch(location);
12+
}
13+
},
14+
render: function(){
15+
return(
16+
<form onSubmit={this.onFormSubmit}>
17+
<input type="text" ref="location" placeholder="City Name"/>
18+
<button>Get Weather</button>
19+
</form>
20+
)
21+
}
22+
});
23+
24+
module.exports = WeatherForm;

‎app/components/WeatherMessage.jsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var React = require("react");
2+
3+
// var WeatherMessage = React.createClass({
4+
// render: function(){
5+
// var {temp, location} = this.props;
6+
// return(
7+
// <p>It's {temp} °C in {location}</p>
8+
// )
9+
// }
10+
// });
11+
12+
var WeatherMessage = ({temp, location}) => {
13+
return(
14+
<p>It's {temp} °C in {location}</p>
15+
)
16+
};
17+
18+
module.exports = WeatherMessage;

‎example-arrow-functions.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
var names = ["Andrew", "Julie", "Jen"];
2+
3+
// names.forEach(function(name) {
4+
// console.log("forEach", name)
5+
// });
6+
7+
// names.forEach((name) => { //{} for multiple statements
8+
// console.log("arrowFunc", name)
9+
// });
10+
11+
// names.forEach((name) => console.log(name)); // single expression
12+
13+
// var returnMe = (name) => name + "!"; //automatically gets returned
14+
// console.log(returnMe("Yannick"));
15+
16+
// var person = {
17+
// name: "Yannick",
18+
// greet: function() {
19+
// names.forEach(function(name) { // returns undefined because this is updated
20+
// console.log(this.name + " says hi to " + name)
21+
// })
22+
// }
23+
// };
24+
25+
// person.greet();
26+
27+
// var person = {
28+
// name: "Yannick",
29+
// greet: function() {
30+
// names.forEach((name) => { // returns Yannick because this is NOT updated
31+
// console.log(this.name + " says hi to " + name)
32+
// })
33+
// }
34+
// };
35+
36+
// person.greet();
37+
38+
39+
// Challenge Area:
40+
41+
function add(a, b) {
42+
return a + b;
43+
}
44+
45+
var addStatement = (a, b) => {
46+
return a + b;
47+
};
48+
var addExpression = (a, b) => a + b;
49+
50+
console.log(addStatement(1, 3));
51+
console.log(addExpression(9, 0));

‎example-promise.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// function getTempCallback(location, callback) {
2+
// callback(undefined, 78);
3+
// callback("City not found");
4+
// }
5+
6+
// getTempCallback("Krefeld", function(err, temp){
7+
// if(err){
8+
// console.log("error", err)
9+
// } else {
10+
// console.log("success", temp)
11+
// }
12+
// });
13+
14+
// function getTempPromise(location){
15+
// return new Promise(function(resolve, reject){
16+
// setTimeout(function(){
17+
// resolve(79);
18+
// reject("City not found");
19+
// }, 1000);
20+
// });
21+
// }
22+
23+
// getTempPromise("Krefeld").then(function(temp){
24+
// console.log("promise success", temp);
25+
// }, function(err){
26+
// console.log("promise error", err)
27+
// });
28+
29+
30+
// Challenge Area
31+
32+
function addPromise(a,b){
33+
return new Promise(function(resolve, reject){
34+
if(typeof a === "number" && typeof b === "number"){
35+
resolve(a+b);
36+
} else {
37+
reject("At least one argument is not a number!");
38+
}
39+
});
40+
};
41+
42+
addPromise(5,22).then(function(result){
43+
console.log("The result is: " + result);
44+
}, function(err){
45+
console.log(err);
46+
})

‎package.json

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "boilerplate",
3+
"version": "1.0.0",
4+
"description": "Simple react app",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"author": "qucode",
10+
"license": "ISC",
11+
"dependencies": {
12+
"axios": "^0.16.1",
13+
"express": "^4.15.2",
14+
"react": "^0.14.7",
15+
"react-dom": "^0.14.7",
16+
"react-router": "^2.0.0"
17+
},
18+
"devDependencies": {
19+
"babel-core": "^6.5.1",
20+
"babel-loader": "^6.2.2",
21+
"babel-preset-es2015": "^6.5.0",
22+
"babel-preset-react": "^6.5.0",
23+
"babel-preset-stage-0": "^6.24.1",
24+
"webpack": "^1.12.13"
25+
}
26+
}

‎public/app.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
var greeter = require("./components/Greeter");
2+
3+
greeter();

0 commit comments

Comments
 (0)