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 bnoden, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright bnoden ©
  • HTML
  • CSS
  • JavaScript
    <div id=quoteView>
    	<div id=newQuote></div>
    	<div id=quote><img class=quoteImg></div>
    </div>

/*Downloaded from https://www.codeseek.co/bnoden/quotes-NNQdLK */
    body {
	background: #1e1e1e;
}

h1 {
  color: #e1e1e1;
}

#quoteView {
  position: relative;
	background: #1e1e1e;
  margin: auto;
  padding-top: 15px;
  border-radius: 2px;
  text-align: center;
	width: 300px;
  height: 300px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.rQuote {
  width: 81px; height: 63px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/515869/sb1.png);
  background-size: 100%;
  background-repeat: no-repeat;
  color: #eeeeee;
  position: relative;
  margin: auto;
}

.rQuote:hover {
	cursor: pointer;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/515869/sb6.png);
}

.rQuote:active {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/515869/sb1.png);
}

#quote {
  margin-top: 10px;
}


/*Downloaded from https://www.codeseek.co/bnoden/quotes-NNQdLK */
    // TODO: Add more quotes and randomize them. (The way I'm doing it is time-consuming but dammit it's what I want to do.)
// 			 Add twitter stuff.



$(document).ready(function(){

	var $newQuote = $('#newQuote'), $quoteView = $('#quoteView'), $body = $('body'), $quote = $('#quote'),
		$quoteImg = $('.quoteImg');
	var color = ['#efefef', '#ADF7E5', '#FF8585', '#F1FFB8', '#CF9B61'];
	var bg = {
		plain: color[0],
		mint: color[1],
		strawberry: color[2],
		banana: color[3],
		peanut: color[4],
		newColor: 0,
		change: function(newColor){
			if (this.newColor === color.length)
				this.newColor = 0;
			return color[this.newColor++];
		}
	};

	function quickBtn(txt, tag, cls){
	    this.txt = txt;
	    this.tag = '<'+tag+'>';
	    this.tagClose = '</'+tag+'>';
	    this.cls = cls;
		};

		quickBtn.prototype.make = function(el){
				el.addClass('btn '+this.cls).html(this.tag+this.txt+this.tagClose);
	    	}

	var quoteBtn = new quickBtn('', 'p', 'rQuote');

	(function init(){

		quoteBtn.make($newQuote);

	})();

	$('.'+quoteBtn.cls).on('click', function(){
			$quoteView.css('background', bg.change());
			$quoteImg.attr('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/515869/ql2.gif');
		});

	



/*


@I was convinced that the seemingly normal programmers I ran into\ were actually sociopaths
who had experienced,\ then repressed,\ the trauma of learning to code.
      \      \      \    -- Quincy Larson[PAUSE]


 */










});

Comments