Trial RQM

In this example below you will see how to do a Trial RQM with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by -Pey, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -Pey ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Trial RQM</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

   
<div class="container" id="quoteDisplay">
  <h1>Random Quotes</h1>
<div style="background-color:green" id="quote" class="well col-xs-12 message"></div>
    <br>
  <div class="col-xs-12 row text-center" >
    <button class="button" id="newQuote">New Quote</button>
      </div>
        </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/-Pey/trial-rqm-brzJax */
h1{
  color:green;
  font-family: serif, Monospace;
  font-size: 50px;
  text-align: center;
}
p{
 color: purple;
  font-size: 20px;
  text-align: center;
  }
#quote{
}
.button{
  color: green;
  background-color: silver;
  font-size: 24px;
  padding: 14px 40px;
  margin:auto;
  display:block;
  border-radius: 10px;
}


.button:active {
  background-color: gray;
  box-shadow: 0 6px ;
  
  }

.button:focus{
  outline:none;
}



/*Downloaded from https://www.codeseek.co/-Pey/trial-rqm-brzJax */

  $("#newQuote").on("click", function(){
    $.ajaxSetup({cache:false});
     $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(data){
  $(".message").html(data[0].content + " - " + data[0].title)
 });
    
    });

Comments