Skip to content

Instantly share code, notes, and snippets.

@Sarah-JJ

Sarah-JJ/Sarah's API Project.html

Last active February 10, 2018 14:06
Show Gist options
  • Save Sarah-JJ/8a9a06d935c53a30ab169ac3fed78e96 to your computer and use it in GitHub Desktop.
Save Sarah-JJ/8a9a06d935c53a30ab169ac3fed78e96 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Sarah's API Project.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Space Stuff♥</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Space-related News</a>
</nav>
<div class="album py-5 bg-light" id="div">
<div class="container">
<div class="row w-100 justify-content-center">
<div class="alert alert-secondary" role="alert">
<h5>Check out these awesome news about space from NASA:</h5>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" v-bind:src="image0" data-holder-rendered="true" style="height: 225px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">{{title0}}<div id="div0" style="display: none">{{content0}}</div></p>
<p class="card-text"> </p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button id="btn0" type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
<small class="text-muted">{{date0}}</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" v-bind:src="image1" data-holder-rendered="true" style="height: 225px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">{{title1}}
<div id="div1" style="display: none">{{content1}}</div></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button id="btn1" type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
<small class="text-muted">{{date1}}</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" v-bind:src="image2" data-holder-rendered="true" style="height: 225px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">{{title2}}<div id="div2" style="display: none">{{content2}}</div></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button id="btn2" type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
<small class="text-muted">{{date2}}</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" v-bind:src="image3" data-holder-rendered="true" style="height: 225px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">{{title3}}<div id="div3" style="display: none">{{content3}}</div></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button id="btn3" type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
<small class="text-muted">{{date3}}</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" v-bind:src="image4" data-holder-rendered="true" style="height: 225px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">{{title4}}<div id="div4" style="display: none">{{content4}}</div></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button id="btn4" type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
<small class="text-muted">{{date4}}</small>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&amp;bg=55595c&amp;fg=eceeef&amp;text=Thumbnail" alt="Thumbnail [100%x225]" v-bind:src="image5" data-holder-rendered="true" style="height: 225px; width: 100%; display: block;">
<div class="card-body">
<p class="card-text">{{title5}}<div id="div5" style="display: none">{{content5}}</div></p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button id="btn5" type="button" class="btn btn-sm btn-outline-secondary">View</button>
</div>
<small class="text-muted">{{date5}}</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- axios script -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>
var v = new Vue({
el:'#div',
data:{title0: '',
title1: '',
title2: '',
title3: '',
title4: '',
title5: '',
title6: '',
title7: '',
title8: '',
title9: '',
image0: '',
image1: '',
image2: '',
image3: '',
image4: '',
image5: '',
image6: '',
image7: '',
image8: '',
image9: '',
content0:'',
content1:'',
content2:'',
content3:'',
content4:'',
content5:'',
content6:'',
content7:'',
content8:'',
content9:'',
date0:'',
date1:'',
date2:'',
date3:'',
date4:'',
date5:'',
date6:'',
date7:'',
date8:'',
date9:''
//arr: [],
// count: 10,
// obj: [{seq: 1}, {seq: 1}, {seq: 1}]
},
methods:{
view: function(id){
}
}
});
axios.get("https://api.nasa.gov/planetary/apod?api_key=16C7Yk6RNghgMeUBJulMgttxbZygEIEnnpz3mmte&count=10").then(function(response){
// var item = {title: '', image:'', content:''};
console.log(response);
// for(var i=0; i<response.data.length; i++){
// v.arr[i] = response.data[i];
// console.log(v.arr[i].title);
// }
v.title0 = response.data[0].title;
v.image0 = response.data[0].url;
v.date0 = response.data[0].date;
v.content0 = response.data[0].explanation;
v.title1 = response.data[1].title;
v.image1 = response.data[1].url;
v.date1 = response.data[1].date;
v.content1 = response.data[1].explanation;
v.title2 = response.data[2].title;
v.image2 = response.data[2].url;
v.date2 = response.data[2].date;
v.content2 = response.data[2].explanation;
v.title3 = response.data[3].title;
v.image3 = response.data[3].url;
v.date3 = response.data[3].date;
v.content3 = response.data[3].explanation;
v.title4 = response.data[4].title;
v.image4 = response.data[4].url;
v.date4 = response.data[4].date;
v.content4 = response.data[4].explanation;
v.title5 = response.data[5].title;
v.image5 = response.data[5].url;
v.date5 = response.data[5].date;
v.content5 = response.data[5].explanation;
});
$(function(){
$('#btn0').on('click', function(){
$('#div0').toggle();
});
$('#btn1').on('click', function(){
$('#div1').toggle();
});
$('#btn2').on('click', function(){
$('#div2').toggle();
});
$('#btn3').on('click', function(){
$('#div3').toggle();
});
$('#btn4').on('click', function(){
$('#div4').toggle();
});
$('#btn5').on('click', function(){
$('#div5').toggle();
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment