randomquotes.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      body{
        background-image:url("https://imgs.search.brave.com/AA7DJ52Rc8KkNTwIxNx1_rCCa5AHyc3l497R0DJyprI/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9kZXNp/Z25zaGFjay5uZXQv/d3AtY29udGVudC91/cGxvYWRzL3NlYXNj/YXBlLmpwZw");
        background-size:cover;
        font-size: 30px;
        font-weight:500;
      }
      .overall{
        margin-top:200px;
        margin-left:550px;
        margin-right:450px;
      }
      #author{
        margin-top:20px;
      }
      .generate{
        margin-top:100px;
        font-size:30px;
        background-color: transparent;
        border:none;

      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div class="overall">
    <div id="text"></div>
    <div id="author"></div>
    <button class="generate" onclick="function1()">Generate Quote</button>
  </div>
    <script>
      function function1(){   
        var url='https://dummyjson.com/quotes/random';
      let text=document.getElementById('text');
      let author=document.getElementById('author');
      $.getJSON(url,function(data){
       author.innerHTML="-"+data.author;
       text.innerHTML=data.quote;
    
      });
      }
    </script>
</body>
</html>