santosh/vue.html

## vue.html
<!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 = ''
  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>
	<!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 = ''
	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>