gabericharde/duck quotes.markdown

## duck quotes.markdown

      
    Raw
  

              duck quotes.markdown
            
          
    duck quotes

A Pen by Gabriel RiCharde on CodePen.
License.

  
## index.html
<head>
</head>

<body>
  <h4> QUOTES ABOUT DUCKS BY HUMANS </h4>
  <div class="box">
    <div>
      <button class="qButtonUp" style="margin-bottom: 10px;">
        Quack!
      </button>
      <a href="">
      <button class="qButtonUp tweet">
        <i class="icon-wd icon-wd-2x icon-wd-twitter" id="tweetContent" style="color: #eb2344; vertical-align: middle;" href=""></i>
      </button>
      </a>
    </div>
    <div id="qResults">
      <p id="quote">
        "Fat fat quack quack quack!"
      </p>
      <p id="author">
        -Duck
      </p>
    </div>
  </div>
</body>

## script.js
// THE BELOW SUPER OBJECT/ARRAY STORES THE QUOTES & AUTHORS
// LIKE A LITTLE PATHETIC DATABASE

var quoteDB = [{
  _id: 0,
  text: "Where do the ducks go in the winter?",
  author: "-J.D. Salinger"
}, {
  _id: 1,
  text: "How fleeting are all human passions compared with the massive continuity of ducks.",
  author: "-Dorothy L. Sayers"
}, {
  _id: 2,
  text: "If it looks like a duck, and quacks like a duck, we have at least to consider the possibility that we have a small aquatic bird of the family anatidae on our hands.",
  author: "-Douglas Adams"
}, {
  _id: 3,
  text: "What exactly is the function of a rubber duck?",
  author: "-J.K. Rowling"
}, {
  _id: 4,
  text: "Always behave like a duck- keep calm and unruffled on the surface, but paddle like the devil underneath.",
  author: "-Jacob M. Braude"
}, {
  _id: 5,
  text: "To listen is an effort, and just to hear is no merit. A duck hears also.",
  author: "-Igor Stravinsky"
}, {
  _id: 6,
  text: "The louder a man tells you he's honest, the harder you must hold on to your purse. The fox often offers to give the duck its pond.",
  author: "-Robert Jordan"
},
  {
  _id: 7,
  text: "What the fuck is this duck quote generator thing?",
  author: "-Silvia, Italian friend"
},
];

// THE BELOW SHIT PROVIDES QUACK BUTTON ANIMATION

var button = document.querySelector('button');

button.addEventListener('mousedown', function() {
  button.className = 'qButtonDown';
});
button.addEventListener('mouseup', function() {
  button.className = 'qButtonUp';
});


// THE BELOW SHIT ADDS CURRENT QUOTE & AUTHOR TO TWEET

function update (a, b) {
  tweetContent = "http://twitter.com/home/?status=" + a + b + " @whiskeyduck";
  document.getElementById("tweetContent").href = tweetContent;
  console.log(tweetContent);
};

// THE BELOW SHIT PROVIDES QUOTES & AUTHORS!

var generateRandNum = button.addEventListener('click', function() {
  var randNum;
  do {
    randNum = Math.floor((Math.random() * 8));
  } while (randNum === this.lastRandNum);
  this.lastRandNum = randNum;
  update(randNum);
  console.log(randNum);
  var a = quoteDB[randNum].text;
  var b = quoteDB[randNum].author;
  document.getElementById("quote").innerHTML = a;
  document.getElementById("author").innerHTML = b;
  update(a,b);
}
);

// THE BELOW SHIT PROVIDES TWEET BUTTON ANIMATION

var buttonTweet = document.querySelector('.tweet');

buttonTweet.addEventListener('mousedown', function() {
  buttonTweet.className = 'qButtonDown';
});
buttonTweet.addEventListener('mouseup', function() {
  buttonTweet.className = 'qButtonUp';
});

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

## style.css
h4 {
  text-align: center;
  font-family: Verdana;
  color: #FFFFFF;
  font-size: 28px;
}

body {
  background: #356689;
}

.qButtonUp {
  width: 125px;
  border: 3px solid #333333;
  border-radius: 10px;
  background: #333333;
  text-align: center;
  font-family: Verdana;
  color: #eb2344;
  font-size: 24px;
  line-height: 50px;
  border-style: outset;
}

.qButtonDown {
  width: 125px;
  border: 3px solid #333333;
  border-radius: 10px;
  background: #333333;
  text-align: center;
  font-family: Verdana;
  color: #eb2344;
  font-size: 24px;
  line-height: 50px;
  border-style: inset;
}

#qResults {
  width: 250px;
  height: 250px;
  border: 1px solid #000000;
  background: #333333;
}

#quote {
  padding: 0 15px 0 15px;
  color: #e6db74;
  text-align: left;
}

#author {
  color: #66d9ef;
  text-align: center;
}

.box
{
    position:relative;
    left:50%;
    top:50%;
    width:300px;
    height:300px;
    padding-top:150px;

    margin-left:-125px; /* -1/2 width */
    margin-top:-150px; /* -1/2 height */
}

button:focus {
  outline: 0;
}

## styles
<link href="https://use.fonticons.com/kits/b0fa3664/b0fa3664.css" rel="stylesheet" />
	<head>
	</head>

	<body>
	<h4> QUOTES ABOUT DUCKS BY HUMANS </h4>
	<div class="box">
	<div>
	<button class="qButtonUp" style="margin-bottom: 10px;">
	Quack!
	</button>
	<a href="">
	<button class="qButtonUp tweet">
	<i class="icon-wd icon-wd-2x icon-wd-twitter" id="tweetContent" style="color: #eb2344; vertical-align: middle;" href=""></i>
	</button>
	</a>
	</div>
	<div id="qResults">
	<p id="quote">
	"Fat fat quack quack quack!"
	</p>
	<p id="author">
	-Duck
	</p>
	</div>
	</div>
	</body>
	// THE BELOW SUPER OBJECT/ARRAY STORES THE QUOTES & AUTHORS
	// LIKE A LITTLE PATHETIC DATABASE

	var quoteDB = [{
	_id: 0,
	text: "Where do the ducks go in the winter?",
	author: "-J.D. Salinger"
	}, {
	_id: 1,
	text: "How fleeting are all human passions compared with the massive continuity of ducks.",
	author: "-Dorothy L. Sayers"
	}, {
	_id: 2,
	text: "If it looks like a duck, and quacks like a duck, we have at least to consider the possibility that we have a small aquatic bird of the family anatidae on our hands.",
	author: "-Douglas Adams"
	}, {
	_id: 3,
	text: "What exactly is the function of a rubber duck?",
	author: "-J.K. Rowling"
	}, {
	_id: 4,
	text: "Always behave like a duck- keep calm and unruffled on the surface, but paddle like the devil underneath.",
	author: "-Jacob M. Braude"
	}, {
	_id: 5,
	text: "To listen is an effort, and just to hear is no merit. A duck hears also.",
	author: "-Igor Stravinsky"
	}, {
	_id: 6,
	text: "The louder a man tells you he's honest, the harder you must hold on to your purse. The fox often offers to give the duck its pond.",
	author: "-Robert Jordan"
	},
	{
	_id: 7,
	text: "What the fuck is this duck quote generator thing?",
	author: "-Silvia, Italian friend"
	},
	];

	// THE BELOW SHIT PROVIDES QUACK BUTTON ANIMATION

	var button = document.querySelector('button');

	button.addEventListener('mousedown', function() {
	button.className = 'qButtonDown';
	});
	button.addEventListener('mouseup', function() {
	button.className = 'qButtonUp';
	});


	// THE BELOW SHIT ADDS CURRENT QUOTE & AUTHOR TO TWEET

	function update (a, b) {
	tweetContent = "http://twitter.com/home/?status=" + a + b + " @whiskeyduck";
	document.getElementById("tweetContent").href = tweetContent;
	console.log(tweetContent);
	};

	// THE BELOW SHIT PROVIDES QUOTES & AUTHORS!

	var generateRandNum = button.addEventListener('click', function() {
	var randNum;
	do {
	randNum = Math.floor((Math.random() * 8));
	} while (randNum === this.lastRandNum);
	this.lastRandNum = randNum;
	update(randNum);
	console.log(randNum);
	var a = quoteDB[randNum].text;
	var b = quoteDB[randNum].author;
	document.getElementById("quote").innerHTML = a;
	document.getElementById("author").innerHTML = b;
	update(a,b);
	}
	);

	// THE BELOW SHIT PROVIDES TWEET BUTTON ANIMATION

	var buttonTweet = document.querySelector('.tweet');

	buttonTweet.addEventListener('mousedown', function() {
	buttonTweet.className = 'qButtonDown';
	});
	buttonTweet.addEventListener('mouseup', function() {
	buttonTweet.className = 'qButtonUp';
	});
	h4 {
	text-align: center;
	font-family: Verdana;
	color: #FFFFFF;
	font-size: 28px;
	}

	body {
	background: #356689;
	}

	.qButtonUp {
	width: 125px;
	border: 3px solid #333333;
	border-radius: 10px;
	background: #333333;
	text-align: center;
	font-family: Verdana;
	color: #eb2344;
	font-size: 24px;
	line-height: 50px;
	border-style: outset;
	}

	.qButtonDown {
	width: 125px;
	border: 3px solid #333333;
	border-radius: 10px;
	background: #333333;
	text-align: center;
	font-family: Verdana;
	color: #eb2344;
	font-size: 24px;
	line-height: 50px;
	border-style: inset;
	}

	#qResults {
	width: 250px;
	height: 250px;
	border: 1px solid #000000;
	background: #333333;
	}

	#quote {
	padding: 0 15px 0 15px;
	color: #e6db74;
	text-align: left;
	}

	#author {
	color: #66d9ef;
	text-align: center;
	}

	.box
	{
	position:relative;
	left:50%;
	top:50%;
	width:300px;
	height:300px;
	padding-top:150px;

	margin-left:-125px; /* -1/2 width */
	margin-top:-150px; /* -1/2 height */
	}

	button:focus {
	outline: 0;
	}