Loading api or something else

JavaScript
1

I have the problem the api or something else i`m doing wrong. I need somebody to tell me what to do :

My code so far

 <div class="container-fluid">
  <h1 class="text-center text-danger">Random Quote</h1>
  
  <div class="row">
    <button  id="quote-button">
      <div class="col-md-12 text-quote">
        Click me for random quote
      </div>
    </button>
  </div>
 </div> 
</div>
    <script src="//static.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script type="module">
      $("#quote-button").on("click", function(){
  //$(".text-quote").html("Here is the message");
  $.getJSON("https://gist.githubusercontent.com/signed0/d70780518341e1396e11/raw/2a7f4af8d181a714f9d49105ed57fafb3f450960/quotes.json", function(json){
    var textHtml = "";
    json.forEach(function(val){
      var keys = Object.keys(val);
      textHtml += "<div class=\"single-quote\">";
      keys.forEach(function(key){
        textHtml += key + val[key] + "<br>";
      });
      textHtml += "</div><br>";
    });
    $(".text-quote").html(textHtml);
  });
});

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:59.0) Gecko/20100101 Firefox/59.0.

Link to the challenge:
https://www.freecodecamp.org/challenges/make-object-properties-private

2

Try separating the div element from the “Click me for random quote” button. something like this

<div class="row">
 <div class="col-md-12 text-quote">
        
      </div>
    <button  id="quote-button">Click me for random quote
    </button>
  </div>
3