I'm currently working on an API and I've managed to get it up and running, but now I'd like to add some style to it.
I've been attempting to change the style for variables such as title, country, status, and summary but haven't had much success. Could you provide a hint on how to accomplish this? I've tried several approaches without any luck.
Thank you!
// Creating an empty object to hold the functionality of our app
var app = {};
// Create an init method that will contain all the code necessary for app initialization
app.init = function(){
$('#subject').on('keyup', function(){
var subject = $(this).val().toLowerCase();
// Empty before we ask for results that were there so new results will show up
$('#showresults').empty();
app.getShow(subject);
});
};
// The getShow method will make an Ajax request to the API
app.getShow = function(query){
$.ajax({
url: 'http://api.tvmaze.com/search/shows?q=:query',
method: 'GET',
dataType: 'json',
data: {
ps: 20,
q: query,
format: 'json'
},
success: function(results){
console.log(results);
app.displayShow(results);
},
error: function(error){
console.log(error);
}
});
};
// The displayShow method will inject our art pieces into the DOM
app.displayShow = function(ShowArray){
// forEach is equivalent to a for loop in jQuery. It is used to loop over our array of shows
ShowArray.forEach(function(showObject){
// Set variables to hold the title, country, status, and summary of each show
var title = showObject.show.name ;
var country = showObject.show.network.country.name;
var status= showObject.show.status;
var summary = showObject.show.summary;
// Add all elements into this div
var showHtml = $('<div>').addClass('series').append(title + '<br>' + country + '<br>' + status + summary);
$('#showresults').append(showHtml);
});
};
$(function(){ // Short form of document.ready, which waits for all HTML documents to be loaded before running JS
app.init();
});<!-- CSS snippet code goes here --><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TV Show App</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1 id="page-title">TV Show App</h1>;
<form>
<label for="subject">Choose your show</label>
<input name="subject" id="subject"></input>
</form>
</div>
</header>
<main>
<div class="container" id="showresults"></div>
</main>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src="app.js"></script>
</body>
</html>