Skip to content

Dan Grace / MPCS_52553_Winter_2020

Go to a project
Commit 33391d2a by Dan Grace
Options

adding hw3

parent 4564d4fe
Inline Side-by-side
Showing with 56 additions and 6 deletions
hw3/.DS_Store 0 → 100644
File added
hw3/bikes.html
......@@ -15,6 +15,7 @@
}
</style>
</head>
<body>
<div class="container mt-5">
......@@ -26,13 +27,14 @@
<div class="row">
<div class="col mr-4">
<p>Area:
<select>
<option value="all">All</option>
<option value="loop">Loop</option>
<option value="uchicago">University of Chicago</option>
<option value="north">North Side</option>
</select>
</p>
<div class="row">
<div class="col">
<table id="stations" class="table table-striped border">
......@@ -66,11 +68,9 @@
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="bikes.js"></script>
</body>
</html>
hw3/bikes.js 0 → 100644
const icons = document.querySelectorAll(".fave")
var i = 1
for (item of icons){
item.setAttribute("id",i)
i=i+1
item.addEventListener("click",handleClick)
}
function handleClick(event) {
console.log(event)
var table = document.getElementById("favorites")
var row_number = event.target.getAttribute("id")
const stations = document.querySelectorAll("#stations")
var bike_station = document.getElementById("stations").rows[row_number].cells[1].textContent
if (event.target.innerHTML === "\u2661"){
event.target.innerHTML = "&#9829"
let new_row = table.insertRow(-1)
let new_cell = new_row.insertCell(0)
new_cell.innerHTML = bike_station
}
else {
event.target.innerHTML = "&#9825";
for (var j = 0, row; row = table.rows[j]; j++) {
console.log(row.textContent)
if (row.textContent === bike_station){
table.deleteRow(j)
}
}
}
}
document.querySelector("select").addEventListener("change",handleFilter)
function handleFilter() {
var table = document.getElementById("stations")
var filter_value = document.getElementsByTagName("select")[0].value
for (var j = 0, row; row = table.rows[j]; j++){
var row_value = row.className
console.log(row_value)
console.log(filter_value)
if (row_value === filter_value || filter_value === "all"){
row.style.display = "";
}
else {
row.style.display = "none"
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment