Skip to content

Instantly share code, notes, and snippets.

@shashankvemuri

shashankvemuri/html_code.html

Created August 2, 2020 15:49
Show Gist options
  • Save shashankvemuri/8e18aa5a20990bc76ddc8e8b0b47a5aa to your computer and use it in GitHub Desktop.
Save shashankvemuri/8e18aa5a20990bc76ddc8e8b0b47a5aa to your computer and use it in GitHub Desktop.
Download ZIP
HTML Code
Raw
html_code.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>TradeView - Balance Sheet</title>
<script src="sort-table.js"></script>
<link rel="stylesheet" href="sort-table.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-cg6SkqEOCV1NbJoCu11+bm0NvBRc8IYLRGXkmNrqUBfTjmMYwNKPWBTIKyw9mHNJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
table.center {
margin-left:auto;
margin-right:auto;
}
.table-sortable th {
cursor: pointer;
}
.table-sortable .th-sort-asc::after {
content: "\25b4";
}
.table-sortable .th-sort-desc::after {
content: "\25be";
}
.table-sortable .th-sort-asc::after,
.table-sortable .th-sort-desc::after {
margin-left: 5px;
}
.table-sortable .th-sort-asc,
.table-sortable .th-sort-desc {
background: rgba(0, 0, 0, 0.1);
}
table{
width:100%;
}
.tbl-header{
background-color: rgba(255,255,255,0.3);
}
.tbl-content{
height:300px;
overflow-x:auto;
margin-top: 0px;
border: 1px solid rgba(255,255,255,0.3);
}
th{
padding: 20px 15px;
text-align: left;
font-weight: 500;
font-size: 12px;
color: #fff;
text-transform: uppercase;
}
td{
padding: 15px;
text-align: left;
vertical-align:middle;
font-weight: 300;
font-size: 12px;
color: #fff;
border-bottom: solid 1px rgba(255,255,255,0.1);
}
</style>
</head>
<body>
<nav>
<div class="logo">
<a href="{{ url_for('home') }}">
<img src="{{url_for('static', filename='img/logo.png')}}">
</a>
</div>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li><a class="hover" href="{{ url_for('home') }}">Home</a></li>
<li><a class="hover" href="{{ url_for('stockData') }}">Stock Data</a></li>
<li><a class="hover" href="{{ url_for('recommendations') }}">Recommendations</a></li>
<li><a class="hover" href="{{ url_for('technical_indicators') }}">Technical Indicators</a></li>
<li><a class="hover" href="{{ url_for('contact') }}">Contact</a></li>
<li><a class="hover" href="{{ url_for('about') }}">About</a></li>
<li><button class="login-button" href="#">Login</button></li>
<li><button class="join-button" href="#">Join</button></li>
</ul>
</nav>
<div style="padding-top: 105px;">
<h1 id="title" style="text-align: center;">
Balance Sheet for {{ company_name }}!
</h1>
<div class="tbl-header" style="overflow-x: auto; text-align: center; font-size: 24px;">
{% for table in tables %}
{{titles[loop.index]}}
{{ table|safe }}
{% endfor %}
</div>
<script>
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener('click', ()=>{
//Animate Links
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle("fade");
});
//Hamburger Animation
hamburger.classList.toggle("toggle");
});
function sortTableByColumn(table, column, asc = true) {
const dirModifier = asc ? 1 : -1;
const tBody = table.tBodies[0];
const rows = Array.from(tBody.querySelectorAll("tr"));
if (column !== 1) {
sortedRows = rows.sort((a, b) => {
const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
})
}
else {
sortedRows = rows.sort((a, b) => {
const aColPrice = parseFloat(a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim().replace('$', ''));
const bColPrice = parseFloat(b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim().replace('$', ''));
return aColPrice > bColPrice ? (1 * dirModifier) : (-1 * dirModifier);
})
}if (column !== 1) {
sortedRows = rows.sort((a, b) => {
const aColText = a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
const bColText = b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim();
return aColText > bColText ? (1 * dirModifier) : (-1 * dirModifier);
})
}
else {
sortedRows = rows.sort((a, b) => {
const aColPrice = parseFloat(a.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim().replace('$', ''));
const bColPrice = parseFloat(b.querySelector(`td:nth-child(${ column + 1 })`).textContent.trim().replace('$', ''));
return aColPrice > bColPrice ? (1 * dirModifier) : (-1 * dirModifier);
})
}
// Remove all existing TRs from the table
while (tBody.firstChild) {
tBody.removeChild(tBody.firstChild);
}
// Re-add the newly sorted rows
tBody.append(...sortedRows);
// Remember how the column is currently sorted
table.querySelectorAll("th").forEach(th => th.classList.remove("th-sort-asc", "th-sort-desc"));
table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-asc", asc);
table.querySelector(`th:nth-child(${ column + 1})`).classList.toggle("th-sort-desc", !asc);
}
document.querySelectorAll(".table-sortable th").forEach(headerCell => {
headerCell.addEventListener("click", () => {
const tableElement = headerCell.parentElement.parentElement.parentElement;
const headerIndex = Array.prototype.indexOf.call(headerCell.parentElement.children, headerCell);
const currentIsAscending = headerCell.classList.contains("th-sort-asc");
sortTableByColumn(tableElement, headerIndex, !currentIsAscending);
});
});
</script>
<script
src="{{ url_for('static',filename='js/boostraps.js') }}">
</script>
<script
src="{{ url_for('static',filename='js/bootstrap.min.js') }}">
</script>
<script
src="{{ url_for('static',filename='js/main.js') }}">
</script>
<script>
$(window).on("load resize ", function() {
var scrollWidth = $('.tbl-content').width() - $('.tbl-content table').width();
$('.tbl-header').css({'padding-right':scrollWidth});
}).resize();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment