Skip to content
This repository was archived by the owner on Jan 24, 2023. It is now read-only.

Commit a70cb7d

Browse files
sicktasticsicktastic
committed
Add node app
1 parent 081cd2f commit a70cb7d

File tree

6 files changed

+412
-0
lines changed

6 files changed

+412
-0
lines changed

‎node_app/app.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
//Problem: We need a simple way to look at a user's badge count and JavaScript point from a web browser
2+
//Solution: Use Node.js to perform the profile look ups and server our template via HTTP
3+
4+
//1. Create a web server
5+
6+
//2. Handle HTTP route GET / and POST / i.e. Home
7+
//if url == "/" && GET
8+
//show search
9+
//if url == "/" && POST
10+
//redirect to /:username
11+
12+
//3. Handle HTTP route GET /:username i.e. /chalkers
13+
//if url == "/...."
14+
//get json from Treehouse
15+
//on "end"
16+
//show profile
17+
//on "error"
18+
//show error
19+
20+
//4. Function that handles the reading of files and merge in value
21+
// read from file and get a string
22+
// merge values in to string

‎node_app/designs/error.html

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7+
<title>Treehouse Profile</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<style type="text/css" media="screen">
10+
@import url(http://fonts.googleapis.com/css?family=Varela+Round);
11+
@import url(http://necolas.github.io/normalize.css/3.0.2/normalize.css);
12+
13+
body {
14+
background: #ECEEEF;
15+
text-align: center;
16+
margin: 100px auto;
17+
max-width: 462px;
18+
padding: 0 40px;
19+
font: 18px normal 'Varela Round', Helvetica, serif;
20+
color: #777B7E;
21+
}
22+
23+
img {
24+
width: 100%;
25+
}
26+
27+
#searchIcon, #avatar {
28+
width: 50%;
29+
border-radius: 50%;
30+
margin: 0 25% 0 25%;
31+
}
32+
33+
input {
34+
font-family: 'Varela Round', Helvetica, serif;
35+
font-size: 18px;
36+
padding: 31px 0;
37+
margin: 10px 0;
38+
text-align: center;
39+
width: 360px;
40+
border-radius: 4px;
41+
border: 1px solid #D5DDE4;
42+
color: #2C3238;
43+
}
44+
45+
#username {
46+
margin: 20px 0 0;
47+
}
48+
49+
.button {
50+
border-color: #5FB6E1;
51+
background: #5FB6E1;
52+
color: #fff;
53+
}
54+
55+
#error {
56+
width: 100%;
57+
padding: 22px 0;
58+
background: #FFE6B2;
59+
color: #C5A14E;
60+
position: absolute;
61+
left: 0;
62+
top: 0;
63+
}
64+
65+
#profile {
66+
background: #fff;
67+
border-radius: 4px;
68+
border: 1px solid #D5DDE4;
69+
padding: 40px 0 0;
70+
margin: -40px 0 0;
71+
}
72+
73+
ul {
74+
list-style-type: none;
75+
padding: 0;
76+
margin: 40px 0 0;
77+
}
78+
79+
li {
80+
display: inline-block;
81+
width: 100%;
82+
padding: 22px 0;
83+
margin: 0;
84+
border-top: 1px solid #D5DDE4;
85+
}
86+
87+
a, a:visited {
88+
color: #5FB6E1;
89+
text-decoration: none;
90+
}
91+
92+
span {
93+
color: #2C3238;
94+
}
95+
</style>
96+
</head>
97+
<body><div id="error">There was an error getting the profile for new. (Not Found)</div><img src="http://i.imgur.com/VKKm0pn.png" alt="Magnifying Glass" id="searchIcon">
98+
99+
<form action="/" method="POST">
100+
<input type="text" placeholder="Enter a Treehouse username" id="username" name="username">
101+
<input type="submit" value="submit" class="button">
102+
</form></body>
103+
</html>

‎node_app/designs/index.html

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7+
<title>Treehouse Profile</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<style type="text/css" media="screen">
10+
@import url(http://fonts.googleapis.com/css?family=Varela+Round);
11+
@import url(http://necolas.github.io/normalize.css/3.0.2/normalize.css);
12+
13+
body {
14+
background: #ECEEEF;
15+
text-align: center;
16+
margin: 100px auto;
17+
max-width: 462px;
18+
padding: 0 40px;
19+
font: 18px normal 'Varela Round', Helvetica, serif;
20+
color: #777B7E;
21+
}
22+
23+
img {
24+
width: 100%;
25+
}
26+
27+
#searchIcon, #avatar {
28+
width: 50%;
29+
border-radius: 50%;
30+
margin: 0 25% 0 25%;
31+
}
32+
33+
input {
34+
font-family: 'Varela Round', Helvetica, serif;
35+
font-size: 18px;
36+
padding: 31px 0;
37+
margin: 10px 0;
38+
text-align: center;
39+
width: 360px;
40+
border-radius: 4px;
41+
border: 1px solid #D5DDE4;
42+
color: #2C3238;
43+
}
44+
45+
#username {
46+
margin: 20px 0 0;
47+
}
48+
49+
.button {
50+
border-color: #5FB6E1;
51+
background: #5FB6E1;
52+
color: #fff;
53+
}
54+
55+
#error {
56+
width: 100%;
57+
padding: 22px 0;
58+
background: #FFE6B2;
59+
color: #C5A14E;
60+
position: absolute;
61+
left: 0;
62+
top: 0;
63+
}
64+
65+
#profile {
66+
background: #fff;
67+
border-radius: 4px;
68+
border: 1px solid #D5DDE4;
69+
padding: 40px 0 0;
70+
margin: -40px 0 0;
71+
}
72+
73+
ul {
74+
list-style-type: none;
75+
padding: 0;
76+
margin: 40px 0 0;
77+
}
78+
79+
li {
80+
display: inline-block;
81+
width: 100%;
82+
padding: 22px 0;
83+
margin: 0;
84+
border-top: 1px solid #D5DDE4;
85+
}
86+
87+
a, a:visited {
88+
color: #5FB6E1;
89+
text-decoration: none;
90+
}
91+
92+
span {
93+
color: #2C3238;
94+
}
95+
</style>
96+
</head>
97+
<body><img src="http://i.imgur.com/VKKm0pn.png" alt="Magnifying Glass" id="searchIcon">
98+
99+
<form action="/" method="POST">
100+
<input type="text" placeholder="Enter a Treehouse username" id="username" name="username">
101+
<input type="submit" value="search" class="button">
102+
</form></body>
103+
</html>
104+
105+
106+
107+
108+
109+
110+

‎node_app/designs/profile.html

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7+
<title>Treehouse Profile</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<style type="text/css" media="screen">
10+
@import url(http://fonts.googleapis.com/css?family=Varela+Round);
11+
@import url(http://necolas.github.io/normalize.css/3.0.2/normalize.css);
12+
13+
body {
14+
background: #ECEEEF;
15+
text-align: center;
16+
margin: 100px auto;
17+
max-width: 462px;
18+
padding: 0 40px;
19+
font: 18px normal 'Varela Round', Helvetica, serif;
20+
color: #777B7E;
21+
}
22+
23+
img {
24+
width: 100%;
25+
}
26+
27+
#searchIcon, #avatar {
28+
width: 50%;
29+
border-radius: 50%;
30+
margin: 0 25% 0 25%;
31+
}
32+
33+
input {
34+
font-family: 'Varela Round', Helvetica, serif;
35+
font-size: 18px;
36+
padding: 31px 0;
37+
margin: 10px 0;
38+
text-align: center;
39+
width: 360px;
40+
border-radius: 4px;
41+
border: 1px solid #D5DDE4;
42+
color: #2C3238;
43+
}
44+
45+
#username {
46+
margin: 20px 0 0;
47+
}
48+
49+
.button {
50+
border-color: #5FB6E1;
51+
background: #5FB6E1;
52+
color: #fff;
53+
}
54+
55+
#error {
56+
width: 100%;
57+
padding: 22px 0;
58+
background: #FFE6B2;
59+
color: #C5A14E;
60+
position: absolute;
61+
left: 0;
62+
top: 0;
63+
}
64+
65+
#profile {
66+
background: #fff;
67+
border-radius: 4px;
68+
border: 1px solid #D5DDE4;
69+
padding: 40px 0 0;
70+
margin: -40px 0 0;
71+
}
72+
73+
ul {
74+
list-style-type: none;
75+
padding: 0;
76+
margin: 40px 0 0;
77+
}
78+
79+
li {
80+
display: inline-block;
81+
width: 100%;
82+
padding: 22px 0;
83+
margin: 0;
84+
border-top: 1px solid #D5DDE4;
85+
}
86+
87+
a, a:visited {
88+
color: #5FB6E1;
89+
text-decoration: none;
90+
}
91+
92+
span {
93+
color: #2C3238;
94+
}
95+
</style>
96+
</head>
97+
<body><div id="profile">
98+
99+
<img src="http://i.imgur.com/KMi72wU.png" alt="Avatar" id="avatar">
100+
101+
<p><span>@waldo</span></p>
102+
103+
<ul>
104+
<li><span>154</span> Badges earned</li>
105+
<li><span>652</span> JavaScript points</li>
106+
<li><a href="/">search again</a></li>
107+
</ul>
108+
109+
</div></body>
110+
</html>

‎node_app/example_profile.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
var Profile = require("./profile.js");
2+
3+
4+
var studentProfile = new Profile("chalkers");
5+
6+
/**
7+
* When the JSON body is fully recieved the
8+
* the "end" event is triggered and the full body
9+
* is given to the handler or callback
10+
**/
11+
studentProfile.on("end", console.dir);
12+
13+
/**
14+
* If a parsing, network or HTTP error occurs an
15+
* error object is passed in to the handler or callback
16+
**/
17+
studentProfile.on("error", console.error);

0 commit comments

Comments
 (0)