Hi campers, I seem to be having trouble with the communication between my HTML file and my JavaScript file. I’m trying to append raw data from an API to a div in my HTML and it is not working. I have tried using the jQuery on in a script tag within the HTML and it works! What could be going on?
Heres the codepen
Heres the HTML
<!Doctype html>
<html lang="en">
<head>
<!--Meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap and CSS-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<title>Random Quotes Generator</title>
<!--Font Awesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!--Javascript-->
<script src="scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body id="body">
<div class="container d-flex justify-content-center align-items-center w-50">
<div class="wrapper">
<div class="row header d-flex justify-content-center p-3">
<h2 class="">Quotes</h2>
</div>
<div class="quote-bg p-3 rounded">
<div>
<div class="quote-box p-3">data goes here</div>
<div class="author d-flex justify-content-end p-2">
</div>
</div>
<div class="row buttons p-3">
<div class="col-md-6">
<i class="fab fa-twitter fa-2x"></i>
</div>
<div class="col-md-6 d-flex justify-content-end">
<button type="button" class="btn btn-primary" id="random">Random</button>
</div>
</div>
</div>
<div class="footer d-flex justify-content-center p-3">
<p>by <a href="https://www.freecodecamp.org/erickmurage">murage</a> for <a href="https://www.freecodecamp.org/">FCC</a></p>
</div>
</div>
</div>
</body>
</html>
Heres the JavaScript
$(document).ready(function() {
$("#random").on("click", function() {
$.getJSON("http://quotes.stormconsultancy.co.uk/random.json", function(json) {
$(".quote-box").html(JSON.stringify(json));
});
});
});