PdxCodeGuild · cpr2mc · May 20, 2022 · May 23, 2022 · Jun 1, 2022 · Jun 2, 2022
diff --git a/code/chris/javascript/minicapstone/index.html b/code/chris/javascript/minicapstone/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JavaScript MiniCapstone</title>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://unpkg.com/vue@3"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-success p-2 bg-opacity-25 mt-5" id="app">
+
+    <div id="app">
+        <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark border-primary border-bottom justify-content-center mb-3">
+
+            <div class="container-fluid">
+                <a class="navbar-brand" href="#">JS MiniCapstone: Stock Ticker Data</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active" aria-current="page" href="index.html">Home</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="json.html">JSON</a>
+                        </li>
+
+                            <form @submit.prevent="searchTicker" class="d-flex">
+
+                                    <input v-model="ticker" class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                                    <button c class="btn btn-outline-success" type="submit">Search</button>
+                            </form>
+
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+
+        <div v-if="ticker !== ''" class="container text-center mt-3">
+
+            <div class="lineChart">
+                <div id="chartContainer">
+
+                    <canvas id="myChart" width="400" height="400"></canvas>
+
+                </div>
+            </div>
+            <table class="table text-start">
+                <thead>
+                    <tr>
+                        <th scope="col">Name:</th>
+                        <th scope="col">{{ companyName }}</th>
+                    </tr>
+                </thead>
+                <thead>
+                    <tr>
+                        <th class="align-top" scope="col">Overview:</th>
+                        <th scope="col">{{ companyOverview }}</th>
+                    </tr>
+                </thead>
+            </table>
+            <table class="table table-striped table-primary">
+                <thead>
+                    <tr>
+                        <th scope="col">Date/Time Stamp</th>
+                        <th scope="col">Open</th>
+                        <th scope="col">High</th>
+                        <th scope="col">Low</th>
+                        <th scope="col">Close</th>
+                        <th scope="col">Volume</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(item, key) in timeSeriesData">
+                        <th scope="row">{{ key }}</th>
+                        <td>{{ item['1. open'] }}</td>
+                        <td>{{ item['2. high'] }}</td>
+                        <td>{{ item['3. low'] }}</td>
+                        <td>{{ item['4. close'] }}</td>
+                        <td>{{ item['5. volume'] }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+
+
+</body>
+</html>
diff --git a/code/chris/javascript/minicapstone/json.html b/code/chris/javascript/minicapstone/json.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JavaScript MiniCapstone</title>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://unpkg.com/vue@3"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="bg-success p-2 text-dark bg-opacity-25" id="app">
+
+    <div id="app">
+        <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark border-primary border-bottom justify-content-center">
+
+            <div class="container-fluid">
+                <a class="navbar-brand" href="#">JS MiniCapstone: Stock Ticker Data</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                        <a class="nav-link" aria-current="page" href="index.html">Home</a>
+                        </li>
+                        <li class="nav-item">
+                        <a class="nav-link active" href="json.html">JSON</a>
+                        </li>
+
+                        <form @submit.prevent="searchTicker" class="d-flex">
+                            <input v-model="ticker" class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                            <button c class="btn btn-outline-success" type="submit">Search</button>
+                        </form>
+
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+
+        <pre class="mt-3">{{ jsonFormatted }}</pre>
+
+
+    </div>
+
+    <script src="script.js"></script>
+
+
+</body>
+</html>
diff --git a/code/chris/javascript/minicapstone/script.js b/code/chris/javascript/minicapstone/script.js
@@ -0,0 +1,107 @@
+// Alpha Vantage API Key: ZXNGDI9TXSC9K8AL
+
+const url = 'https://www.alphavantage.co/query'
+const apikey = 'ZXNGDI9TXSC9K8AL'
+
+function buildUrl(symbol, userTimeSeries) {
+    return url + "?function=" + userTimeSeries + "&symbol=" + symbol + "&apikey=" + apikey;
+}
+
+const App = {
+    data () {
+        return {
+            ticker: '',
+            rawJSON: {},
+            timeSeriesData: {},
+            jsonFormatted: {},
+            userTimeSeries: 'TIME_SERIES_DAILY', // 'TIME_SERIES_INTRADAY'
+            // intervalInput: '15min', for intraday
+            xLabels: [],
+            closingPrices: [],
+            companyName: '',
+            companyOverview: '',
+
+        }
+    },
+    methods: {
+        searchTicker () {
+            this.ticker = this.ticker.toUpperCase();
+            // get company stock price info
+            axios({
+                url: buildUrl(this.ticker, this.userTimeSeries),
+                method: 'get',
+            }).then (res => {
+                // this.mostRecentClose = res.data["Meta Data"]["3. Last Refreshed"]
+                console.log('RES.DATA:', res.data)
+                this.rawJSON = res.data
+                console.log('rawJSON [index]', this.rawJSON['Time Series (Daily)'])
+                this.createAxesData(this.rawJSON['Time Series (Daily)'])
+                this.timeSeriesData = res.data['Time Series (Daily)']
+                this.jsonFormatted = JSON.stringify(res.data, null, "\t")
+                this.buildChart()
+            }),
+            // get company general info
+            axios({
+                url: buildUrl(this.ticker, 'OVERVIEW'),
+                method: 'get',
+            }).then (res => {
+                this.companyName = res.data['Name']
+                this.companyOverview = res.data['Description']
+            })
+            message = 'stock data incoming...'
+            // this.createData(this.rawJSON)
+
+        },
+        createAxesData (jsonData) {
+            console.log('BEGIN CREATING AXIS DATA...')
+            this.xLabels = []
+            this.closingPrices = []
+            for (item in jsonData) {
+                this.xLabels.push(item)
+                this.closingPrices.push(parseFloat(jsonData[item]["4. close"]))
+            }
+            this.xLabels.reverse()
+            this.closingPrices.reverse()
+        },
+        // chart.JS
+        buildChart () {
+            console.log('BUILDING CHART...')
+            var chartExists = Chart.getChart('myChart') // check to make sure chart DNE
+
+            if (chartExists != undefined) {
+                chartExists.destroy()
+                console.log('CHART DESTROYED.')
+            }
+
+            const ctx = document.getElementById('myChart');
+            const myChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: this.xLabels,
+                    datasets: [{
+                        label: 'Stock Price at Close',
+                        data: this.closingPrices,
+                        fill: false,
+                        borderColor: [
+                            'rgba(0, 127, 255, 1)',
+                        ],
+                        borderWidth: 2
+                    }]
+                },
+                options: {
+                    scales: {
+                        y: {
+                            beginAtZero: false
+                        }
+                    },
+                    responsive: true,
+                    maintainAspectRatio: false
+                }
+            });
+        },
+    }
+
+}
+
+const app = Vue.createApp(App)
+app.mount('#app')
diff --git a/code/chris/javascript/minicapstone/style.css b/code/chris/javascript/minicapstone/style.css
@@ -0,0 +1,4 @@
+body {
+    margin-top: 3rem;
+
+}