Skip to content

Dan Grace / MPCS_52553_Winter_2020

Go to a project
Commit 51525ea2 by Dan Grace
Options

adding hw

parent 53e8b9f8
Inline Side-by-side
Showing with 236 additions and 2 deletions
.DS_Store
No preview for this file type
hw4/api.txt 0 → 100644
Generate API Key
Your API key for dgrace0@chicagobooth.edu is:
ex2TzMpdrJVFmPJGSevbiJJhR6Eje5Bcnw9dgxp2
You can start using this key to make web service requests. Simply pass your key in the URL when making a web request. Here's an example:
https://api.nasa.gov/planetary/apod?api_key=ex2TzMpdrJVFmPJGSevbiJJhR6Eje5Bcnw9dgxp2
For additional support, please contact us. When contacting us, please tell us what API you're accessing and provide the following account details so we can quickly find you:
Account Email: dgrace0@chicagobooth.edu
Account ID: ca345262-bb58-4346-9555-9b576b391d60
hw4/index.html
<!-- Your code goes here -->
\ No newline at end of file
<!-- Your code goes here -->
<!-- my api key is: ex2TzMpdrJVFmPJGSevbiJJhR6Eje5Bcnw9dgxp2 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>Asteroid API</title>
<style>
</style>
</head>
<body>
<div class="container p-2">
<div class="text-center">
<h1>Close Encounters!</h1>
</div>
</div>
<div class="container p-2">
<div class="text-center">
<img id="iframe1" src="" style="width:250px;height:250px;"></img>
</div>
</div>
<div class="container p-2">
<div class="text-center">
<button id="btn1" href="#" style="width:300px">Display Asteroids</button>
<button id="btn2" href="#" style="width:300px">Highlight The Hazardous Asteroids</button>
</div>
</div>
<div class="container p-2">
<div class="row mb-5">
<table id="t1" table class="table table-bordered">
<thead>
<tr>
<th>Ateroid</th>
<th>Hazardous</th>
<th>Miss Distance (Miles)</th>
<th>Maximum Estimated Diameter (Feet)</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- <p id="p">This is some text</p> -->
<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>
</body>
<script src="index.js"></script>
</html>
hw4/index.js 0 → 100644
// in the interest of academic integrity, i'd like to note that this build would not have been possible
// without referencing html that the instructor has provided us over previous weeks
// in particular, the table structure and methods for loading API data
// were largely inspired by the instructor's html designs supplied to students for
// hw3
// additionally, i did borrow code for handling which dates are fed to the API
// and i did borrow code for handling the table sort
// i have cited these sources in comments in this js file
// should there be any concerns about my use of these functions, i'll be happy to remove them from this submission
// thank you!
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#btn1").addEventListener('click', handleAsteroidClick)
document.querySelector("#btn2").addEventListener('click', handleHazardsClick)
})
// attribution and thanks are given to the following sites and sources
// they helped me handle the ability to calculate and format today's date and next week's date
// https://stackoverflow.com/questions/1025693/how-to-get-next-week-date-in-javascript
// https://stackoverflow.com/questions/23593052/format-javascript-date-as-yyyy-mm-dd
function thisweek(){
var today = new Date();
var thisweek = new Date(today.getFullYear(), today.getMonth(), today.getDate());
return thisweek;
}
function nextweek(){
var today = new Date();
var nextweek = new Date(today.getFullYear(), today.getMonth(), today.getDate()+7);
return nextweek;
}
today = thisweek()
sevendaysout = nextweek()
startdate = today.toISOString().split('T')[0]
stopdate = sevendaysout.toISOString().split('T')[0]
function handleAsteroidClick(event){
// const url = urlForAsteroid("2020-01-01","2020-01-02")
const url = urlForAsteroid(`${startdate}`,`${stopdate}`)
getAsteroidData(url)
}
function handleHazardsClick(event){
sortTable(1)
}
function urlForAsteroid(start,end){
const api_key_param = "api_key=ex2TzMpdrJVFmPJGSevbiJJhR6Eje5Bcnw9dgxp2"
const start_date = `${start}`
const end_date = `${end}`
const base_url = `https://api.nasa.gov/neo/rest/v1/feed`
const api_url = `${base_url}?start_date=${start}&end_date=${end}&${api_key_param}`
return api_url
}
function getAsteroidData(url) {
var table = document.getElementById("t1")
// clear anything out of the existing table
// there's got to be a better way!
table.innerHTML = "";
let new_row = table.insertRow(-1)
let new_cell_0 = new_row.insertCell(0)
let new_cell_1 = new_row.insertCell(1)
let new_cell_2 = new_row.insertCell(2)
let new_cell_3 = new_row.insertCell(3)
new_cell_0.innerHTML = "<b>Asteroid ID"
new_cell_1.innerHTML = "<b>Hazardous"
new_cell_2.innerHTML = "<b>Miss Distance (Miles)"
new_cell_3.innerHTML = "<b>Maximum Estimated Diameter (Feet)"
fetch(url).then((r) => r.json()).then((data) => {
for (x in data.near_earth_objects) {
for (y in data.near_earth_objects[x]){
// console.log(data)
var id = data.near_earth_objects[x][y].id
var hazard_status = data.near_earth_objects[x][y].is_potentially_hazardous_asteroid
var miss_distance = data.near_earth_objects[x][y].close_approach_data[0]["miss_distance"]["miles"]
var estimated_diameter_max = data.near_earth_objects[x][y].estimated_diameter["feet"]["estimated_diameter_max"]
let new_row = table.insertRow(-1)
let new_cell_0 = new_row.insertCell(0)
let new_cell_1 = new_row.insertCell(1)
let new_cell_2 = new_row.insertCell(2)
let new_cell_3 = new_row.insertCell(3)
new_cell_0.innerHTML = id
new_cell_2.innerHTML = (Math.round(miss_distance)).toLocaleString()
new_cell_3.innerHTML = (Math.round(estimated_diameter_max)).toLocaleString()
if (data.near_earth_objects[x][y].is_potentially_hazardous_asteroid === true){
new_cell_1.innerHTML = "yes"
}
else {
new_cell_1.innerHTML = "no"}
}
}
})
}
function urlForAPOD(resource){
const api_key_param = "api_key=ex2TzMpdrJVFmPJGSevbiJJhR6Eje5Bcnw9dgxp2"
const base_url = `https://api.nasa.gov/planetary/apod`
const api_url = `${base_url}?${api_key_param}`
showAPODURL(api_url)
}
function showAPODURL(url) {
fetch(url).then((r) => r.json()).then((data) => {
// console.log(data.url)
APODURL = data.url
document.getElementById('iframe1').src = `${APODURL}`;
})
}
urlForAPOD();
// attribution and thanks are given to the following sites and sources
// sorting a table was a non trivial pursuit, so i did use code from w3 to help
// my website achieve my desired functionality
// https://www.w3schools.com/howto/howto_js_sort_table.asp
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("t1");
switching = true;
dir = "desc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount ++;
} else {
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
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