├── .DS_Store
├── css
├── .DS_Store
├── reset.css
├── style.css
└── normalize.css
├── js
├── .DS_Store
└── main.js
├── README.md
└── index.html
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vhparadajr/Final_Project/HEAD/.DS_Store
--------------------------------------------------------------------------------
/css/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vhparadajr/Final_Project/HEAD/css/.DS_Store
--------------------------------------------------------------------------------
/js/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vhparadajr/Final_Project/HEAD/js/.DS_Store
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Final_Project
2 | Full-stack app for controlling crypto miner.
3 |
4 |
5 | 
6 |
7 | ## How It's Made:
8 |
9 | **Tech used:** HTML, CSS, JavaScript, Node, Express, MongoDB, EJS template
10 |
11 |
12 | ## Optimizations
13 |
14 | When time permitting, I would like to add CSS and practice my UX design to make a more appealing/functional app.
15 |
16 | ## Lessons Learned:
17 | - Using API's
18 | - How to use Express and MongoDB
19 |
20 | ## Examples:
21 | Other examples from my portfolio:
22 |
23 | **BTC Price Prediction:** https://github.com/vhparadajr/Express_BTC_app
24 |
25 | **Favorite Song:** https://github.com/vhparadajr/Express_Fav_Song
26 |
--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | display: block;
30 | }
31 | body {
32 | line-height: 1;
33 | }
34 | ol, ul {
35 | list-style: none;
36 | }
37 | blockquote, q {
38 | quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: '';
43 | content: none;
44 | }
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Final
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Miner
19 | Active
20 |
21 |
22 |
23 |
24 | GPU
25 |
26 |
27 |
28 | TEMP
29 |
30 |
31 |
32 |
34 | BTC
35 |
36 |
37 |
38 |
39 |
40 |
41 | Revenue
42 |
43 | Day
44 |
45 |
46 |
47 | Month
48 |
49 |
50 |
51 |
52 | Coins
53 |
54 | - Algo
55 | - Coin
56 | - Avg.HR
57 |
58 |
59 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | /******************************************
2 | /* SETUP
3 | /*******************************************/
4 |
5 | /* Box Model Hack */
6 | * {
7 | -moz-box-sizing: border-box; /* Firexfox */
8 | -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
9 | box-sizing: border-box; /* IE */
10 | }
11 |
12 |
13 | /******************************************
14 | /* BASE STYLES
15 | /*******************************************/
16 |
17 | body {
18 | color: #000;
19 | font-size: 12px;
20 | line-height: 1.4;
21 | font-family: Helvetica, Arial, sans-serif;
22 | }
23 |
24 |
25 | /******************************************
26 | /* LAYOUT
27 | /*******************************************/
28 | .block{
29 | display: block;
30 | }
31 |
32 | /* section 1 */
33 | .miner1{
34 | border: 2px solid black;
35 | width: 50%;
36 | margin: 0 auto;
37 | text-align: center;
38 | margin-top: 6em;
39 | }
40 | .sMiner{
41 | font-size: 2em;
42 | border-bottom: 1px solid blue;
43 | }
44 | .sActive{
45 | font-size: 1.5em;
46 | color: green;
47 | }
48 |
49 | /* section 2 */
50 | .miner2{
51 | width: 50%;
52 | margin: 0 auto;
53 | text-align: center;
54 | margin-top: 2em;
55 | margin-bottom: 100px;
56 | }
57 | .gpu{
58 | border: 1px solid black;
59 | width: 45%;
60 | float: left;
61 | padding: 8px;
62 | }
63 | .rate{
64 | width: 45%;
65 | border: 1px solid;
66 | float: right;
67 | padding: 8px;
68 | display: inline-block;
69 | }
70 | .subLeft{
71 | width: 50%;
72 | border: 1px solid;
73 | float: left;
74 | }
75 | .subRight{
76 | width: 50%;
77 | border: 1px solid;
78 | float: right;
79 | }
80 | /* section 3 */
81 | .revenue{
82 | border: 1px solid;
83 | width: 50%;
84 | margin-top: 20px;
85 | margin: 0 auto;
86 | text-align: center;
87 | margin-bottom: 60px;
88 | }
89 | .day{
90 | width: 50%;
91 | text-align: none;
92 | border: 1px solid;
93 | float: left;
94 | }
95 | .month{
96 | width: 50%;
97 | border: 1px solid;
98 | float: right;
99 | }
100 | /* section 4 */
101 | .coin{
102 | border: 1px solid;
103 | width: 50%;
104 | margin: 0 auto;
105 | text-align: center;
106 | height: 130px;
107 | }
108 | ul{
109 | list-style: none;
110 | padding-left: 0;
111 | }
112 | li{
113 | display: inline-block;
114 | width: 24%;
115 | }
116 |
117 | /* buttons */
118 | .buttons{
119 | width: 50%;
120 | margin: 0 auto;
121 | margin-top: 15px;
122 | text-align: center;
123 | }
124 | button{
125 | width: 32%;
126 | padding: 8px;
127 | }
128 | /* .block{
129 | display: block;
130 | height: 20px;
131 | } */
132 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function(){
2 |
3 |
4 | $("#update").on("submit", function(e){
5 | e.preventDefault();
6 | var apiKey = "?key=0d6af9fca12f4c3188c836c79e39403c";
7 | var apiURL = "http://24.34.240.165:17790/api/summary";
8 | // var mphAPI = "https://miningpoolhub.com/index.php?page=api&action=getminingandprofitsstatistics&api_key=d453a93ce8eec18d383afd4bf136f9e144f84f74c01834968a941c1f921e769e"
9 |
10 |
11 | $.ajax({
12 | type: "GET",
13 | url: apiURL + apiKey,
14 | contentType: "application/json; charset=utf-8",
15 | dataType: "json",
16 | // Work with the response
17 | success: function(res) {
18 | console.log(res)
19 | console.log(res.algorithmList[0].name)
20 | $('#spanAlgo').text(res.algorithmList[0].name)
21 | $('#spanSpeed').text(res.algorithmList[0].hashRateAvg)
22 | $('#profitDaily').text(res.revenuePerDay)
23 | $('#profitMonthly').text(res.revenuePerMonth)
24 | $('#gpus').text(res.gpuCount)
25 | $('#temp').text(res.coinList[0].temperature)
26 | $('#exchange').text(res.exchangeRate)
27 | },
28 | error: function(r){
29 | console.log(r)
30 | }
31 | });
32 |
33 | // $.ajax({
34 | // type: "GET",
35 | // url: mphAPI,
36 | // contentType: "application/json; charset=utf-8",
37 | // dataType: "json",
38 | // headers: {
39 | // 'Access-Control-Allow-Origin' : 'http://localhost:8080',
40 | // }
41 | // // Work with the response
42 | // success: function(res) {
43 | // console.log(res)
44 | // },
45 | // error: function(r){
46 | // console.log(r)
47 | // }
48 | // });
49 |
50 | });
51 | // $("#update").on("submit", function(e){
52 | // e.preventDefault();
53 | // // var stop = "?action=restart";
54 | // var apiKey = "?key=0d6af9fca12f4c3188c836c79e39403c";
55 | // // var apiURL = "http://24.34.240.165:17790/api/summary";
56 | // var mphAPI = "https://miningpoolhub.com/index.php?page=api&action=getminingandprofitsstatistics&api_key=d453a93ce8eec18d383afd4bf136f9e144f84f74c01834968a941c1f921e769e"
57 | //
58 | //
59 | // $.ajax({
60 | // type: "GET",
61 | // url: apiURL + apiKey,
62 | // contentType: "application/json; charset=utf-8",
63 | // dataType: "json",
64 | // // Work with the response
65 | // success: function(res) {
66 | // console.log(res)
67 | // console.log(res.algorithmList[0].name)
68 | // $('#spanAlgo').text(res.algorithmList[0].name)
69 | // $('#spanSpeed').text(res.algorithmList[0].hashRateAvg)
70 | // $('#profitDaily').text(res.revenuePerDay)
71 | // $('#profitMonthly').text(res.revenuePerMonth)
72 | // $('#gpus').text(res.gpuCount)
73 | // $('#temp').text(res.coinList[0].temperature)
74 | // $('#exchange').text(res.exchangeRate)
75 | // },
76 | // error: function(r){
77 | // console.log(r)
78 | // }
79 | // });
80 | // });
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 | });
99 |
--------------------------------------------------------------------------------
/css/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
2 |
3 | /* ==========================================================================
4 | HTML5 display definitions
5 | ========================================================================== */
6 |
7 | /*
8 | * Corrects `block` display not defined in IE6/7/8/9 & FF3.
9 | */
10 |
11 | article,
12 | aside,
13 | details,
14 | figcaption,
15 | figure,
16 | footer,
17 | header,
18 | hgroup,
19 | nav,
20 | section,
21 | summary {
22 | display: block;
23 | }
24 |
25 | /*
26 | * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
27 | */
28 |
29 | audio,
30 | canvas,
31 | video {
32 | display: inline-block;
33 | *display: inline;
34 | *zoom: 1;
35 | }
36 |
37 | /*
38 | * Prevents modern browsers from displaying `audio` without controls.
39 | * Remove excess height in iOS5 devices.
40 | */
41 |
42 | audio:not([controls]) {
43 | display: none;
44 | height: 0;
45 | }
46 |
47 | /*
48 | * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
49 | * Known issue: no IE6 support.
50 | */
51 |
52 | [hidden] {
53 | display: none;
54 | }
55 |
56 | /* ==========================================================================
57 | Base
58 | ========================================================================== */
59 |
60 | /*
61 | * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
62 | * `em` units.
63 | * 2. Prevents iOS text size adjust after orientation change, without disabling
64 | * user zoom.
65 | */
66 |
67 | html {
68 | font-size: 100%; /* 1 */
69 | -webkit-text-size-adjust: 100%; /* 2 */
70 | -ms-text-size-adjust: 100%; /* 2 */
71 | }
72 |
73 | /*
74 | * Addresses `font-family` inconsistency between `textarea` and other form
75 | * elements.
76 | */
77 |
78 | html,
79 | button,
80 | input,
81 | select,
82 | textarea {
83 | font-family: sans-serif;
84 | }
85 |
86 | /*
87 | * Addresses margins handled incorrectly in IE6/7.
88 | */
89 |
90 | body {
91 | margin: 0;
92 | }
93 |
94 | /* ==========================================================================
95 | Links
96 | ========================================================================== */
97 |
98 | /*
99 | * Addresses `outline` inconsistency between Chrome and other browsers.
100 | */
101 |
102 | a:focus {
103 | outline: thin dotted;
104 | }
105 |
106 | /*
107 | * Improves readability when focused and also mouse hovered in all browsers.
108 | * people.opera.com/patrickl/experiments/keyboard/test
109 | */
110 |
111 | a:active,
112 | a:hover {
113 | outline: 0;
114 | }
115 |
116 | /* ==========================================================================
117 | Typography
118 | ========================================================================== */
119 |
120 | /*
121 | * Addresses font sizes and margins set differently in IE6/7.
122 | * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5.
123 | */
124 |
125 | h1 {
126 | font-size: 2em;
127 | margin: 0.67em 0;
128 | }
129 |
130 | h2 {
131 | font-size: 1.5em;
132 | margin: 0.83em 0;
133 | }
134 |
135 | h3 {
136 | font-size: 1.17em;
137 | margin: 1em 0;
138 | }
139 |
140 | h4 {
141 | font-size: 1em;
142 | margin: 1.33em 0;
143 | }
144 |
145 | h5 {
146 | font-size: 0.83em;
147 | margin: 1.67em 0;
148 | }
149 |
150 | h6 {
151 | font-size: 0.75em;
152 | margin: 2.33em 0;
153 | }
154 |
155 | /*
156 | * Addresses styling not present in IE7/8/9, S5, Chrome.
157 | */
158 |
159 | abbr[title] {
160 | border-bottom: 1px dotted;
161 | }
162 |
163 | /*
164 | * Addresses style set to `bolder` in FF3+, S4/5, Chrome.
165 | */
166 |
167 | b,
168 | strong {
169 | font-weight: bold;
170 | }
171 |
172 | blockquote {
173 | margin: 1em 40px;
174 | }
175 |
176 | /*
177 | * Addresses styling not present in S5, Chrome.
178 | */
179 |
180 | dfn {
181 | font-style: italic;
182 | }
183 |
184 | /*
185 | * Addresses styling not present in IE6/7/8/9.
186 | */
187 |
188 | mark {
189 | background: #ff0;
190 | color: #000;
191 | }
192 |
193 | /*
194 | * Addresses margins set differently in IE6/7.
195 | */
196 |
197 | p,
198 | pre {
199 | margin: 1em 0;
200 | }
201 |
202 | /*
203 | * Corrects font family set oddly in IE6, S4/5, Chrome.
204 | * en.wikipedia.org/wiki/User:Davidgothberg/Test59
205 | */
206 |
207 | code,
208 | kbd,
209 | pre,
210 | samp {
211 | font-family: monospace, serif;
212 | _font-family: 'courier new', monospace;
213 | font-size: 1em;
214 | }
215 |
216 | /*
217 | * Improves readability of pre-formatted text in all browsers.
218 | */
219 |
220 | pre {
221 | white-space: pre;
222 | white-space: pre-wrap;
223 | word-wrap: break-word;
224 | }
225 |
226 | /*
227 | * Addresses CSS quotes not supported in IE6/7.
228 | */
229 |
230 | q {
231 | quotes: none;
232 | }
233 |
234 | /*
235 | * Addresses `quotes` property not supported in S4.
236 | */
237 |
238 | q:before,
239 | q:after {
240 | content: '';
241 | content: none;
242 | }
243 |
244 | small {
245 | font-size: 75%;
246 | }
247 |
248 | /*
249 | * Prevents `sub` and `sup` affecting `line-height` in all browsers.
250 | * gist.github.com/413930
251 | */
252 |
253 | sub,
254 | sup {
255 | font-size: 75%;
256 | line-height: 0;
257 | position: relative;
258 | vertical-align: baseline;
259 | }
260 |
261 | sup {
262 | top: -0.5em;
263 | }
264 |
265 | sub {
266 | bottom: -0.25em;
267 | }
268 |
269 | /* ==========================================================================
270 | Lists
271 | ========================================================================== */
272 |
273 | /*
274 | * Addresses margins set differently in IE6/7.
275 | */
276 |
277 | dl,
278 | menu,
279 | ol,
280 | ul {
281 | margin: 1em 0;
282 | }
283 |
284 | dd {
285 | margin: 0 0 0 40px;
286 | }
287 |
288 | /*
289 | * Addresses paddings set differently in IE6/7.
290 | */
291 |
292 | menu,
293 | ol,
294 | ul {
295 | padding: 0 0 0 40px;
296 | }
297 |
298 | /*
299 | * Corrects list images handled incorrectly in IE7.
300 | */
301 |
302 | nav ul,
303 | nav ol {
304 | list-style: none;
305 | list-style-image: none;
306 | }
307 |
308 | /* ==========================================================================
309 | Embedded content
310 | ========================================================================== */
311 |
312 | /*
313 | * 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
314 | * 2. Improves image quality when scaled in IE7.
315 | * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
316 | */
317 |
318 | img {
319 | border: 0; /* 1 */
320 | -ms-interpolation-mode: bicubic; /* 2 */
321 | }
322 |
323 | /*
324 | * Corrects overflow displayed oddly in IE9.
325 | */
326 |
327 | svg:not(:root) {
328 | overflow: hidden;
329 | }
330 |
331 | /* ==========================================================================
332 | Figures
333 | ========================================================================== */
334 |
335 | /*
336 | * Addresses margin not present in IE6/7/8/9, S5, O11.
337 | */
338 |
339 | figure {
340 | margin: 0;
341 | }
342 |
343 | /* ==========================================================================
344 | Forms
345 | ========================================================================== */
346 |
347 | /*
348 | * Corrects margin displayed oddly in IE6/7.
349 | */
350 |
351 | form {
352 | margin: 0;
353 | }
354 |
355 | /*
356 | * Define consistent border, margin, and padding.
357 | */
358 |
359 | fieldset {
360 | border: 1px solid #c0c0c0;
361 | margin: 0 2px;
362 | padding: 0.35em 0.625em 0.75em;
363 | }
364 |
365 | /*
366 | * 1. Corrects color not being inherited in IE6/7/8/9.
367 | * 2. Corrects text not wrapping in FF3.
368 | * 3. Corrects alignment displayed oddly in IE6/7.
369 | */
370 |
371 | legend {
372 | border: 0; /* 1 */
373 | padding: 0;
374 | white-space: normal; /* 2 */
375 | *margin-left: -7px; /* 3 */
376 | }
377 |
378 | /*
379 | * 1. Corrects font size not being inherited in all browsers.
380 | * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
381 | * 3. Improves appearance and consistency in all browsers.
382 | */
383 |
384 | button,
385 | input,
386 | select,
387 | textarea {
388 | font-size: 100%; /* 1 */
389 | margin: 0; /* 2 */
390 | vertical-align: baseline; /* 3 */
391 | *vertical-align: middle; /* 3 */
392 | }
393 |
394 | /*
395 | * Addresses FF3/4 setting `line-height` on `input` using `!important` in the
396 | * UA stylesheet.
397 | */
398 |
399 | button,
400 | input {
401 | line-height: normal;
402 | }
403 |
404 | /*
405 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
406 | * and `video` controls.
407 | * 2. Corrects inability to style clickable `input` types in iOS.
408 | * 3. Improves usability and consistency of cursor style between image-type
409 | * `input` and others.
410 | * 4. Removes inner spacing in IE7 without affecting normal text inputs.
411 | * Known issue: inner spacing remains in IE6.
412 | */
413 |
414 | button,
415 | html input[type="button"], /* 1 */
416 | input[type="reset"],
417 | input[type="submit"] {
418 | -webkit-appearance: button; /* 2 */
419 | cursor: pointer; /* 3 */
420 | *overflow: visible; /* 4 */
421 | }
422 |
423 | /*
424 | * Re-set default cursor for disabled elements.
425 | */
426 |
427 | button[disabled],
428 | input[disabled] {
429 | cursor: default;
430 | }
431 |
432 | /*
433 | * 1. Addresses box sizing set to content-box in IE8/9.
434 | * 2. Removes excess padding in IE8/9.
435 | * 3. Removes excess padding in IE7.
436 | * Known issue: excess padding remains in IE6.
437 | */
438 |
439 | input[type="checkbox"],
440 | input[type="radio"] {
441 | box-sizing: border-box; /* 1 */
442 | padding: 0; /* 2 */
443 | *height: 13px; /* 3 */
444 | *width: 13px; /* 3 */
445 | }
446 |
447 | /*
448 | * 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
449 | * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
450 | * to future-proof).
451 | */
452 |
453 | input[type="search"] {
454 | -webkit-appearance: textfield; /* 1 */
455 | -moz-box-sizing: content-box;
456 | -webkit-box-sizing: content-box; /* 2 */
457 | box-sizing: content-box;
458 | }
459 |
460 | /*
461 | * Removes inner padding and search cancel button in S5, Chrome on OS X.
462 | */
463 |
464 | input[type="search"]::-webkit-search-cancel-button,
465 | input[type="search"]::-webkit-search-decoration {
466 | -webkit-appearance: none;
467 | }
468 |
469 | /*
470 | * Removes inner padding and border in FF3+.
471 | */
472 |
473 | button::-moz-focus-inner,
474 | input::-moz-focus-inner {
475 | border: 0;
476 | padding: 0;
477 | }
478 |
479 | /*
480 | * 1. Removes default vertical scrollbar in IE6/7/8/9.
481 | * 2. Improves readability and alignment in all browsers.
482 | */
483 |
484 | textarea {
485 | overflow: auto; /* 1 */
486 | vertical-align: top; /* 2 */
487 | }
488 |
489 | /* ==========================================================================
490 | Tables
491 | ========================================================================== */
492 |
493 | /*
494 | * Remove most spacing between table cells.
495 | */
496 |
497 | table {
498 | border-collapse: collapse;
499 | border-spacing: 0;
500 | }
--------------------------------------------------------------------------------