Skip to content

Instantly share code, notes, and snippets.

@santosh
Created Aug 2, 2021
Embed
What would you like to do?
Fetching API, handing events, doing CSS animations.
<!DOCTYPE html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
[v-clock] {
display: none;
}
.highlight {
border: solid 3px red;
color: 'red'
}
.shooting-star-leave-to,
.shooting-star-enter {
transform: translateX(150px) rotate(30deg);
opacity: 0;
}
.shooting-star-enter-active,
.shooting-star-leave-active {
transition: all .5s ease;
}
.neo-list-leave-to,
.neo-list-enter {
opacity: 0;
transform: translateY(30px);
}
.neo-list-enter-active,
.neo-list-leave-active {
transition: all 1s linear;
}
.spin-enter-active {
animation: spin-steps 2s;
}
@keyframes spin-steps {
0% {
transform: scale(1) rotate(0)
}
50% {
transform: scale(10) rotate(360deg)
}
100% {
transform: scale(1) rotate(1080deg)
}
}
</style>
<div id="app">
<div class="container">
<div class="card mt-5">
<h2 class="card-header">Near-Earth
<transition name="spin" appear>
<span style="display: inline-block">Objects</span>
</transition>
</h2>
<transition name="shooting-star">
<div class="m-3" v-cloak v-if="numAsteroids > 0 && showSummary">
<p>showing {{ numAsteroids }} items</p>
<p>{{ closestObject }} has the shortest miss distance</p>
</div>
</transition>
<div class="m-3">
<a href="#" @click="showSummary = !showSummary">Show/hide summary</a>
</div>
<table class="table table-striped" :class="['table-dark', 'table-border']">
<thead class="thead-light">
<th>#</th>
<th>Name</th>
<th>Close Approach Date</th>
<th>Miss Distance</th>
<th>Remove</th>
</thead>
<tbody is="transition-group" tag="tbody" name="neo-list" v-cloak>
<tr v-for="(asteroid, index) in asteroids"
:key="asteroid.neo_reference_id"
:class="{ highlight: isMissingData(asteroid), 'shadow-sm': true }">
<td> {{ index+1 }} </td>
<td> {{ asteroid.name }} </td>
<td> {{ getCloseApproachDate(asteroid) }} </td>
<td>
<ul v-if="asteroid.close_approach_data.length > 0">
<li v-for="(value, key) in asteroid.close_approach_data[0].miss_distance">
{{ key }}: {{ value }}
</li>
</ul>
</td>
<td><button class="btn btn-warning" @click="remove(index)">remove</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
<script>
let apiKey = 'BxfX2Ho5Logh0lWk0AqY1MtZBE2SJVNGPLKfT4Ze'
let url = 'https://api.nasa.gov/neo/rest/v1/feed?start_date=2021-07-15&end_date=2021-07-15&api_key=' + apiKey;
let vm = new Vue({
el: '#app',
data: {
asteroids: [],
showSummary: true,
},
computed: {
numAsteroids() {
return this.asteroids.length;
},
closestObject() {
let neosHavingData = this.asteroids.filter(neo => neo.close_approach_data.length > 0)
let simpleNeos = neosHavingData.map(neo => {
return { name: neo.name, miles: neo.close_approach_data[0].miss_distance.miles }
});
let sortedNeos = simpleNeos.sort((a, b) => a.miles - b.miles)
return sortedNeos[0].name
}
},
methods: {
fetchAstroids() {
axios.get(url)
.then((res) => {
vm.asteroids = res.data.near_earth_objects['2021-07-15']
})
},
getCloseApproachDate(a) {
if (a.close_approach_data.length > 0) {
return a.close_approach_data[0].close_approach_date_full
} else {
return 'NA'
}
},
remove(index) {
this.asteroids.splice(index, 1)
},
isMissingData(asteroid) {
return asteroid.close_approach_data.length == 0
}
},
created() {
this.fetchAstroids()
},
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment