added nav bar

This commit is contained in:
Joshua Hsueh 2021-01-31 00:29:25 -05:00
parent fab6969e78
commit a838e0e80d
4 changed files with 73 additions and 1 deletions

View File

@ -14,6 +14,21 @@
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

View File

@ -5,7 +5,7 @@ import Bank from "./components/Bank";
import Profile from "./components/Profile"; import Profile from "./components/Profile";
import Browse from "./components/Browse"; import Browse from "./components/Browse";
import Login from "./components/Login"; import Login from "./components/Login";
import Nav from "./components/Nav";
import "./App.css"; import "./App.css";
function App() { function App() {
@ -28,6 +28,7 @@ function App() {
return ( return (
<div className="App"> <div className="App">
<BrowserRouter> <BrowserRouter>
<Nav />
<Switch> <Switch>
<Route component={Bank} path="/banking" /> <Route component={Bank} path="/banking" />
<Route component={Browse} path="/browse" /> <Route component={Browse} path="/browse" />

View File

@ -43,6 +43,17 @@ const Browse = (props) => {
id="stocksearch" id="stocksearch"
placeholder="Search stock..." placeholder="Search stock..."
/> />
<h4 class="h4">
${(stockChartYValues[0] - stockChartYValues[1]).toFixed(2)}
</h4>
<h4 class="h4">
{(
((stockChartYValues[0] - stockChartYValues[1]) /
stockChartYValues[1]) *
100
).toFixed(2)}
%
</h4>
<button <button
class="btn" class="btn"
onClick={() => setStock(document.getElementById("stocksearch").value)} onClick={() => setStock(document.getElementById("stocksearch").value)}

View File

@ -0,0 +1,45 @@
import React, { useState, useEffect } from "react";
const Nav = (props) => {
return (
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link text-white" href="/">
Portfolio <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/profile">
Profile <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/banking">
Bank
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="/browse">
Browse
</a>
</li>
</ul>
</div>
</nav>
);
};
export default Nav;