Islamic Quote Generator

index.html

#104957

<div class="container-fluid">
  <div class="row">

    <div class="col-xs-8 col-xs-offset-2 col-md-6 col-md-offset-3">
      <h1 id="judul">Islamic Quote Generator</h1>
    </div>

    <div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-3">
      <blockquote>
        <p id="quote">Click "Get Quote" to get your quote of the day</p>
      </blockquote>
    </div>

    <div class="col-xs-12 col-md-6 col-md-offset-3">
      <a class="btn btn-default btn-md" id="getQuote"> Get Quote</a>
      
      <a  target="_blank" href="https://twitter.com/intent/tweet?text=The%20strong%20person%20is%20not%20the%20good%20wrestler.%20Rather%2C%20the%20strong%20person%20is%20the%20one%20who%20controls%20himself%20when%20he%20is%20angry%20~%20Prophet%20Muhammad" id="tweet" class="btn btn-info">Tweet</a>
    </div>
  </div>
</div>

islamic-quote-generator.markdown

Islamic Quote Generator

It's one of freecodecamp zipline challenge. Originally it was quote generator. But i improvise it to Islamic Quote Generator

A Pen by shariq mohammad on CodePen.

License.

script.js

$(document).ready(function () {
  "use strict";
  
  var tweetQuote;
  
  var quotes = [
  'The strong person is not the good wrestler. Rather,the strong person is the one who controls himself when he is angry ~ Prophet Muhammad',
  'Whoever loves to meet God, God loves to meet him ~ Prophet Muhammad Pbuh', 
  'There is a polish for everything that takes away rust, and the polish for the heart is the remembrance of God ~ Prophet Muhammad Pbuh',
  'You will not enter paradise until you have faith. And you will not complete your faith until you love one another ~ Prophet Muhammad Pbuh',
  'The worldly comforts are not for me. I am like a traveler, who takes rest under a tree in the shade and then goes on his way ~ Prophet Muhammad Pbuh',
  'Strive always to excel in virtue and truth. ~ Prophet Muhammad Pbuh',
  'Verily, God is Compassionate and is fond of compassion, and He gives to the compassionate what He does not give to the harsh. ~ Prophet Muhammad',
  'The greatest of wealth is the richness of the soul ~ Prophet Muhammad Pbuh',
  'Who is the most favored of God? He from whom the greatest good comes to His creatures ~ Prophet Muhammad Pbuh',
  'It is better to sit alone than in company with the bad, and it is better still to sit with the good than alone. It is better to speak to a seeker of knowledge than to remain silent, but silence is better than idle words ~ Prophet Muhammad Pbuh'];

  
  function randomize() {
    var rand = Math.floor(Math.random() * quotes.length);
    tweetQuote = encodeURIComponent(quotes[rand]);
    
    
    $("#quote").fadeOut(150, function () {
      $(this).text(quotes[rand]);
    }).fadeIn(150);

    return rand;
  }
  
  $('#getQuote').click(function () {
    var rand = randomize();
  });

  $('#tweet').click(function(){
    $("#tweet").attr("href", "https://twitter.com/intent/tweet?text=" + tweetQuote );
  })

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

html {
  height: auto;
  min-height: 100%;
  position: relative;
}

body{
  background:url(http://www.springfieldmosque.com/wp-content/uploads/2013/03/Islamic+Designs_16x9.jpg) no-repeat center center fixed;
  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.container-fluid{
  text-align:center;
}

#judul{
    font-weight:bold;
    text-align:center;
    font-family:rockwell;
}

blackquote footer{
  text-align:right;
}

blockquote{
  margin-top:25px;
  margin-bottom:20px;
  border: 0;
  border-radius: 10px;
  background-color:rgba(255,255,255,0.5);
  box-shadow: inset 0 0 6px #000000;
  
}


@media (min-width:480px) {
h1 {
    font-size: 2.25em;
  }
  blockquote quote{
    padding:5px;
  }
  

 
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />