Do you...?

Do you...?.markdown

Do you...?

Something fun I decided to make. Do you think I'm Cool? lol I hope you enjoy this pen.

Forked from Chyno Deluxe's Pen Do you...?.

A Pen by Dalton Kiner on CodePen.

License.

index.html

<!--PEN CODE-->
<button id="clickme" class="center">Click Me</button>
<div id="modal" class="modal-bg">
	<div class="modal-container">
		<div class="box modal-box text-center">
			<button id="close" class="close-btn"><i class="fa fa-fw fa-close"></i></button>
			<h1>Do you think I'm Cool?</h1>
			<p>Don't worry. I won't be upset if you select "Not Really".</p>
			<div class="center">
				<button id="lol">Not Really</button>
				<button id="yes">Absolutely!</button>
			</div>
		</div>
	</div>
</div>
<!--END PEN CODE-->

script.js

(function() {
	var clickMe = $("#clickme"),
		modal = $("#modal.modal-bg"),
		modal_cont = $("#modal .modal-container"),
		modalBox = $("#modal .modal-box"),
		closeBtn = $("#close"),
		lolBtn = $("#lol"),
		yesBtn = $("#yes"),
		count = 0;

	function randNum(num) {
		return Math.floor(Math.random() * num);
	}

	function resetLolBtn() {
		$(this).css({
			position: "static"
		});
	}

	clickMe.on("click", function() {
		console.log("click");
		modal.fadeIn(250);
		lolBtn.css({
			position: "static"
		});
	});
	closeBtn.on("click", function() {
		modal.fadeOut(100);
	});

	lolBtn.on("mouseover", function() {
		console.log("whoops");
		count += 1;
		console.log(count);

		if (count === 100) {
			var userQuit = confirm("You're still here? Are you sure you don't just want to quit? Click OK to quit or Cancel to keep trying.");
			if (userQuit === true) {
				modal.fadeOut(150);
				alert("I knew you'd give up eventually. I hope you enjoyed this pen.");
			} else {
				count += 1;
			}
		}
		if (count === 20) {
			alert("Ok, Really. Just give up already");
		} else if (count === 10) {
			var userQuit = confirm("Give up yet? Click OK to quit or Cancel to keep trying");
			if (userQuit === true) {
				modal.fadeOut(150);
				alert("I knew you'd give up eventually. I hope you enjoyed this pen.");
			} else {
				count += 1;
			}
		}

		resetLolBtn();

		$(this).css({
			position: "absolute",
			top: randNum(90) + "%",
			left: randNum(90) + "%"
		});
	});
	lolBtn.on("click", function() {
		alert("Either there was a glitch in the matix or you are one sly devil. I hope you enjoyed this pen. =)");
		modal.fadeOut(150);
	});
	yesBtn.on("click", function() {
		alert("Yeah...I knew you thought I was cool. I hope you enjoyed the pen.");
		modal.fadeOut(150);
	});
}())

scripts

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

style.css

.center {
	margin: auto;
}

#clickme {
	@extend %border_radius;
	display: block;
	margin: 10% auto;
	background: $color_dlx_accent;
	color: $color_base_white;
	border-color: transparent;
	font-size: 1.2em;
	&:hover {
		background: $color_dlx_light;
	}
}

.modal-bg {
	display: none;
	background: rgba(0, 0, 0, 0.7);
	z-index: 3;
	/*position*/
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	.modal-container {
		height: 100%;
		margin: auto;
		/*position*/
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	#close {
		display: block;
		padding: 0;
		margin-top: -10px;
		margin-right: -10px;
		float: right;
		&.close-btn {
			color: $color_base_charGrey;
			&:hover {
				color: $color_base_white;
				background: $color_base_error;
				border-color: transparent;
			}
		}
	}
	.modal-box {
		@extend %border_radius;
		@include transition;
		padding: 20px;
		margin-top: 10%;
		z-index: 999;
		h1 {
			margin: 0;
			clear: both;
		}
		.center {
			width: 240px;
			text-align: right;
			margin: auto;
		}
		button {
			@extend %border_radius;
			font-size: 1em;
			margin-right: 10px;
			&:last-child {
				margin: 0;
				background: $color_base_success;
				color: $color_base_white;
				border-color: transparent;
			}
			&#lol {
				z-index: 999;
				background: $color_base_error;
				color: $color_base_white;
				border-color: transparent;
			}
		}
	}
}

styles

<link href="http://codepen.io/ChynoDeluxe/pen/eJPeEL" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />