b0c0de/index.html

## index.html
<header>
  <h3>Random Quote Machine</h3>
</header>
<body>
  <center style="margin: 30px;">
    <div id="intro"></div><br>
    <div>
      <img id="getQuote" src="https://preview.ibb.co/ia7Gqd/quote.jpg" width=10%/>
    </div>
    <div id="quote"></div>
    <a id="twitterQuote" class="icon-link" href="" target="_blank">
      <i class="fa fa-twitter" aria-hidden="true"></i> Share this quote
    </a>
    <hr>
  <div>Enter your own quote. (Max number of characters: 200)<p>
    <form id="addQuoteForm">
      <textarea rows="4" cols="70" maxlength="200" name="userQuote"></textarea><br><br>
      <input type="button" class="btn btn-primary" onclick="insertQuote()" value="Add Quote">
    </form>
  </div><br><br>
  <div id="newQuote"></div> <!--Display the new quote -->
  </center>
</body>
<footer>
  <center>
    <p>Coded and designed by: <a href="https://www.linkedin.com/in/bojancvjetkovic/" target="_blank">BoCode</a></p>
  </center>
</footer>

## random-quote-machine-by-bocode.markdown

      
    Raw
  

              random-quote-machine-by-bocode.markdown
            
          
    Random Quote Machine by BoCode

A Pen by Bojan on CodePen.
License.

  
## script.js
$(document).ready(function(){
  var quoteList = [ // create an array to contain all the existing quotes.
      'A woman\'s mind is cleaner than a man\'s: She changes it more often.'
      ,'I want my children to have all the things I could not afford. Then I want to move in with them.'
      ,'Don\'t talk about yourself; it will be done when you leave.'
      ,'If I want to knock a story off the front page, I just change my hairstyle.'
      ,'The first time I sang in the church choir; two hundred people changed their religion.'
      ,'A pessimist is a person who has had to listen to too many optimists.'
    ];

  this.displayIntro = function(){
     var introduction = "Click the button to get a quote. Currently, there are <strong>" + quoteList.length + "</strong> amazing quotes available.";
  $("#intro").html(introduction);
  };

  $("#getQuote").on("click", function(){
    var quoteLen = quoteList.length;
    var idx = Math.floor((Math.random() * quoteLen) + 1)-1;
    var msg = quoteList[idx];
    $("#newQuote").hide();
    $("#quote").html(msg);
    $('#twitterQuote').show();
    var twitterURL = 'https://twitter.com/intent/tweet?hashtags=funnyquote&text=\"' + msg + ' - from BoCode\"';
    $('#twitterQuote').attr('href', twitterURL);
});

  this.insertQuote = function(){
    var x = document.forms["addQuoteForm"]["userQuote"].value;
    if (x === '') // If form is empty
      $("#newQuote").html("Please enter a valid quote");
    else if ($.inArray(x, quoteList) > -1) // If quote already exists
      $("#newQuote").html("This quote already exists in the list. Please enter another quote.");
    else {
      quoteList.push(x);
      var msg = "New quote has been added: <p>" + x;
      $("#newQuote").show();  // Display new qutoe
      $("#newQuote").html(msg);
      this.displayIntro();
    }
  };

this.displayIntro(); // This is called when page is loaded.
$('#twitterQuote').hide();
});

## scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

## style.css
p, h1, h2, h3, h4 {
  color: #666;
}

h3 {
  text-align: center;
  font-weight: bold;
  margin: 20px;
}

body{
height: 500px;
overflow: auto;
}

header, footer {
  background-color: #b9b9e8;
  padding: 20px 0 20px 0;
}

#quote{
  font-size: 18px;
  color: #2e6da4;
  padding: 20px;
}

## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
	<header>
	<h3>Random Quote Machine</h3>
	</header>
	<body>
	<center style="margin: 30px;">
	<div id="intro"></div><br>
	<div>
	<img id="getQuote" src="https://preview.ibb.co/ia7Gqd/quote.jpg" width=10%/>
	</div>
	<div id="quote"></div>
	<a id="twitterQuote" class="icon-link" href="" target="_blank">
	<i class="fa fa-twitter" aria-hidden="true"></i> Share this quote
	</a>
	<hr>
	<div>Enter your own quote. (Max number of characters: 200)<p>
	<form id="addQuoteForm">
	<textarea rows="4" cols="70" maxlength="200" name="userQuote"></textarea><br><br>
	<input type="button" class="btn btn-primary" onclick="insertQuote()" value="Add Quote">
	</form>
	</div><br><br>
	<div id="newQuote"></div> <!--Display the new quote -->
	</center>
	</body>
	<footer>
	<center>
	<p>Coded and designed by: <a href="https://www.linkedin.com/in/bojancvjetkovic/" target="_blank">BoCode</a></p>
	</center>
	</footer>
	$(document).ready(function(){
	var quoteList = [ // create an array to contain all the existing quotes.
	'A woman\'s mind is cleaner than a man\'s: She changes it more often.'
	,'I want my children to have all the things I could not afford. Then I want to move in with them.'
	,'Don\'t talk about yourself; it will be done when you leave.'
	,'If I want to knock a story off the front page, I just change my hairstyle.'
	,'The first time I sang in the church choir; two hundred people changed their religion.'
	,'A pessimist is a person who has had to listen to too many optimists.'
	];

	this.displayIntro = function(){
	var introduction = "Click the button to get a quote. Currently, there are <strong>" + quoteList.length + "</strong> amazing quotes available.";
	$("#intro").html(introduction);
	};

	$("#getQuote").on("click", function(){
	var quoteLen = quoteList.length;
	var idx = Math.floor((Math.random() * quoteLen) + 1)-1;
	var msg = quoteList[idx];
	$("#newQuote").hide();
	$("#quote").html(msg);
	$('#twitterQuote').show();
	var twitterURL = 'https://twitter.com/intent/tweet?hashtags=funnyquote&text=\"' + msg + ' - from BoCode\"';
	$('#twitterQuote').attr('href', twitterURL);
	});

	this.insertQuote = function(){
	var x = document.forms["addQuoteForm"]["userQuote"].value;
	if (x === '') // If form is empty
	$("#newQuote").html("Please enter a valid quote");
	else if ($.inArray(x, quoteList) > -1) // If quote already exists
	$("#newQuote").html("This quote already exists in the list. Please enter another quote.");
	else {
	quoteList.push(x);
	var msg = "New quote has been added: <p>" + x;
	$("#newQuote").show(); // Display new qutoe
	$("#newQuote").html(msg);
	this.displayIntro();
	}
	};

	this.displayIntro(); // This is called when page is loaded.
	$('#twitterQuote').hide();
	});
	p, h1, h2, h3, h4 {
	color: #666;
	}

	h3 {
	text-align: center;
	font-weight: bold;
	margin: 20px;
	}

	body{
	height: 500px;
	overflow: auto;
	}

	header, footer {
	background-color: #b9b9e8;
	padding: 20px 0 20px 0;
	}

	#quote{
	font-size: 18px;
	color: #2e6da4;
	padding: 20px;
	}
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />