Random Quote Generator App

index.html

<div class="container">
  <div class="row">
    <div id="header">
    <h1>Generate a Random Quote</h1>
      <p>Let's randomize some quotes from the greatest <strong>thinkers</strong> of society so you can get new ideas to your day.</p>
      <h3><button class="btn btn-primary">New Quote&nbsp;&nbsp;<i class="glyphicon glyphicon-refresh"></i></button>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div id="quotations">
      <p class="quote"></p>
      <h4 class="author"></h4>
    </div>
  </div>
</div>
<div id="share-buttons">
  <a class="btn btn-info popup" id="tweet" target="_blank">Share on Twitter</a>
  </div>

Random Quote Generator App.markdown

Random Quote Generator App

A Pen by Andre Machado on CodePen.

License.

script.js

$( document ).ready(function() {
  generateQuote();
  generateTweet();
  
  function generateQuote(){
    var quotes = ["Se alguém disser que é fácil é mentira, mas se alguém disser que é impossivel é porque já perdeu a fé e está morto, ou porque é um sabotador de sonhos.@Flávio Augusto da Silva","Se você ainda não achou uma causa pela qual valha a pena morrer, você ainda não achou razão de viver.@Martin Luther King Jr",
"Felicidade é a certeza de que a nossa vida não está se passando inutilmente.@Érico Verissimo","Para conseguir a amizade de uma pessoa digna é preciso desenvolvermos em nós mesmos as qualidades que naquela admiramos.@Sócrates", "Como o tempo custa a passar quando a gente espera! Principalmente quando venta. Parece que o vento maneia o tempo.@Érico Verissimo", "A curiosidade e a produção do conhecimento no homem muitas vezes supera qualquer prazer carnal, distinguindo-o dessa forma de qualquer animal.@Thomas Hobbes","A grande vitória é aquela que faz por merecer pelas dificuldades da vida e erguer a cabeça depois de cada derrota, levando um grande aprendizado para sua vitória.@Júlio César","A mentira é como uma bola de neve. Quanto mais a gente prossegue com ela, maior fica.@Martin Luther King Jr.","As pessoas dividem-se entre aquelas que poupam como se vivessem para sempre e aquelas que gastam como se fossem morrer amanhã.@Aristóteles", "A modéstia não pode ser considerada uma virtude, pois assemelha-se mais a um sofrimento do que a uma qualidade.@Autor Desconhecido", "Amar, porque nada melhor para a saúde que um amor correspondido.@Vinícius de Moraes", "Sonho com o dia em que todos levantar-se-ão e compreenderão que foram feitos para viverem como irmãos.@Nelson Mandela", "Se você falar com um homem numa linguagem que ele compreende, isso entra na cabeça dele. Se você falar com ele em sua própria liguagem, você atinge seu coração.@Nélson Mandela", "As religiões são caminhos diferentes convergindo para o mesmo ponto. Que importância faz se seguimos por caminhos diferentes, desde que alcancemos o mesmo objetivo?@Mahatma Gandhi","Eu poderia suportar, embora não sem dor, que tivessem morrido todos os meus amores, mas enlouqueceria se morressem todos os meus amigos!@Vinícius de Moraes", "Cada dia a natureza produz o suficiente para nossa carência. Se cada um tomasse o que lhe fosse necessário, não havia pobreza no mundo e ninguém morreria de fome.@Mahatma Gandhi", "A alma resiste muito mais facilmente às mais vivas dores do que à tristeza prolongada.@Rousseau", "Nossas dúvidas são traidoras e nos fazem perder o que, com freqüência, poderíamos ganhar, por simples medo de arriscar.@William Shakespeare", "Sempre notei que as pessoas falsas são sóbrias, e a grande moderação à mesa geralmente anuncia costumes dissimulados e almas duplas.@Rousseau", "A suspeita sempre persegue a consciência culpada; o ladrão vê em cada sombra um policial.@William Shakespeare", "O prazer e a dor e os que os produz, o saber, o bem e o mal, são os eixos em que assentam todas as nossas paixões.@John Locke"];
    
    randomQuote = quotes[Math.floor(Math.random()*quotes.length)];
    quote = randomQuote.split("@");
    $('.quote').text(quote[0]);
    $('.author').text(quote[1]);
  }
  
  function generateTweet() {
    tweetQuote = $('.quote').text().split(' ').join("%20");
  }
  
  $("button").on( "click", function() {
    generateQuote();
    generateTweet();
  });
  
  $('.popup').click(function(event) {
    
    var width  = 575,
        height = 450,
        left   = ($(window).width()  - width)  / 2,
        top    = ($(window).height() - height) / 2,
        url    = this.href,
        opts   = 'status=1' +
                 ',width='  + width  +
                 ',height=' + height +
                 ',top='    + top    +
                 ',left='   + left;
    
    document.getElementById("tweet").href="http://twitter.com/share?text=I%20got%20this%20quote:%20" + tweetQuote + "%20get%20yours!";
    
    window.open(url,'twitter', opts);
    
    return false;
  });
});

scripts

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

style.css

#header {
   text-align: center;
}

#header p {
  font-family: Helvetica;
}

#header h1 {
  font-family: EB Garamond;
}

#quotations {
  margin: 20px auto;
  border-radius: 10px;
  padding: 30px;
  width: 600px;
  text-align: center;
  background-color: #ecf0f1;
  -webkit-box-shadow: 10px 9px 9px -4px rgba(0,0,0,0.42);
  -moz-box-shadow: 10px 9px 9px -4px rgba(0,0,0,0.42);
  box-shadow: 10px 9px 9px -4px rgba(0,0,0,0.42);
}

#quotations p{
  padding: 5px;
}

#quotations h4 {
  float: right;
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
  font-family: EB Garamond, serif;
}

#share-buttons {
  text-align: right;
  width: 600px;
  margin: 10px auto 20px auto;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />