<div class="outer-container">
           <div class="heading">
                   <h3>Chuck Norris Facts - Select your category</h3>
                  
                       <select id="category">
                            <option value="all">All</option>
                            <option value="animal">Animal</option>
                            <option value="career">Career</option>
                            <option value="celebrity">Celebrity</option>
                            <option value="explicit">Explicit</option>
                            <option value="fashion">Fashion</option>
                            <option value="food">Food</option>
                            <option value="history">History</option>
                            <option value="money">Money</option>
                            <option value="movie">Movie</option>
                            <option value="music">Money</option>
                            <option value="political">Political</option>
                            <option value="religion">Religion</option>
                            <option value="science">Science</option>
                            <option value="sport">Sport</option>
                            <option value="travel">Travel</option>
                        </select>
                    
           </div>
           <div class="display_facts">
                <img src="" id="icon" />
                <p id="quote">Author</p>
           </div>
            <button id="generate">Generate</button>
       </div>

const generateQuote = function() {
   let url;
   let category =  document.getElementById("category").value;

   if(category !== "all") {
     url ="https://api.chucknorris.io/jokes/random?category=" + category;
   } else {
        url ="https://api.chucknorris.io/jokes/random";
   }

    fetch(url)
    .then(function(response) {
        return response.json(); 
    }) // Getting the raw JSON data
    .then(function(data) {
  
        // Storing the quotes internally upon 
        // successful completion of request
        this.data = data; 
  
        // Displaying the quote When the Webpage loads
        console.log(this.data);
        document.getElementById("icon").src = this.data.icon_url;
        document.getElementById("quote").innerHTML = this.data.value;
}).catch();

}
window.onload = function() {
    generateQuote();
    document.getElementById("generate").addEventListener('click', generateQuote);
}