quotes

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

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

Technologies

  • HTML
  • CSS
  • JavaScript
    <html lang="en">
  <head>
    <title>Quotes</title>
    <meta charset="utf-8"/>
    <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
   
    <link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Cardo%7CMontserrat" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="conten" >
    	<h4><i class="fa fa-quote-left" aria-hidden="true"></i>&nbsp &nbsp<span id="quote"></span></h4>
    	<p id="aut" >-&nbsp<span id="auth" ></span></p>
    	
	    	<button id="new" class="btn btn-default btn-primary">New quote</button>
      
	    	<button  href="https://twitter.com/intent/tweet?text=reda" id="tweet" target="_blank" class="btn btn-default btn-primary"><i class="fa fa-twitter" aria-hidden="true"></i></button>
      <p>
  by <a href="https://www.facebook.com/r.meskali" target="_blank">Reda Meskali</a>&nbsp &nbsp
        <a href="https://www.linkedin.com/in/reda-meskali-848747b2/" target="_blank"><i class="fa fa-linkedin"></i></a>
  </p>
        
	    
		</div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="script.js"></script>

  </body>


  
</html>

/*Downloaded from https://www.codeseek.co/redaaa/quotes-evoOoz */
    body{
  background-color: #999;
}

#buttons{
  margin: 0 auto;
}

.conten{
  margin: 50px auto;
  width: 510px;
  
  text-align: center;
  padding: 15px;
  padding-bottom: 5px;
  


  /*margin-bottom: 329px;*/
  margin-top: 250px;
  background-color: white;
  border-radius: 10px;
}
#aut{
  text-align: right;
  font-size: 13pt;
  font-weight: bold;
  font-family: 'Raleway', sans-serif;

}
#quote{
   font-size: 21pt;
   text-shadow: 0 0 1px black ;
}

footer{
  background:#ccc;
  
  bottom:0;
  width:100%;
  padding-top:50px;
  
}


p{
  font-size : 15pt;
}

#tweet{
  float: right;
  text-align: center;
  width: 8%;
  box-shadow: 0 0 5px black;
}
#new{
  float: left;
  text-align: center;
  width: 30%;
  box-shadow: 0 0 5px black;
}


/*Downloaded from https://www.codeseek.co/redaaa/quotes-evoOoz */
    function getRandomColor() {
    var letters = '0123456789ABC'; //darker colors for more visibility
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 13)];
    }
    return color;
}

$(document).ready(function() {
	var color = getRandomColor();
  	$("#quote").css('color',color);
  	$("body").css('background',color);
  	$(".btn-primary").css('background',color);
  	
	getQuote();
  $("#new").on("click", function() {
  	$(".conten").slideUp();

  	getQuote();
  	var color = getRandomColor();
  	$("#quote").css('color',color);
  	$("body").css({"background-color":color, "transition":"background-color 0.5s ease"});

  	$(".btn-primary").css('background',color);

  	
  	$(".conten").slideDown();
  });
  $('#tweet').click(function(){
    var addQuote=$('#quote').text();
    addQuote=addQuote.replace(/\s/g,'%20');	
    var tweetSource = $('#auth').text().replace(/\s/g,'%20');
    var tweetUrl = "https://twitter.com/intent/tweet?text="+addQuote+"%20-"+tweetSource;
    window.open(tweetUrl,"_blank");
  });
});


function getQuote()
{
	$.ajax({
    url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=movies', 
    type: 'GET', 
    data: {},
    dataType: 'json',
    success: function(data) { 
    	var Quote = data.quote;
  		var Source = data.author;
  		;
  		$("#quote").text(Quote);
  		$("#auth").text(Source);
  		
  	},
    error: function(err) { alert(err); },
    beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", "CkIqVpBisCmshRXpIuV4vVhKanyzp1lurIkjsnvdwKKzJmRwgb"); // Enter here your Mashape key
    }
});
}


Comments