-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
177 lines (159 loc) · 7.45 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Fauna+One'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700'
rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StockChart - About</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href ="css/bootstrap.min.css" />
<!-- Customizations -->
<link rel="stylesheet" href="css/sitestyle.css" />
<!-- Charts CSS-->
<link rel="stylesheet" href="css/linegraph.css" />
<!-- BootStrap Icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<!-- Default icon -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">
</head>
<body>
<div id="outermenubar" class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand">StockChart</a>
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li>
<a href="about.html"><i class="bi bi-info-circle"></i>About</a>
</li>
<li>
<a href="https://www.linkedin.com/in/samirtambe/" target="_blank"><i class="bi bi-linkedin"></i>LinkedIn</a>
</li>
<li>
<a href="https://www.github.com/samirtambe" target="_blank"><i class="bi bi-github"></i>GitHub</a>
</li>
</ul>
</div>
</div>
<!-- HEADER END -->
<!-- MAIN CONTENT BEGIN -->
<div class="container">
<div class="row">
<div autoscroll="false">
<div class="col-xs-12">
<h4>About</h4>
<p>
StockChart is a web application that takes a stock symbol and a
time frame as user input to send to
<a href = "https://www.polygon.io/" target="_blank">Polygon.io</a>.
This third party API,
<a href = "https://www.polygon.io/" target="_blank">Polygon.io</a>,
returns stock prices for each trading day in the time frame.
</p>
<p>
StockChart receives the data
from <a href = "https://www.polygon.io/" target="_blank">Polygon.io</a>
consisting of dates and stock prices for that stock symbol. StockChart
draws the line graph plotting the stock price for the time frame.
</p>
<p>
This web application consists of Vanilla JavaScript. The stock chart is
created using <a href="https://d3js.org/" target="_blank">D3.js</a>.
<i>If
the window size of the browser changes the graph will redraw itself
without resubmitting the query.</i>
</p>
<p>
Behind the scenes, the stock symbols inputted by the user are saved to the
cloud. When the website loads it gets the most popular stocks that previous
users have entered on the site and displays those symbols.
</p>
<p>
User-inputted stock symbols that successfully come back with data from the
third party <a href = "https://www.polygon.io/" target="_blank">Polygon.io</a>
API are then sent to my AWS API. That API sends the data to my Lambda
function that sends the stock symbol my DynamoDB table in AWS. If the
symbol exists it is incremented, else it is added.
</p>
<p>
As mentioned previously, when the page loads a POST request is sent to another
AWS API that I created. That API calls my other Lambda function that
queries the DynamoDB table and gets the most popular stock symbols
that have been stored.
</p>
<p class="well">
Refer to the documentation for how to set up the AWS cloud resources in the
<a href = "https://github.com/samirtambe/StockChart/blob/main/README.md" target="_blank">readme.md</a>.
</p>
<h4 class="pgraphgaptop">Technologies</h4>
<div>
<table class="table table-striped">
<tr>
<td><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a></td>
<td>Used for styling, formatting, and responsiveness.</td>
</tr>
<tr>
<td><a href="https://d3js.org/" target="_blank">D3.js</a></td>
<td>A JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.</td>
</tr>
<tr>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/SVG"
target="_blank">SVG</a></td>
<td>Scalable Vector Graphics is an XML-based markup language for describing two-dimensional vector graphics.
D3 Charts uses SVG to draw the charts and graphs.
</td>
</tr>
<tr>
<td><a href="https://www.polygon.io" target="_blank">Polygon.io</a></td>
<td>The third party API that provides the data for the user-inputted stock symbol.
</td>
</tr>
<tr>
<td><a href="https://aws.amazon.com/" target="_blank">Amazon Web Services</a></td>
<td>API Gateway, AWS Certificate Manager (ACM), CloudFront, DynamoDB,
Lambda, Route53 and S3.
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- MAIN CONTENT END -->
<!-- FOOTER BEGIN -->
<div class='footer'>
<div class='container'>
<div class='row'>
<div class='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
<h4>More Information</h4>
<ul class="list-unstyled">
<li><a href="about.html">About</a></li>
<li><a href="terms.html">Terms of Use</a></li>
</ul>
</div>
</div>
<div class='row'>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p class="text-center"> © Samircloud 2024</p>
</div>
</div>
</div>
</div>
<!-- FOOTER END-->
<script src="/js/vendor/jquery.min.js"></script>
<script src="/js/vendor/bootstrap.min.js"></script>
<script src="/js/vendor/d3.min.js"></script>
</body>
</html>