-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feedback #1
base: feedback
Are you sure you want to change the base?
Feedback #1
Changes from 4 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
<!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" /> | ||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | ||
<link | ||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" | ||
rel="stylesheet" | ||
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" | ||
crossorigin="anonymous" | ||
/> | ||
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" /> | ||
<title>Company Info</title> | ||
<link rel="stylesheet" href="./css/style.css" /> | ||
</head> | ||
<body> | ||
<nav class="navbar bg-dark"> | ||
<div class="container-fluid"> | ||
<a class="navbar-brand" href="./index.html"> | ||
<img | ||
src="./images/logo.png" | ||
alt="Logo" | ||
width="150" | ||
height="75" | ||
class="d-inline-block align-text-top" | ||
/> | ||
</a> | ||
<div class="ticker-container"> | ||
<ul class="ticker-list"></ul> | ||
</div> | ||
<a class="nav-link" href="/index.html">Home</a> | ||
</div> | ||
</nav> | ||
<h1 id="h1"></h1> | ||
<div class="container-fluid" id="infoDiv"></div> | ||
<div class="container-fluid" id="companyName"></div> | ||
<div class="container-fluid" id="companyPrice"></div> | ||
<div class="container-fluid" id="companyChanges"></div> | ||
<div class="container-fluid" id="companyUrl"></div> | ||
<div class="container-fluid" id="companyDescription"></div> | ||
<div id="companyName"></div> | ||
<div class="container-fluid" id="chartContainer"> | ||
<canvas id="myChart" width="400" height="400"></canvas> | ||
</div> | ||
<script src="./js/company.js"></script> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
html { | ||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, | ||
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; | ||
} | ||
body { | ||
margin: 0px; | ||
height: 1vh; | ||
color: white; | ||
} | ||
|
||
html { | ||
background-color: #2b2b2b; | ||
color: white; | ||
border: none; | ||
} | ||
a, | ||
li, | ||
ul, | ||
h1 { | ||
color: white !important; | ||
text-decoration: none !important; | ||
font-weight: 400; | ||
} | ||
|
||
input { | ||
background-color: #2b2b2b; | ||
color: white; | ||
border: none; | ||
} | ||
button { | ||
margin-top: 10px !important; | ||
background-color: #2b2b2b; | ||
border: none; | ||
color: white; | ||
} | ||
p:not() { | ||
color: white; | ||
display: none; | ||
} | ||
#loading { | ||
} | ||
input { | ||
border: 1px white solid; | ||
border-radius: 10px; | ||
} | ||
#searchDiv { | ||
background-color: #ffd829; | ||
height: 100vh; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
} | ||
.text-success:after { | ||
content: ""; | ||
display: inline-block; | ||
width: 0; | ||
height: 0; | ||
border-top: 4px solid transparent; | ||
border-bottom: 4px solid transparent; | ||
border-left: 5px solid green; | ||
margin-left: 5px; | ||
transform: rotate(42deg); | ||
} | ||
.text-danger:after { | ||
content: ""; | ||
display: inline-block; | ||
width: 0; | ||
height: 0; | ||
border-left: 4px solid transparent; | ||
border-right: 4px solid transparent; | ||
border-top: 6px solid red; | ||
margin-left: 5px; | ||
transform: rotate(4deg); | ||
} | ||
#chartContainer { | ||
height: 500px; | ||
width: 500px; | ||
} | ||
.ticker-container { | ||
overflow: hidden; | ||
white-space: nowrap; | ||
height: 15px; | ||
} | ||
|
||
.ticker-list { | ||
display: inline-block; | ||
margin: 0; | ||
padding: 0; | ||
animation: ticker 10000s linear infinite; | ||
} | ||
|
||
@keyframes ticker { | ||
0% { | ||
transform: translateY(0); | ||
} | ||
100% { | ||
transform: translateY(-100%); | ||
} | ||
} | ||
|
||
@media (max-width: 767px) { | ||
#searchDiv { | ||
height: 10em; | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" /> | ||
<link rel="stylesheet" href="./css/style.css" /> | ||
<link | ||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" | ||
rel="stylesheet" | ||
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" | ||
crossorigin="anonymous" | ||
/> | ||
<link rel="shortcut icon" href="./favicon.png" type="image/x-icon" /> | ||
<title>.dotstocks.com</title> | ||
</head> | ||
<body> | ||
<nav class="navbar bg-dark"> | ||
<div class="container-fluid"> | ||
<a class="navbar-brand" href="./index.html"> | ||
<img | ||
src="./images/logo.png" | ||
alt="Logo" | ||
width="150" | ||
height="75" | ||
class="d-inline-block align-text-top" | ||
/> | ||
</a> | ||
<div class="ticker-container"> | ||
<ul class="ticker-list"></ul> | ||
</div> | ||
</div> | ||
</nav> | ||
<div class="container-fluid"> | ||
<div class="row"> | ||
<div class="col-8" id="resultsDiv"> | ||
<h1>.your_search_results:</h1> | ||
<p id="loading">loading...</p> | ||
</div> | ||
<div class="col-4" id="searchDiv"> | ||
<h3>.search_NASDAQ_stocks:</h3> | ||
<input type="textbox" id="searchBox" /> | ||
<button type="button" id="searchButton">_search</button> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="container"></div> | ||
|
||
<script src="./js/searchResults.js"></script> | ||
<script src="./js/searchForm.js"></script> | ||
<script src="./js/marquee.js"></script> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,99 @@ | ||
const queryParamOfThePage = new URLSearchParams(window.location.search).get( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. good usage of URLSearchParams |
||
"symbol" | ||
); | ||
const endPointLink = `https://stock-exchange-dot-full-stack-course-services.ew.r.appspot.com/api/v3/company/profile/${queryParamOfThePage}`; | ||
const chartEndPointLink = `https://stock-exchange-dot-full-stack-course-services.ew.r.appspot.com/api/v3/historical-price-full/${queryParamOfThePage}?serietype=line`; | ||
|
||
const infoDiv = document.getElementById("infoDiv"); | ||
const companyNameDiv = document.getElementById("companyName"); | ||
const companyUrlDiv = document.getElementById("companyUrl"); | ||
const companyDescriptionDiv = document.getElementById("companyDescription"); | ||
const companyPriceDiv = document.getElementById("companyPrice"); | ||
const companyChangeDiv = document.getElementById("companyChanges"); | ||
const chartDraw = document.getElementById("myChart").getContext("2d"); | ||
|
||
const h1 = document.getElementById("h1"); | ||
h1.textContent = `Info about ${queryParamOfThePage}`; | ||
|
||
fetch(endPointLink) | ||
.then((response) => response.json()) | ||
.then((data) => { | ||
let changesNegPoz = | ||
data.profile.changesPercentage > 0 ? "text-success" : "text-danger"; | ||
companyNameDiv.innerHTML = `<strong>Company Name: </strong>${data.profile.companyName}`; | ||
companyPriceDiv.innerHTML = `<strong>Price: </strong>${data.profile.price}$`; | ||
companyChangeDiv.innerHTML = `<strong>Latest Changes: </strong><span class="${changesNegPoz}">${data.profile.changesPercentage}`; | ||
companyUrlDiv.innerHTML = `<strong>URL: </strong><a href="${data.profile.website}">${data.profile.website}</a>`; | ||
companyDescriptionDiv.innerHTML = `<strong>Description: </strong>${data.profile.description}`; | ||
const logoImg = document.createElement("img"); | ||
logoImg.src = `${data.profile.image}`; | ||
logoImg.alt = "Company Logo"; | ||
logoImg.width = 100; | ||
logoImg.height = 100; | ||
logoImg.style.float = "right"; | ||
infoDiv.appendChild(logoImg); | ||
}) | ||
.catch((error) => console.error(error)); | ||
|
||
async function loadData() { | ||
try { | ||
const response = await fetch(chartEndPointLink); | ||
const data = await response.json(); | ||
const prices = data.historical.map((d) => d.close); | ||
const dates = data.historical.map((d) => d.date); | ||
const chart = new Chart(chartDraw, { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. good usage of charts package |
||
type: "bar", | ||
data: { | ||
labels: dates, | ||
datasets: [ | ||
{ | ||
label: "Close", | ||
data: prices, | ||
backgroundColor: "rgba(255,99,132,0.2)", | ||
borderColor: "rgba(255,99,132,1)", | ||
borderwidth: 0.5, | ||
borderWidth: 1, | ||
pointRadius: 2, | ||
pointHoverRadius: 4, | ||
}, | ||
], | ||
}, | ||
options: { | ||
scales: { | ||
y: { | ||
beginAtZero: true, | ||
}, | ||
}, | ||
}, | ||
}); | ||
} catch (error) { | ||
console.error(error); | ||
} | ||
} | ||
|
||
loadData(); | ||
|
||
const tickerList = document.querySelector(".ticker-list"); | ||
function MarqueeList() { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. since this function is alredy written in script.js - instead of rewriting it, use another file for the shared logic (function and variables) |
||
const tickerEndpoint = | ||
"https://stock-exchange-dot-full-stack-course-services.ew.r.appspot.com/api/v3/quotes/nyse?exchange=NASDAQ"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. use baseURL var (DRY) |
||
fetch(tickerEndpoint) | ||
.then((response) => response.json()) | ||
.then((data) => { | ||
data.forEach((item) => { | ||
const changesNegPoz = | ||
item.changesPercentage > 0 ? "text-success" : "text-danger"; | ||
const listItem = document.createElement("li"); | ||
listItem.innerHTML = ` | ||
<span class="ticker-item">${item.symbol}: <span class="ticker-item-price ${changesNegPoz}">${item.price}</span> (${item.changesPercentage}%)</span> | ||
|
||
`; | ||
tickerList.appendChild(listItem); | ||
}); | ||
}) | ||
.catch((error) => { | ||
console.error("Error fetching ticker data:", error); | ||
}); | ||
} | ||
|
||
MarqueeList(); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
const tickerList = document.querySelector(".ticker-list"); | ||
function MarqueeList() { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. where is the class? |
||
const tickerEndpoint = | ||
"https://stock-exchange-dot-full-stack-course-services.ew.r.appspot.com/api/v3/quotes/nyse?exchange=NASDAQ"; | ||
fetch(tickerEndpoint) | ||
.then((response) => response.json()) | ||
.then((data) => { | ||
data.forEach((item) => { | ||
const changesNegPoz = | ||
item.changesPercentage > 0 ? "text-success" : "text-danger"; | ||
const listItem = document.createElement("li"); | ||
listItem.innerHTML = ` | ||
<span class="ticker-item">${item.symbol}: <span class="ticker-item-price ${changesNegPoz}">${item.price}</span> (${item.changesPercentage}%)</span> | ||
|
||
`; | ||
tickerList.appendChild(listItem); | ||
}); | ||
}) | ||
.catch((error) => { | ||
console.error("Error fetching ticker data:", error); | ||
}); | ||
} | ||
|
||
MarqueeList(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the input and submit button should be created inside the searchForm class