Quotes

index.html

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
<div class="box1 ">
  <div class="row"> 
  <div class = "col-xs-1 col-sm-4"> </div> <!--resize-->
    <div class="col-xs-10 col-sm-4 container-fluid box2"> 
    <!-- quote-->
    <div class = "row text-center" id="quote">
      <div class = "col-xs-12">
          <p id="quoteText">“Passion comes after you put in the hard work to become excellent at something valuable, not before. In other words, what you do for a living is much less important than how you do it.” </p>
      </div>
    </div>
    <!--author -->
    <div class = "row" >
      <div class = "col-xs-12" id="author">
        <p  class = "text-right" id = "authorText" > - Cal Newport </p>
      </div>
    <!--buttons -->
    <div class = "row">
      <div class = "col-xs-6" id="contSocialQuote">  
         <a id = "btnTwitter" class="btn  btn-social-icon btn-lg btn-twitter "><span class="fa fa-twitter"></span></a>
         <a id = "btnLinkedin" class="btn btn-social-icon  btn-lg btn-linkedin"><span class="fa fa-linkedin "></span></a>
      </div>  
      <div class = "col-xs-6" id="contBtnQuote">
        <a id = "btnQuote" class="btn"> <p class= "f">Next</p></a>
      </div>
    </div>
   </div>
    </div>
      <div class = "col-xs-1 col-sm-4">  
    </div>
    </div>
    <div col-xs-12 col-sm-12 id="owner">
    <a href="https://codepen.io/eddyrene/#">By eddyrene</a>    
    </div>
  
</div>

quotes.markdown

Quotes

A Pen by eddy on CodePen.

License.

script.js

var listData;
function getRamdom(ini,fin){
  return  ini + Math.floor(Math.random() * fin);
}

function readJson(){
 return $.ajax({
    url: 'https://gist.githubusercontent.com/eddyrene/705a11b6e992341a7e12c652469caa0f/raw/c131290067e19e96a98b28269988306410d21085/quotes.json', 
    success: function(data) {
         listData = JSON.parse(data);
      }
    }); 
}
function execute(){
     var size = listData.quotes.length;
     var r = getRamdom(0,size-1);
     var ramdom = listData.quotes[r];
     $('#quoteText').text(ramdom.quote);
     $('#authorText').text(ramdom.author);
}
$(document).ready(function() {
  var elected;
  readJson().then(() => {
    execute();
  });
  $("#btnQuote").on("click", function() {      
    execute();
  });
  $("#btnTwitter").on("click", function() {
    var url = "https://codepen.io/eddyrene/pen/PRyXpd";
    var text = $('#quoteText').text() + " -   "+ $('#authorText').text();
    window.open('http://twitter.com/share?url='+encodeURIComponent(url)+'&text='+encodeURIComponent(text), '', 'left=0,top=0,width=550,height=450,personalbar=0,toolbar=0,scrollbars=0,resizable=0');
  });
  $("#btnLinkedin").on("click", function() {
    var url = "https://codepen.io/eddyrene/pen/PRyXpd";
    var text = $('#quoteText').text() + " -   "+ $('#authorText').text();
    window.open('http://www.linkedin.com/shareArticle?mini=true&url='+encodeURIComponent(url)+'&text='+encodeURIComponent(text), '', 'left=0,top=0,width=550,height=450,personalbar=0,toolbar=0,scrollbars=0,resizable=0');
  });
  
  
  });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.css

:root {
    --main-bg-color: coral;
}
body{ 
  background-color: var(--main-bg-color);
}
.box1{
  margin-top:100px;
  background-color: var(--main-bg-color);
  margin-right: 0px;
  margin-left: 0px;
}
.box2{
  background-color: white;
  border-radius: 10px;
}
#title{
  color: green;
  font-family: 'PT Sans', sans-serif;
}
#quote {
  font-size: 25px;
  font-family: 'Roboto', sans-serif;
  font-style:500;
  color: coral;
  margin-top:50px;
}
#author{
  font-size: 25px;
  color: grey;
  font-style:italic;
}

#contSocialQuote{
  
}
#contBtnQuote{
  text-align:right;
}
#btnQuote{
  font-size: 20px;
  font-weight:600;
}
#owner{
  margin-top:20px;
  margin-bottom:20px;
  text-align:center;
}
#owner a{
  color: white;
  font-size: 15px;
}
.row{
  margin-left:0px;
  margin-right:0px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />