Created
October 19, 2018 00:01
-
-
Save nick3499/feec24c9481a67f37ae0209a72d931d1 to your computer and use it in GitHub Desktop.
Vue.js: Get Latest Spacex Mission Details: table, JSON
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="description" content="Latest SpaceX Mission details with description."> | |
<title>Spacex Mission | Latest</title> | |
<link href="https://fonts.googleapis.com/css?family=Rokkitt" rel="stylesheet"> | |
<style> | |
body { | |
font-family: 'Rokkitt', serif; | |
margin: 0; | |
} | |
table.darkTable { | |
border: 2px solid #000000; | |
background-color: #515151; | |
border-collapse: collapse; | |
} | |
table.darkTable td { | |
border: 1px solid #4A4A4A; | |
padding: 6px 6px; | |
font-size: 20px; | |
color: #FFFF22; | |
} | |
table.darkTable tr:nth-child(even) { | |
background: #000000; | |
} | |
h1 { | |
margin-left: 50px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="app"> | |
<h1><span style="color:#0000ff">SpaceX</span> | Latest Mission | {{ new Date(results.launch_date_unix * 1000).toDateString() }}</h1> | |
<table class="darkTable"> | |
<tr><td width=130>Mission name:</td><td width=300>{{ results.mission_name }}</td><td width=130>Flight number:</td><td width=500>{{ results.flight_number }}</td></tr> | |
<tr><td>Rocket name:</td><td>{{ results.rocket.rocket_name }}</td><td>Rocket type:</td><td>{{ results.rocket.rocket_type }}</td></tr> | |
<tr><td>Landing type:</td><td>{{ results.rocket.first_stage.cores[0].landing_type }}</td><td>Landing vehicle:</td><td>{{ results.rocket.first_stage.cores[0].landing_vehicle }}</td></tr> | |
<tr><td>Customer(s):</td><td>{{ results.rocket.second_stage.payloads[0].customers[0] }}</td><td>Nationality:</td><td>{{ results.rocket.second_stage.payloads[0].nationality }}</td></tr> | |
<tr><td>Payload type:</td><td>{{ results.rocket.second_stage.payloads[0].payload_type }}</td><td>Manufacturer</td><td>{{ results.rocket.second_stage.payloads[0].manufacturer }}</td></tr> | |
<tr><td>Orbit:</td><td>{{ results.rocket.second_stage.payloads[0].orbit }}</td><td>Orbit regime:</td><td>{{ results.rocket.second_stage.payloads[0].orbit_params.regime }}</td></tr> | |
<tr><td>Orbital system:</td><td>{{ results.rocket.second_stage.payloads[0].orbit_params.reference_system }}</td><td>Telemetry:</td><td>ref.: <a href="https://www.flightclub.io/result/2d?code=SAOCOM1A">flightclub.io</a></td></tr> | |
<tr><td>Launch site:</td><td>{{ results.launch_site.site_name_long }}</td><td>Details:</td><td>{{ results.details }}</td></tr> | |
</table> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script> | |
<script> | |
const url = 'https://api.spacexdata.com/v3/launches/latest' | |
const vm = new Vue({ | |
el: '#app', | |
data: { | |
results: [] | |
}, | |
mounted() { | |
axios.get(url).then(response => { | |
this.results = response.data | |
}) | |
} | |
}) | |
</script> | |
</body> | |
</html> | |
<!-- $ sudo python3 -m http.server 8080 --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
demo --> https://nick3499.github.io/app/spacex.html
Reference links: