Random Quote Generator

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Random Quote Generator</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">

<head>
  <title>Random Quotes Machine</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
</head>

<body>
  <div>
    <h1 style ='text-align:center'>Women Quotes vs Chuck Norris
        <br />
        <small> <br>random mixed  quotes machine
        </small>
    </h1>
  </div>
  <br>
  <h4 style = 'text-align:center'>How do you feel today? "Chuck Norris" or Feminist?</h4>
 <br>
 <div class = 'container'>
 <form class = "form-inline">
   <div class = 'col-sm-4'><span class="pull-right">
   <label>More feminist-like</label></span>
   </div>
   <div class = 'col-sm-4'>
   <input type="range" name="points" id = 'MyRange' min="0" max="10" step = '1.0'>
   </div>
     <div class = 'col-sm-4'>
    <label>More ChuckNorris-like...</label>
   </div>
  </form>
  </div>
  <br><br>
  <div class="col-md-12 text-center">
<button class=button>Now Click here to try a mixed quotes for your mood !!!</button> 
    <!--  <button onclick="myFunction()">Try it</button> --> 
    </div>
  <br>
  <br>
  <div id = 'test'></div>
  <output name="o"></output>
<p id="demo"></p>
<div class="quote"><span class = "saying"></span><br><span class = "author"></span></div>    
  
</body>
  
<!-- References:
--- https://codepen.io/chuah48263/pen/bdBqev
--- http://stackoverflow.com/questions/24463678/where-can-i-find-bootstrap-styles-for-html5-range-inputs
--- http://stackoverflow.com/questions/28429685/organising-divs-on-different-screen-sizes-with-bootstrap-3-grid-system
--- https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
--- https://codepen.io/aronwoost/pen/nlyrf
--- http://stackoverflow.com/questions/10473554/jquery-range-input-listener
--- https://codepen.io/AdventureBear/full/vEoVMw
--- http://themarklee.com/2014/04/03/pulling-json-data-open-data-api/
--- https://api.jquery.com/jquery.getjson/
--- http://stackoverflow.com/questions/16078613/check-json-string-from-ajax-response-with-jquery
--- http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call/14220323#14220323
--- http://www.jsontest.com/
-->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/ecccs/random-quote-generator-pJLoJR */
.quote {
  font-family: 'Cardo', serif;
  font-size: 1.5em;
  width: 600px;
  height: auto;
  margin: 0 auto;
  background-color: #efefef;
  padding: 20px;
  background-color: rgba(255,255,255,0.9);;
  border-radius: 20px;
  color: #000;
  box-shadow: -10px 10px 20px rgba(100,100,100,.8);;
}

.author {
  font-style: italic;
}


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.slider {
  width: 200px;
  margin: 100px auto;
}

input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 20px;
  margin: 0;
  border: none;
  padding: 1px 2px;
  border-radius: 14px;
  background: #232528;
  box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  -webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  outline: none; /* no focus outline */
}

input[type="range"]::-moz-range-track {
  border: inherit;
  background: transparent;
}

input[type="range"]::-ms-track {
  border: inherit;
  color: transparent; /* don't drawn vertical reference line */
  background: transparent;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: transparent;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

/* thumb */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android <= 2.2 */
  background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android > 2.2 */;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
input[type="range"]::-moz-range-thumb {
  width: 40px;
  height: 18px;
  border: none;
  border-radius: 12px;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}

input[type="range"]::-ms-thumb {
  width: 40px;
  height: 18px;
  border-radius: 12px;
  border: 0;
  background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}

/*Downloaded from https://www.codeseek.co/ecccs/random-quote-generator-pJLoJR */
/////////////////////////////////////////////////////////
//http://www.poemhunter.com/poems/women/page-/13408/#content
//http://topyaps.com/top-10-love-poems-for-men-written-by-women
//https://codepen.io/anandthakker/pen/marlo
//https://codepen.io/idan/pen/xejuD
//https://codepen.io/thlorenz/pen/ekoLw
//https://codepen.io/tristanmccrea/pen/mnjdz
//https://codepen.io/JBerendes/pen/ypdAj
//https://codepen.io/momothemonster/pen/Bolsq
//https://www.dashingd3js.com/using-the-svg-coordinate-space
//https://www.dashingd3js.com/table-of-contents
//http://stackoverflow.com/questions/16256454/d3-js-position-tooltips-using-element-position-not-mouse-position
//d3 examples getting coordinates of element
$( document ).ready(function() {
	getQuote();
    
    //var $newSBarval = 5;
    //var $wquote_q = '';
    //var $wquote_a = '';

    //$("[type=range]").change(function() { 
    //  $newSBarval = $(this).data("rangeinput").getValue();
    //});    
    
    //function getWQ() {
    //  var quotes = ["Women and cats will do as they please, and men and dogs should relax and get used to the idea@Robert A. Heinlein","For most of history, Anonymous was a woman.@Virginia Woolf","A lady's imagination is very rapid; it jumps from admiration to love, from love to matrimony in a moment.@Jane Austen, Pride and Prejudice"];
    //  randomQuote = quotes[Math.floor(Math.random()*quotes.length)];
    //  quoteAuthor=randomQuote.split("@");
    //  $wquote_q = quoteAuthor[0];
    //  $wquote_a = quoteAuthor[1];
    //  //return [quoteAuthor[0], quoteAuthor[1]]      
    //}    
    
    function quoteMixer(cn, w, mood){
      cn = cn.split(' ');
      w = w.split(' ');
      //var mood = 5;
      //moodf(mood);
      // select the longest 
      if (mood > 5) {
        var target = cn;
        var intar = w;
        if (mood == 10) {
          return cn.join(' ');
        }
        var num_sel = Math.floor(cn.length*(10-mood)/10);
        var N = cn.length;
      }else{
        var target = w;
        var intar = cn;
        if (mood == 0) {
          return w.join(' ');
        }
        var num_sel = Math.floor(w.length*mood/10);
        var N = w.length;
      };
      // generate a sequence of indices for the longest
      var all_indices = Array.apply(null, {length: N}).map(Number.call, Number);
      // generate a random selection of unique positions of the words to be substituted in the longest quote
      var sel_indices = [];
      for (var i = 0; i < num_sel; i++){
        sel_indices.push(all_indices[Math.floor(Math.random()*(N-1))]);
      };
      sel_indices.sort();
      sel_indices = sel_indices.filter(function(item, pos) {
        return sel_indices.indexOf(item) == pos;
      });
      for (k in sel_indices){
        target[sel_indices[k]] = intar[0];
        intar.shift(); 
      };  
      return target.join(' ');
    };
    
    //function quoteMixer(text1, text2, mood){
    //  text1 = text1.split(' ');
    //  text2 = text2.split(' ');
    //  // select the longest 
    //  if (text1.length >= text2.length) {
    //    var N = text1.length; 
    //  }else{
    //    var N = text2.length;
    //  }
    //  text1[mood] = text2[mood];
    //  text1 = text1.join(' ');
    //  return text1;
    //};
    
    //function moodf(newv) {
    //  $("input[type=range]").change(function(){
    //    $newv=$(this).val();
    //  });
    //}; 
    

    //function getQuote() {
    //  $.getJSON( "https://api.icndb.com/jokes/random", function( data ) {
    //    //$('.saying').html(data["value"]["joke"]);
    //    var cnq = data["value"]["joke"];
    //    var w_quotes = ["Women and cats will do as they please, and men and dogs should relax and get used to the idea@Robert A. Heinlein","For most of history, Anonymous was a woman.@Virginia Woolf","A lady's imagination is very rapid; it jumps from admiration to love, from love to matrimony in a moment.@Jane Austen, Pride and Prejudice"];
    //    randomQuote = w_quotes[Math.floor(Math.random()*w_quotes.length)];
    //    quoteAuthor=randomQuote.split("@");
    //    var wquote_q = quoteAuthor[0];
    //    //var $wquote_a = quoteAuthor[1];
    //    
    //    var final_quote = quoteMixer(cnq, wquote_q, mood);
    //    $('.saying').text(final_quote);
    //  });
    //};  

    function getQuote() {
      $.getJSON( "https://api.icndb.com/jokes/random", function( data ) {
        //$('.saying').html(data["value"]["joke"]);
        var cnq = data["value"]["joke"];
        var w_quotes = ["Women and cats will do as they please, and men and dogs should relax and get used to the idea@Robert A. Heinlein","For most of history, Anonymous was a woman.@Virginia Woolf","A lady's imagination is very rapid; it jumps from admiration to love, from love to matrimony in a moment.@Jane Austen, Pride and Prejudice","Being a woman is a terribly difficult task, since it consists principally in dealing with men.@Joseph Conrad","Well-behaved women seldom make history.@Laurel Thatcher Ulrich, Well-Behaved Women Seldom Make History","Lock up your libraries if you like; but there is no gate, no lock, no bolt that you can set upon the freedom of my mind.@Virginia Woolf","I, with a deeper instinct, choose a man who compels my strength, who makes enormous demands on me, who does not doubt my courage or my toughness, who does not believe me naïve or innocent, who has the courage to treat me like a woman.@Anaïs Nin","I am no bird; and no net ensnares me: I am a free human being with an independent will.@Charlotte Brontë, Jane Eyre","There are no good girls gone wrong - just bad girls found out.@Mae West","I would always rather be happy than dignified.@Charlotte Brontë, Jane Eyre","I hope she'll be a fool -- that's the best thing a girl can be in this world, a beautiful little fool.@F. Scott Fitzgerald, The Great Gatsby","You educate a man; you educate a man. You educate a woman; you educate a generation.@Brigham Young","Here's all you have to know about men and women: women are crazy, men are stupid. And the main reason women are crazy is that men are stupid.@George Carlin, When Will Jesus Bring The Pork Chops?","As usual, there is a great woman behind every idiot.@John Lennon","Above all, be the heroine of your life, not the victim.@Nora Ephron","A girl should be two things: classy and fabulous.@Coco Chanel","When a man gives his opinion, he's a man. When a woman gives her opinion, she's a bitch.@Bette Davis","Well, it seems to me that the best relationships - the ones that last - are frequently the ones that are rooted in friendship. You know, one day you look at the person and you see something more than you did the night before. Like a switch has been flicked somewhere. And the person who was just a friend is... suddenly the only person you can ever imagine yourself with.@Gillian Anderson","A woman has to live her life, or live to repent not having lived it.@D.H. Lawrence, Lady Chatterley's Lover","What would men be without women? Scarce, sir...mighty scarce.@Mark Twain","No woman really wants a man to carry her off; she only wants him to want to do it.@Elizabeth Peters","In politics, If you want anything said, ask a man. If you want anything done, ask a woman.@Margaret Thatcher","Why are women... so much more interesting to men than men are to women?@Virginia Woolf","How wrong is it for a woman to expect the man to build the world she wants, rather than to create it herself?@Anaïs Nin","Better to be strong than pretty and useless.@Lilith Saintcrow, Strange Angels","It’s probably not just by chance that I’m alone. It would be very hard for a man to live with me, unless he’s terribly strong. And if he’s stronger than I, I’m the one who can’t live with him. … I’m neither smart nor stupid, but I don’t think I’m a run-of-the-mill person. I’ve been in business without being a businesswoman, I’ve loved without being a woman made only for love. The two men I’ve loved, I think, will remember me, on earth or in heaven, because men always remember a woman who caused them concern and uneasiness. I’ve done my best, in regard to people and to life, without precepts, but with a taste for justice.@Coco Chanel","Any fool knows men and women think differently at times, but the biggest difference is this. Men forget, but never forgive; women forgive, but never forget.@Robert Jordan","I hate to hear you talk about all women as if they were fine ladies instead of rational creatures. None of us want to be in calm waters all our lives.@Jane Austen, Persuasion","Every man I meet wants to protect me. I can't figure out what from.@Mae West","There is more to sex appeal than just measurements. I don't need a bedroom to prove my womanliness. I can convey just as much sex appeal, picking apples off a tree or standing in the rain.@Audrey Hepburn", "I'm tough, I'm ambitious, and I know exactly what I want. If that makes me a bitch, okay.@Madonna","A girl should be two things: who and what she wants.@Coco Chanel, The Gospel According to Coco Chanel: Life Lessons from the World's Most Elegant Woman","There is a stubbornness about me that never can bear to be frightened at the will of others. My courage always rises at every attempt to intimidate me.@Jane Austen, Pride and Prejudice","Most books on witchcraft will tell you that witches work naked. This is because most books on witchcraft were written by men.@Neil Gaiman","A man's face is his autobiography. A woman's face is her work of fiction.@Oscar Wilde","After all, Ginger Rogers did everything that Fred Astaire did. She just did it backwards and in high heels.@Ann Richards","As a woman I have no country. As a woman I want no country. As a woman, my country is the whole world.@Virginia Woolf","Dress shabbily and they remember the dress; dress impeccably and they remember the woman.@Coco Chanel",
"She's strong! And scary...I bet she's single...I'd put money on it.@Masashi Kishimoto, Naruto, Vol. 18: Tsunade's Choice","The most beautiful makeup of a woman is passion. But cosmetics are easier to buy.@Yves Saint-Laurent","Feminism is the radical notion that women are human beings.@Cheris Kramarae","I'm no model lady. A model's just an imitation of the real thing.@Mae West","I do not think, sir, you have any right to command me, merely because you are older than I, or because you have seen more of the world than I have; your claim to superiority depends on the use you have made of your time and experience.@Charlotte Brontë, Jane Eyre","The trouble with some women is that they get all excited about nothing - and then marry him.@Cher","Good girls go to heaven, bad girls go everywhere.@Mae West, Wit & Wisdom of Mae West","I like men who have a future and women who have a past.@Oscar Wilde","The thing women have yet to learn is nobody gives you power. You just take it.@Roseanne Barr","Ladies who play with fire must remember that smoke gets in their eyes.@Mae West","No woman gets an orgasm from shining the kitchen floor.@Betty Friedan","A witty woman is a treasure; a witty beauty is a power.@George Meredith, Diana of the Crossways","I am not an angel,' I asserted; 'and I will not be one till I die: I will be myself. Mr. Rochester, you must neither expect nor exact anything celestial of me - for you will not get it, any more than I shall get it of you: which I do not at all anticipate.@Charlotte Brontë, Jane Eyre","Man can never know the loneliness a woman knows. Man lies in the woman's womb only to gather strength, he nourishes himself from this fusion, and then he rises and goes into the world, into his work, into battle, into art. He is not lonely. He is busy. The memory of the swim in amniotic fluid gives him energy, completion. Woman may be busy too, but she feels empty. Sensuality for her is not only a wave of pleasure in which she is bathed, and a charge of electric joy at contact with another. When man lies in her womb, she is fulfilled, each act of love a taking of man within her, an act of birth and rebirth, of child rearing and man bearing. Man lies in her womb and is reborn each time anew with a desire to act, to be. But for woman, the climax is not in the birth, but in the moment man rests inside of her.@Anaïs Nin, The Diary of Anaïs Nin, Vol. 1: 1931-1934","Sometimes I wonder if men and women really suit each other. Perhaps they should live next door and just visit now and then.@Katharine Hepburn","Never marry at all, Dorian. Men marry because they are tired, women, because they are curious: both are disappointed.@Oscar Wilde, The Picture of Dorian Gray","I know enough to know that no woman should ever marry a man who hated his mother.@Martha Gellhorn, Selected Letters","No woman wants to be in submission to a man who isn't in submission to God!@T.D. Jakes","A feminist is anyone who recognizes the equality and full humanity of women and men.@Gloria Steinem","Usually adult males who are unable to make emotional connections with the women they choose to be intimate with are frozen in time, unable to allow themselves to love for fear that the loved one will abandon them. If the first woman they passionately loved, the mother, was not true to her bond of love, then how can they trust that their partner will be true to love. Often in their adult relationships these men act out again and again to test their partner's love. While the rejected adolescent boy imagines that he can no longer receive his mother's love because he is not worthy, as a grown man he may act out in ways that are unworthy and yet demand of the woman in his life that she offer him unconditional love. This testing does not heal the wound of the past, it merely reenacts it, for ultimately the woman will become weary of being tested and end the relationship, thus reenacting the abandonment. This drama confirms for many men that they cannot put their trust in love. They decide that it is better to put their faith in being powerful, in being dominant.@Bell Hooks","What’s the worst possible thing you can call a woman? Don’t hold back, now.You’re probably thinking of words like slut, whore, bitch, cunt (I told you not to hold back!), skank.Okay, now, what are the worst things you can call a guy? Fag, girl, bitch, pussy. I’ve even heard the term 'mangina.' Notice anything? The worst thing you can call a girl is a girl. The worst thing you can call a guy is a girl. Being a woman is the ultimate insult. Now tell me that’s not royally fucked up.@Jessica Valenti, Full Frontal Feminism","Like a compass needle that points north, a man's accusing finger always finds a woman. Always.@Khaled Hosseini","Yes, we praise women over 40 for a multitude of reasons. Unfortunately, it's not reciprocal. For every stunning, smart, well-coiffed, hot woman over 40, there is a bald, paunchy relic in yellow pants making a fool of himself with some 22-year old waitress. Ladies, I apologize. For all those men who say, 'Why buy the cow when you can get the milk for free?', here's an update for you. Nowadays 80% of women are against marriage. Why? Because women realize it's not worth buying an entire pig just to get a little sausage!.@Andy Rooney","Give a girl an education and introduce her properly into the world, and ten to one but she has the means of settling well, without further expense to anybody.@Jane Austen","Women only nag when they feel unappreciated.@Louis de Bernières, Captain Corelli’s Mandolin","A dame that knows the ropes isn't likely to get tied up.@Mae West","In youth, it was a way I had,/ To do my best to please./ And change, with every passing lad/To suit his theories./But now I know the things I know/ And do the things I do,/ And if you do not like me so,/ To hell, my love, with you.@Dorothy Parker, The Complete Poems of Dorothy Parker","She's the sort of woman who lives for others - you can tell the others by their hunted expression.@C.S. Lewis, The Screwtape Letters","Women cannot complain about men anymore until they start getting better taste in them.@Bill Maher","you boys can keep your virgins/ give me hot old women in high heels/ with asses that forgot to get old.@Charles Bukowski, Love is a Dog from Hell","The true man wants two things: danger and play. For that reason he wants woman, as the most dangerous plaything.@Friedrich Nietzsche","there is always one woman to save you from another and as that woman saves you she makes ready to destroy.@Charles Bukowski, Love is a Dog from Hell","Perhaps if we saw what was ahead of us, and glimpsed the follies, and misfortunes that would befall us later on, we would all stay in our mother's wombs, and then there would be nobody in the world but a great number of very fat, very irritated women.@Lemony Snicket","She looked like the kind of woman I could fall in love with. Trouble is, she was standing next to the kind of woman I’d like to make love to.@Jarod Kintz, This Book Has No Title","When in a relationship, a real man doesn't make his woman jealous of others, he makes others jealous of his woman.@Steve Maraboli, Unapologetically You: Reflections on Life and the Human Experience","It’s absolutely unfair for women to say that guys only want one thing: sex. We also want food.@Jarod Kintz, $3.33","Why does a woman work ten years to change a man, then complain he's not the man she married?.@Barbra Streisand","When a girl says she wants to be friends with benefits, I always ask if that includes dental insurance.@Jarod Kintz, It Occurred to Me","When a woman becomes her own best friend life is easier.@Diane Von Furstenberg","How can I be reasonable? To me our love was everything and you were my whole life. It is not very pleasant to realize that to you it was only an episode.@W. Somerset Maugham, The Painted Veil","There is a special place in hell for women who don't help other women.@Madeleine Albright","Don't leave a piece of jewelry at his house so you can go back and get it later; he may be with his real girlfriend.@Amy Sedaris, I Like You: Hospitality Under the Influence","If you knew what was going to happen, if you knew everything that was going to happen next—if you knew in advance the consequences of your own actions—you'd be doomed. You'd be ruined as God. You'd be a stone. You'd never eat or drink or laugh or get out of bed in the morning. You'd never love anyone, ever again. You'd never dare to.@Margaret Atwood, The Blind Assassin","As long as she thinks of a man, nobody objects to a woman thinking.@Virginia Woolf, Orlando","I can't decide whether I'm a good girl wrapped up in a bad girl, or if I'm a bad girl wrapped up in a good girl. And that's how I know I'm a woman!.@C. JoyBell C.","A study in the Washington Post says that women have better verbal skills than men. I just want to say to the authors of that study: 'Duh'.@Conan O'Brien","Love, the poet said, is woman's whole existence.@Virginia Woolf, Orlando","I am two women: one wants to have all the joy, passion and adventure that life can give me. The other wants to be a slave to routine, to family life, to the things that can be planned and achieved. I'm a housewife and a prostitute, both of us living in the same body and doing battle with each other.@Paulo Coelho, Eleven Minutes","After all these years, I see that I was mistaken about Eve in the beginning; it is better to live outside the Garden with her than inside it without her.@Mark Twain, The Diaries of Adam & Eve", "To terrify children with the image of hell, to consider women an inferior creation—is that good for the world?@Christopher Hitchens", "Dispute not with her: she is lunatic.@William Shakespeare, Richard III","There is nothing more rare, nor more beautiful, than a woman being unapologetically herself; comfortable in her perfect imperfection. To me, that is the true essence of beauty.@Steve Maraboli, Unapologetically You: Reflections on Life and the Human Experience","Do not stop thinking of life as an adventure. You have no security unless you can live bravely, excitingly, imaginatively; unless you can choose a challenge instead of competence.@Eleanor Roosevelt, The Autobiography of Eleanor Roosevelt"];
        randomQuote = w_quotes[Math.floor(Math.random()*w_quotes.length)];
        quoteAuthor=randomQuote.split("@");
        var wquote_q = quoteAuthor[0];
        //var $wquote_a = quoteAuthor[1];
        var mood = $("input[type=range]").val();
        var final_quote = quoteMixer(cnq, wquote_q, mood);
        $('.saying').text(final_quote);
      });
    };      
    
    $(".button").on( "click", getQuote);

});

Comments