Skip to content

Instantly share code, notes, and snippets.

@garciamax

garciamax/tvshows api example

Created July 9, 2020 09:36
Show Gist options
  • Save garciamax/3ec4a3c84947f78b3f0ba092071f31db to your computer and use it in GitHub Desktop.
Save garciamax/3ec4a3c84947f78b3f0ba092071f31db to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tvshows api example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div id="app" class="row"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script>
const [pageType, selectedId] = window.location.search.split('=')
console.log(pageType, selectedId);
if(!pageType){
$.get('http://api.tvmaze.com/shows',shows=>{
const result = shows.map(show=>{
const {url, name, image:{medium}, summary, id} = show;
let item = '';
item += `<div class="card" style="width: 18rem;">`;
item += `<a href="${url}"><img src="${medium}" class="card-img-top" alt="${name}"></a>`;
item += `<div class="card-body">`;
item += `<h5 class="card-title">${name}</h5>`;
item += `<p class="card-text">${summary}</p>`;
item += `<a href="?episodes=${id}" class="btn btn-primary">Go somewhere</a>`;
item += `</div></div>`;
return item;
}).join('');
$('#app').append(result)
})
}
if(pageType.includes('episodes') && selectedId){
$.get(`http://api.tvmaze.com/shows/${selectedId}/episodes`,episodes =>{
let result = `<a class="btn btn-primary" href="/" role="button">back to shows</a>`;
result += episodes.map(episode=>{
const {url, name, image:{medium}, summary, number, season} = episode;
let item = '';
item += `<div class="card" style="width: 18rem;">`;
item += `<a href="${url}"><img src="${medium}" class="card-img-top" alt="${name}"></a>`;
item += `<div class="card-body">`;
item += `<h5 class="card-title">${name} (Season: ${season} Episode: ${number})</h5>`;
item += `<p class="card-text">${summary}</p>`;
item += `</div></div>`;
return item;
}).join('');
$('#app').append(result)
})
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment