UMD-INST377 · RezikEffort · Oct 18, 2022 · Oct 19, 2022 · Nov 11, 2022 · Nov 11, 2022
diff --git a/Final Project Writeup b/Final Project Writeup
@@ -0,0 +1,12 @@
+
+
+What API did you use, link to the API: 
+yahoo finance API, https://polygon.io
+What visualizations does your project drive? 
+Chart.js 
+What visualization or other JS libraries does your project use? 
+None, google front api
+What CSS frameworks did you use?What version of them? 
+None, we used google fonts API to import styles
+What is your actual project trying to display and solve?
+Our project is aiming to give users information about a stock they may be considering to purchase. This app shows some basic information so that it is easier for new traders to learn stocks.
diff --git a/README.md b/README.md
@@ -1,6 +1,14 @@
-# This is your readme
-You are required to fill it in with documentation similar to that found in the Sequelize example for the course as part of your final project.
+# Readme
 
-### How to use Markdown
-Markdown is a text notation system used in Discord, Whatsapp and similar to structure pages without writing HTML at all. You'll be using it for your documentation.
-* [Markdown guide](https://www.markdownguide.org/cheat-sheet/)
+https://young-bastion-96605.herokuapp.com/
+
+## Title: Ticker Tracker
+
+We plan on gathering data from the Yahoo Finance API to give users insights into
+stock tickers' finances. Users should be able to compare different stock financials using our frontend
+website designed using HTML, CSS, and Js. Our stakeholders would be anyone who trades stocks and
+wants to know more about the company's finance before making investment decisions. Our website will
+serve as a tool to help investors make more informed investment decisions. We chose the Yahoo Finance API because
+it is the most extensive stock API and holds the most financial data. Our front-end stack consists of the
+selected web development technologies to make it easier for users to access financial information about a
+company. Our front end stack utilized HTML/ CSS to create an aesthetic looking page which is easy to navigate for users. The displayed data will include an interactive visualization built using D3.js to make our users' research process effortless and comprehensible.The target browsers for our app are IOS and adroid, as well as the web, our main application is designed for the web, and the user experience will be best on the web since we are displaying financial data, that can look much neater on the web, so browsers such as Chrome, Firefox, and Safari.
diff --git a/client/image/Intro_slide_-_digital_stock_chart_going_up_-_s.width-880.jpg b/client/image/Intro_slide_-_digital_stock_chart_going_up_-_s.width-880.jpg
diff --git a/client/image/MW-GB819_stocks_20180116134819_ZH.jpg b/client/image/MW-GB819_stocks_20180116134819_ZH.jpg
diff --git a/client/index.html b/client/index.html
@@ -1,12 +1,51 @@
 <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>Group Project Base</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <link rel="stylesheet" href="styles.css">
 </head>
+
 <body>
+    <div class="svg-container">
+      <svg viewbox="0 0 800 400" class="svg">
+        <path id="curve" fill="#50c6d8" d="M 800 300 Q 400 350 0 300 L 0 0 L 800 0 L 800 300 Z">
+        </path>
+      </svg>
+    </div>
+
+    <header>
+      <h1>Ticker Tracker</h1>
+      <br><br>
+      <h4>This website get a stocks financial 
+            data from yahoo finace api</h4>
+    </header>
+
+    <main>
+        <div class="left_section ">
+            <h2>ENTER A STOCK TICKER</h2>
+            <br> <br>
+            <input type='text' id='userInput' value='' />
+            <br><br>
+            <input type="button" onclick="getData()" value="Submit">
+            <br> <br>
+            <br> <br>
+            <div class="left_section_1" id="apiResponse">
+                <h3>Financial Information about the stock</h3>
+            </div>
+            <br> <br>
+            <div>
+                <canvas id="myChart"></canvas>
+              </div>
+        </div>
+    </div>
+    </main>
     <script src="./script.js"></script>
-</body>
-</html>
+    <footer>
+      <p>INST377 final Project</p>
+      <small> By Abdulrezak Mohamed & Rijul Newalkar , <a href="https://github.com/RezikEffort/INST-377-Group102-12--Final-Project">GitHub</a>.</small>
+    </footer>
+  </body>
diff --git a/client/script.js b/client/script.js
@@ -0,0 +1,53 @@
+const options = {
+  method: 'GET',
+  headers: {
+
+    'X-RapidAPI-Key': '0c8a1be604msh71b46e583df36e2p12b5d0jsn8d7b867ab3b9',
+    'X-RapidAPI-Host': 'yahoo-finance15.p.rapidapi.com'
+  }
+};
+let myChart = null;
+async function getData() {
+  const userInput = document.getElementById('userInput').value;
+  // var test1 = await changeText2()
+  // console.log(test1)
+  url = `https://yahoo-finance15.p.rapidapi.com/api/yahoo/qu/quote/${userInput}/financial-data`;
+  data = await fetch(url, options);
+  res = await data.json();
+  // return res
+  result = res.financialData;
+  char_data = [result.totalRevenue.longFmt, result.grossProfits.longFmt];
+  data_filter = [`Current Price: ${result.currentPrice.raw}`, `Earnings Growth: ${result.earningsGrowth.fmt}`, `Total Revenue: ${result.totalRevenue.fmt}`,
+    `Gross Profits: ${result.grossProfits.fmt}`, `Profit Margins: ${result.profitMargins.fmt}`];
+  // console.log(data_filter)
+
+  let new_data = '';
+  for (let i = 0; i < data_filter.length; i++) {
+    new_data += `<li>${data_filter[i]}</li>`;
+  }
+
+  const ctx = document.getElementById('myChart');
+  if (myChart != null) {
+    myChart.destroy();
+  }
+  myChart = new Chart(ctx, {
+
+    type: 'bar',
+    data: {
+      labels: ['Total Revenue', 'Gross Profits'],
+      datasets: [{
+        label: 'Profit Margin',
+        data: [parseInt(char_data[0]), parseInt(char_data[1])],
+        borderWidth: 1
+      }]
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
+  document.getElementById('apiResponse').innerHTML = new_data;
+}
diff --git a/client/styles.css b/client/styles.css
@@ -0,0 +1,66 @@
+
+@import 'https://fonts.googleapis.com/css?family=Ubuntu:300, 400, 500, 700';
+
+*, *:after, *:before {
+  margin: 0;
+  padding: 0;
+}
+
+.svg-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: -1;
+}
+
+body {
+  background: #fff;
+  color: #333;
+  font-family: 'Ubuntu', sans-serif;
+  position: relative;
+}
+
+h3 {
+  font-weight: 400;
+}
+
+header {
+  color: #fff;
+  padding-top: 10vw;
+  padding-bottom: 30vw;
+  text-align: center;
+}
+
+main {
+  background: linear-gradient(to bottom, #ffffff 0%, #dddee1 100%);
+  border-bottom: 1px solid rgba(0, 0, 0, .2);
+  padding: 10vh 0 80vh;
+  position: relative;
+  text-align: center;
+  overflow: hidden;
+}
+
+footer {
+  background: #dddee1;
+  padding: 5vh 0;
+  text-align: center;
+  position: relative;
+}
+
+small {
+  opacity: .5;
+  font-weight: 300;
+
+}
+
+@media only screen and (max-width: 736px){
+  /* Rules in here will only apply when a screen is the correct size */
+  /* check it out by using your developer tools to shrink your screen-size */
+  .container {
+    background-color: rgba(255, 255, 255, 0.65);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+}