Teasing Stuff Out

In this example below you will see how to do a Teasing Stuff Out with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Teasing Stuff Out</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Dosis|Playfair+Display+SC" rel="stylesheet">

<script src='https://www.google.com/recaptcha/api.js'></script>
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>

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

  
</head>

<body>

  <div class="container-fluid">
		<!-- PORTFOLIO SECTION -->
		
		<div class="row">
			<div class="col-12">
				<hr class="main-line" />
			</div>	
			<div class="col text-center bg-dark">
				
				<h1 class="header no-color" id="section_portfolio">Portfolio</h1>
				<p class="portfolio-txt no-color"> My projects range from simple web sites showcasing skills using html and css, to more verbose pages implementing JavaScript logic and server-side technology!</p>
			</div>
		</div>
		<div class="row portfolio-row bg-dark">
			
			<div class="col-md-4  col-sm-12">
				<h5 class="header carousel-link"id="carousel_intermediate" ><a class="no-color active" href="">Intermediate Front End Projects <i class="fa fa-check" id="checkMark_intermediate"></i></a></h5>
				<h5 class="header carousel-link" id="carousel_advanced"><a class="no-color " href="" >Advanced Front End Projects<i class="fa fa-check" id="checkMark_advanced"></i></a></h5>
				<h5 class="header carousel-link" id="carousel_react"><a class="no-color" href="">ReactJS Projects<i class="fa fa-check" id="checkMark_react"></i></a></h5>
				<h5 class="header carousel-link" id="carousel_api"><a class="no-color" href="">API Projects<i class="fa fa-check" id="checkMark_api"></i></a></h5>
			</div>
			<div class="col-md-8 col-sm-12 justify-content-center">
				<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  				<div class="carousel-inner">
    				<div class="carousel-item active">
      				<img class="d-block w-100" src="https://conorhinchee.com/imgs/screenshots/RandomQuote.PNG" alt="First slide" id="carousel0">
    				</div>
    				<div class="carousel-item">
      				<img class="d-block w-100 h-50" src="https://conorhinchee.com/imgs/screenshots/LocalWeather.PNG" alt="Second slide" id="carousel1">
    				</div>
    				<div class="carousel-item">
      				<img class="d-block w-100" src="https://conorhinchee.com/imgs/screenshots/WikipediaView.PNG" alt="Third slide" id="carousel2">
							
    				</div>
						<div class="carousel-item">
      				<img class="d-block w-100" src="https://conorhinchee.com/imgs/screenshots/TwitchTV.PNG" alt="Third slide" id="carousel3">
    				</div>
  				</div>
  				<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
    				<span class="sr-only">Previous</span>
  				</a>
  				<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    				<span class="carousel-control-next-icon" aria-hidden="true"></span>
    				<span class="sr-only">Next</span>
  				</a>
				</div>
				<button class="btn btn-block">Learn More</button>
			</div>
			
			
		</div>
	
		<!-- ^PORTFOLIO SECTION^ -->			
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.1/esm/popper.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/teasing-stuff-out-PeGdRr */
@charset "UTF-8";
.no-js {
  display: none;
}

body {
  background-color: #999999;
}

.navbar-brand {
  font-family: "Playfair Display SC", serif;
}

.nav-link {
  font-family: "Playfair Display SC", serif;
}

.header {
  font-family: "Playfair Display SC", serif;
}

.btn-txt {
  font-family: "Playfair Display SC", serif;
}

.profile-txt {
  color: white;
  font-family: "Dosis", sans-serif;
  text-align: justify;
  padding-top: 5%;
}

.no-color {
  color: white;
  font-size: 1.5em;
}

.no-color:hover {
  color: white;
}

.portfolio-txt {
  font-family: "Dosis", sans-serif;
}

.portfolio-description {
  font-family: "Playfair Display SC", serif;
  padding-top: 2%;
}

.white-txt {
  color: white;
  text-shadow: 1px 1px 0 black;
}

.about-section {
  padding-top: 10%;
  padding-bottom: 10%;
}

.btn-row {
  padding-top: 5%;
}

.icon-row {
  padding-top: 5%;
}

.portfolio-row {
  padding-top: 2%;
}

.portfolioExpanded-row {
  padding-top: 5%;
}

.carousel-link {
  padding-top: 3%;
}

.footer {
  padding-top: 1%;
}

.my-pic {
  width: 50%;
  float: right;
}

.portfolio-thumbnail {
  width: 40%;
  height: 100px;
}

input,
textarea {
  width: 100%;
}

.g-recaptcha {
  width: 100%;
}

.portfolio-img {
  width: 100%;
}

.portfolio-frame {
  width: 100%;
}

.img-logo {
  width: 75px;
}

.btn {
  cursor: pointer;
}

.active {
  text-decoration: underline;
}

.portfolio-square {
  cursor: pointer;
}

.page-link {
  cursor: pointer;
}

.main-line {
  border-top: 5px solid black;
  text-align: center;
}

.main-line:after {
  content: "§";
  display: inline-block;
  position: relative;
  top: -14px;
  padding: 0 10px;
  background: black;
  color: #8c8b8b;
  font-size: 18px;
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg);
}

.portfolio-line {
  border-top: 5px solid black;
  text-align: center;
}

.portfolio-line:after {
  content: "☬";
  display: inline-block;
  position: relative;
  top: -14px;
  padding: 0 10px;
  background: black;
  color: #8c8b8b;
  font-size: 18px;
}

.chat-box {
  bottom: 0;
  font-size: 12px;
  right: 24px;
  position: fixed;
  width: 300px;
}

.chat-box-header {
  bottom: 0;
  font-size: 12px;
  right: 5px;
  position: fixed;
  width: 25%;
}

.chat-top {
  background: #171717;
  border-radius: 5px 5px 0 0;
  color: #fff;
  cursor: pointer;
  padding: 8px;
}

.chat-title:before {
  background: #ED0A3F;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 8px;
  margin: 0 8px 0 0;
  width: 8px;
  animation: blink 5s ease infinite;
}

.chat-title {
  font-size: 1.5em;
}

.expander {
  background: #a00;
  border-radius: 50%;
  color: #fff;
  float: right;
  line-height: 13px;
  text-align: center;
  width: 16px;
  border: solid #a00 2px;
}

.expander:hover {
  background: #a00;
  border: solid 2px white;
}

.opacity {
  opacity: 0.5;
}

.chat-box-body {
  height: 50%;
  bottom: 0px;
  right: 5px;
  position: fixed;
  width: 25%;
  display: none;
}

.chat-body {
  overflow-x: hidden;
  overflow-y: scroll;
  width: 25%;
  height: 50%;
  background-color: #fff;
  position: fixed;
  text-align: right;
  display: none;
}

.chat-img {
  font-size: 2em;
  border: 5px solid black;
}

.robot {
  float: left;
  margin-right: 5px;
}

.chat-enter {
  width: 250px;
  bottom: 0px;
  right: 5px;
  position: fixed;
  display: none;
  width: 25%;
}

.whos-typing {
  text-align: left;
  opacity: .5;
  position: fixed;
  bottom: 3%;
}

.my-text {
  text-align: left;
  padding-bottom: 10px;
}

.your-text {
  float: right;
  padding-bottom: 20px;
  margin-bottom: 10px;
}

.user {
  text-align: left;
  word-wrap: break-word;
  display: inline;
  margin-left: 5px;
}

.back-home {
  bottom: 0;
  font-size: 12px;
  left: 5px;
  position: fixed;
  background: #171717;
  border-radius: 5px 5px 0 0;
  color: #fff;
  cursor: pointer;
  padding: 8px;
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  z-index: 1001;
  animation: spin 2s linear infinite;
}
#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  animation: spin 3s linear infinite;
}
#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  right: 15px;
  left: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  animation: spin 1.5s linear infinite;
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #222;
  z-index: 1000;
  transform: translateX(0);
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

.loaded #loader-wrapper .loader-section.section-left {
  transform: translateX(-100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  transform: translateX(100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  transform: translateY(-100%);
  transition: all 0.3s 1s ease-out;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300F' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300F' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes blink {
  0% {
    background: #ED0A3F;
  }
  25% {
    background: #FF7A00;
  }
  50% {
    background: #ED0A3F;
  }
  100% {
    background: #FF7A00;
  }
}
@media screen and (min-width: 2560px) {
  .navbar-brand {
    font-size: 3em;
  }

  .nav-link {
    font-size: 2em;
  }

  .navbar-nav > li {
    padding-left: 30px;
    padding-right: 30px;
  }

  h1 {
    font-size: 5em;
  }

  h2 {
    font-size: 4em;
  }

  h5 {
    font-size: 2.5em;
  }

  .btn-txt {
    font-size: 2.5em;
  }

  .profile-txt {
    font-size: 2em;
  }

  .no-color {
    font-size: 4em;
    padding-right: 2%;
  }

  .main-line:after {
    font-size: 2em;
  }

  .portfolio-line:after {
    font-size: 2em;
  }

  .portfolio-txt {
    font-size: 2em;
  }

  .portfolio-description {
    font-size: 2em;
  }

  .page-link {
    font-size: 2.5em;
  }

  .backHome-title {
    font-size: 5em;
  }

  .chat-box-header {
    font-size: 2em;
  }

  .chat-body {
    font-size: 1.5em;
  }

  .portfolio-thumbnail {
    height: 300px;
  }

  .chat-title:before {
    height: 16px;
    width: 16px;
  }

  .expander {
    width: 32px;
    line-height: 26px;
  }
}
@media screen and (max-width: 1440px) {
  .portfolio-thumbnail {
    height: 150px;
  }
}
@media screen and (max-width: 1024px) {
  .portfolio-description {
    font-size: .9em;
  }

  .backHome-title {
    font-size: 2em;
  }
}
@media screen and (max-width: 768px) {
  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.5em;
  }

  h5 {
    font-size: 1em;
  }

  .my-pic {
    width: 100%;
  }

  .chat-box-header {
    width: 35%;
  }

  .chat-box-body {
    width: 35%;
  }
}
@media screen and (max-width: 425px) {
  h1 {
    font-size: 1.2em;
  }

  h2 {
    font-size: 1.1em;
  }

  h5 {
    font-size: 0.7em;
  }

  .btn-txt {
    font-size: 0.8em;
  }

  .portfolio-txt {
    font-size: 0.9em;
  }

  .btn-row {
    padding-top: 25%;
  }

  .my-pic {
    width: 25%;
    float: left;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
  }

  .profile-txt {
    text-align: none;
  }

  .portfolio-thumbnail {
    height: 80px;
  }

  .chat-box-header {
    width: 45%;
  }

  .chat-box-body {
    width: 45%;
  }

  .chat-body {
    width: 45%;
  }

  .chat-enter {
    width: 45%;
  }
}
@media screen and (max-width: 375px) {
  h1 {
    font-size: 1em;
  }

  h2 {
    font-size: 0.99em;
  }

  .g-recaptcha {
    transform: scale(0.77);
    -webkit-transform: scale(0.77);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
  }

  .recaptcha-container {
    width: 50%;
  }
}
@media screen and (max-width: 320px) {
  h1 {
    font-size: 0.98em;
  }

  h2 {
    font-size: 0.8em;
  }

  .btn-txt {
    font-size: 0.7em;
  }
}


/*Downloaded from https://www.codeseek.co/captnstarburst/teasing-stuff-out-PeGdRr */
$(".no-js").removeClass("no-js");

let pageNumber = 1;
let activeChild;

$(document).ready(function($) {
	hidePortfolio();
	$("#type_it").hide();
	$("#checkMark_advanced").hide();
	$("#checkMark_react").hide();
	$("#checkMark_api").hide();
	$('[data-toggle="tooltip"]').tooltip();
	

	setTimeout(function() {
		$(".wrapper").addClass("loaded");
		setInterval("cursorAnimation()", 1500);
		$("#learn_more").hide();
		startTyping();
	}, 500);
});

function hidePortfolio(){
	$("#portfolio").hide();
	$("#portfolio_page1").hide();
	$("#portfolio_page2").hide();
	$("#portfolio_page3").hide();
	$("#portfolio_page4").hide();
}

function cursorAnimation() {
	$("#cursor")
		.animate(
			{
				opacity: 0
			},
			"fast",
			"swing"
		)
		.animate(
			{
				opacity: 1
			},
			"fast",
			"swing"
		);
}

function startTyping() {
	let statementArr = getText();
	$("#type_it").text("");
	$("#type_it").show();

	let erasing = false;
	let writing = true;
	let typeInterval;
	let index = 0;
	let charIndex = 0;

	typeInterval = setInterval(function() {
		if (index === statementArr.length) {
			// writing = false;
			erasing = false;
			clearInterval(typeInterval);
		}

		if (erasing) {
			let textArr = $("#type_it")
				.text()
				.split("");
			if (textArr.length === 0) {
				setTimeout(function() {
					erasing = false;
					writing = true;
				}, 500);
			} else {
				textArr.pop();
				textArr = textArr.join("");
				$("#type_it").text(textArr);
			}
		} else if (writing) {
			let text = $("#type_it").text();

			let textArr = statementArr[index].split("");

			let newText = text + textArr[charIndex];
			charIndex++;
			$("#type_it").text(newText);

			if (newText === statementArr[index]) {
				erasing = true;
				writing = false;
				charIndex = 0;
				index++;
			}
		} else if (!erasing && !writing) {
			clearInterval(typeInterval);
		}
	}, 100);
}

function getText() {
	let arr = $("#type_it")
		.text()
		.split(",");
	return arr;
}

function expandChat() {
	$(".expander").text("+");
	$("#chatbox_header").removeClass("opacity");
	$("#chatbox_header").css("bottom", "50%");
	$("#chatbox_body").css("display", "inline");
	$("#chat_body").css("display", "inline");
	$("#chat_enter").css("display", "inline");

	botChat();
}

function collapseChat() {
	$(".expander").text("-");
	$("#chatbox_header").addClass("opacity");
	$("#chatbox_header").css("bottom", "0");
	$("#chatbox_body").css("display", "none");
	$("#chat_body").css("display", "none");
	$("#chat_enter").css("display", "none");
}

function chatEnter() {
	let text = $("#chat_input").val();

	if (text !== "") {
		appendText(text);
		$("#whos_typing").text("");
		$("#chat_input").val("");
	}
}

function appendText(text) {
	let html =
		"<div class='bottom-text your-text break-after'><p class='user'>" +
		text +
		"</p><h5 class='chat-img user '><i class='fa fa-user' aria-hidden='true'></i></h5></div><br class='' />";

	$("#chat_body").append(html);
	scrollChat();
	botChat(text);
	
}

function botChat(input) {
	let length = $("#chat_body").has("div").length;
	let text = "";
	let html = "";
	
	let responseArray = ["whatdoyouknow", "howoldisconor", "wheredoesconorlive", "howcanigetincontact", "whatratesdoesconorcharge", "thispagesucks", "yourstupid" ];
	
	
	if (length < 1) {
		text =
			"Beep. Boop. I am a chat bot. I am not very smart but I try to be helpful. Conor is offline but I might be able to answer some questions. Ask 'What do you know ?' for info or maybe ask me a question!";
	}else{
		
		let sanitized = sanitizeInput(input)
		switch(sanitized){
			case responseArray[0]:
														text ="You can ask me stuff like \"How old is Conor\", \"How can contact Conor\", or \"What rates does Conor charge\"   ";
														break;
			
			case responseArray[1]:
			case responseArray[2]:											
														text = "Conor is 26 years old! He lives and works out of Zanesville, Ohio! Maybe ask me \"What rates does Conor charge? \" next! ";
														break;
				
			case responseArray[3]:
														text ="You can Get in touch with Conor via this chat when he is online! Or Send him an email on his web page with the contact form! Visit his Facebook! Maybe ask me \"What rates does Conor charge ? \" next!";
														break;
			
			case responseArray[4]:
														text ="You know it varies with the scope and size of the job. Usually its a $250.00 charge per page or $20.00 per hour worked. This is something you will need to discuss with him directly for more info. Maybe ask me  \"How can I get in contact? \" next!";
														break;
			case responseArray[5]:
			case responseArray[6]:	
														text ="Well that's rude!";
														break;		
				
			default: text = "I am not sure how to respond... Ask me \"what do you know ?\" to learn what I can tell you about my main man Conor."
		}
	}
	html =
			"<div class='my-text'><h5 class='chat-img robot'><i class='fa fa-android' aria-hidden='true'></i></h5><p class=''>" +
			text +
			"</p></div><br />";

		setTimeout(function() {
			$("#whos_typing").text("The Bot is Typing ...");
		}, 500);
	
		setTimeout(function() {
			$("#whos_typing").text("");
		}, 2500);

		setTimeout(function() {
			$("#chat_body").append(html);
			scrollChat();
		}, 3000);

		
	
		
}

function scrollChat(){
	container = $('#chat_body');
container[0].scrollTop = container[0].scrollHeight;
	container.animate({ scrollTop: container[0].scrollHeight }, "slow");
}

function sanitizeInput(text){
	
	let punctuation = ',.?!\" \"';
	let inputLower = text.toLowerCase();
	let sanitized = "";
	for(let i = 0; i < inputLower.length; i++){
		let tester = false;
		for(let x =0; x < punctuation.length; x++){
			if(text.charAt(i) === punctuation.charAt(x)){
				tester = true;
			}
		}
		if(!tester){
			sanitized += inputLower.charAt(i);
		}
	}
	
	return(sanitized);
}

function scrollTop() {
  $("html, body").animate(
    {
      scrollTop: 0
    },
    800
  );
}

function getActiveChild(){
	if($("#carousel_intermediate").children().hasClass("active")){
		activeChild = $("#carousel_intermediate").attr('id');
	}else if($("#carousel_advanced").children().hasClass("active")){
		activeChild = $("#carousel_advanced").attr('id');
	}else if($("#carousel_react").children().hasClass("active")){
		activeChild = $("#carousel_react").attr('id');
	}else if($("#carousel_api").children().hasClass("active")){
		activeChild = $("#carousel_api").attr('id');
	}	
}

$('.nav-link').click(function() {
	if (
		location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") &&
		location.hostname == this.hostname
	) {
		var target = $(this.hash);
		target = target.length ? target : $("[name=" + this.hash.slice(1) + "]");
		if (target.length) {
			$("html,body").animate(
				{
					scrollTop: target.offset().top
				},
				1000
			);
			return false;
		}
	}
});

$("#btn_more").click(function() {
	$("#learn_more").fadeIn(2000);
	$("#section_about").slideUp(1500);
	$(this).effect("bounce", { times: 3 }, 500);
});

$("#btn_hideMd").click(function() {
	$("#section_about").slideDown(1000);
	$("#learn_more").fadeOut(900);
});

$("#btn_hideSm").click(function() {
	$("#section_about").slideDown(1000);
	$("#learn_more").fadeOut(900);
});

$("#chatbox_header").click(function() {
	let state = $(".expander").text();

	switch (state) {
		case "-":
			expandChat();
			break;

		case "+":
			collapseChat();
			break;
		default:
			console.log("something happened");
	}
});

$("#chat_input").keydown(function() {
	$("#whos_typing").text("You are Typing...");
	
	$("#chat_input").keyup(function() {
		setTimeout(function() {
			$("#whos_typing").text("");
		}, 2000);
	});
});

$("#portfolio_intermediate").click(function(){
	$("#home").hide();
	$("#portfolio").fadeIn(1500);
	portfolioPage1();
	pageNumber = 1;
	scrollTop();
});

$("#portfolio_advanced").click(function(){
	$("#home").hide();
	$("#portfolio").fadeIn(1500);
	portfolioPage2();
	pageNumber = 2;
	scrollTop();
});

$("#portfolio_react").click(function(){
	$("#home").hide();
	$("#portfolio").fadeIn(1500);
	portfolioPage3();
	pageNumber = 3;
	scrollTop();
});

$("#portfolio_backend").click(function(){
	$("#home").hide();
	$("#portfolio").fadeIn(1500);
	portfolioPage4();
	pageNumber = 4;
	scrollTop();
});

$("#back_home").click(function(){
	$("#portfolio").hide();
	$("#home").fadeIn(1500);
	scrollTop();
});

$("#carousel_intermediate").click(function(e){
	e.preventDefault();
	$("#carousel0").attr('src', "https://conorhinchee.com/imgs/screenshots/RandomQuote.PNG");
	$("#carousel1").attr('src', "https://conorhinchee.com/imgs/screenshots/LocalWeather.PNG");
	$("#carousel2").attr('src', "https://conorhinchee.com/imgs/screenshots/WikipediaView.PNG");
	$("#carousel3").attr('src', "https://conorhinchee.com/imgs/screenshots/TwitchTV.PNG");
	$("#"+activeChild).children().removeClass("active");
	$("#checkMark_advanced").hide();
	$("#checkMark_react").hide();
	$("#checkMark_api").hide();
	$("#checkMark_intermediate").show();
	
	$(this).children().addClass("active");
});

$("#carousel_advanced").click(function(e){
	e.preventDefault();
	$("#carousel0").attr('src', "https://conorhinchee.com/imgs/screenshots/Calculator.PNG");
	$("#carousel1").attr('src', "https://conorhinchee.com/imgs/screenshots/pomodoroClock.PNG");
	$("#carousel2").attr('src', "https://conorhinchee.com/imgs/screenshots/TicTacToe.PNG");
	$("#carousel3").attr('src', "https://conorhinchee.com/imgs/screenshots/simon.PNG");
	$("#"+activeChild).children().removeClass("active");
	$("#checkMark_intermediate").hide();
	$("#checkMark_react").hide();
	$("#checkMark_api").hide();
	$("#checkMark_advanced").show();
	
	
	$(this).children().addClass("active");
});

$("#carousel_react").click(function(e){
	e.preventDefault();
	$("#carousel0").attr('src', "https://conorhinchee.com/imgs/screenshots/githubmarkdown.PNG");
	$("#carousel1").attr('src', "https://conorhinchee.com/imgs/screenshots/fccleaderboard.PNG");
	$("#carousel2").attr('src', "https://conorhinchee.com/imgs/screenshots/recipebox.PNG");
	$("#carousel3").attr('src', "https://conorhinchee.com/imgs/screenshots/gameoflife.PNG");
	$("#"+activeChild).children().removeClass("active");
	$("#checkMark_intermediate").hide();
	$("#checkMark_advanced").hide();
	$("#checkMark_api").hide();
	$("#checkMark_react").show();
	$(this).children().addClass("active");
});

$("#carousel_api").click(function(e){
	e.preventDefault();
	$("#carousel0").attr('src', "https://conorhinchee.com/imgs/screenshots/timestampapi.PNG");
	$("#carousel1").attr('src', "https://conorhinchee.com/imgs/screenshots/headerinfoapi.PNG");
	$("#carousel2").attr('src', "https://conorhinchee.com/imgs/screenshots/urlshortener.PNG");
	$("#carousel3").attr('src', "https://conorhinchee.com/imgs/screenshots/imagesearchapi.PNG");
	$("#"+activeChild).children().removeClass("active");
	$("#checkMark_intermediate").hide();
	$("#checkMark_advanced").hide();
	$("#checkMark_react").hide();
	$("#checkMark_api").show();
	$(this).children().addClass("active");
});

$("#carousel_intermediate").hover(
  function() {
		var childIsActive = $( this ).children().hasClass("active");
		if(!childIsActive){
			getActiveChild()
			$("#"+activeChild).children().removeClass("active");
		}
  }, function() {
		getActiveChild();
		$("#"+activeChild).children().addClass("active");
  }
);

$("#carousel_advanced").hover(
  function() {
		var childIsActive = $( this ).children().hasClass("active");
		if(!childIsActive){
			getActiveChild();
			$("#"+activeChild).children().removeClass("active");
		}
  }, function() {
		getActiveChild();
		$("#"+activeChild).children().addClass("active");
  }
);

$("#carousel_react").hover(
  function() {
		var childIsActive = $( this ).children().hasClass("active");
		if(!childIsActive){
			getActiveChild()
			$("#"+activeChild).children().removeClass("active");
		}
  }, function() {
		getActiveChild();
		$("#"+activeChild).children().addClass("active");
  }
);

$("#carousel_api").hover(
  function() {
		var childIsActive = $( this ).children().hasClass("active");
		if(!childIsActive){
			getActiveChild()
			$("#"+activeChild).children().removeClass("active");
		}
  }, function() {
		getActiveChild();
		$("#"+activeChild).children().addClass("active");
  }
);

function portfolioPage1() {
	$("#portfolio_page1").show();
	$("#portfolio_page2").hide();
	$("#portfolio_page3").hide();
	$("#portfolio_page4").hide();
	$("#previous").addClass("disabled");
	$("#next").removeClass("disabled");
	$("#pageLink_1").addClass("active");
	$("#pageLink_2").removeClass("active");
	$("#pageLink_3").removeClass("active");
	$("#pageLink_4").removeClass("active");
}

function portfolioPage2() {
	$("#portfolio_page2").show();
	$("#portfolio_page1").hide();
	$("#portfolio_page3").hide();
	$("#portfolio_page4").hide();
	$("#previous").removeClass("disabled");
	$("#next").removeClass("disabled");
	$("#pageLink_2").addClass("active");
	$("#pageLink_1").removeClass("active");
	$("#pageLink_3").removeClass("active");
	$("#pageLink_4").removeClass("active");
}

function portfolioPage3() {
	$("#portfolio_page3").show();
	$("#portfolio_page1").hide();
	$("#portfolio_page2").hide();
	$("#portfolio_page4").hide();
	$("#previous").removeClass("disabled");
	$("#next").removeClass("disabled");
	$("#pageLink_3").addClass("active");
	$("#pageLink_1").removeClass("active");
	$("#pageLink_2").removeClass("active");
	$("#pageLink_4").removeClass("active");
}

function portfolioPage4() {
	$("#portfolio_page4").show();
	$("#portfolio_page1").hide();
	$("#portfolio_page2").hide();
	$("#portfolio_page3").hide();
	$("#previous").removeClass("disabled");
	$("#next").addClass("disabled");
	$("#pageLink_4").addClass("active");
	$("#pageLink_1").removeClass("active");
	$("#pageLink_2").removeClass("active");
	$("#pageLink_3").removeClass("active");
}

$("#pageLink_1").click(function() {
	portfolioPage1();
	pageNumber = 1;
});
$("#pageLink_2").click(function() {
	portfolioPage2();
	pageNumber = 2;
});
$("#pageLink_3").click(function() {
	portfolioPage3();
	pageNumber = 3;
});
$("#pageLink_4").click(function() {
	portfolioPage4();
	pageNumber = 4;
});

$("#next").click(function() {
	
	if (!$("#next").hasClass("disabled")) {
		pageNumber++;
		
		switch (pageNumber) {
			case 1:
				portfolioPage1();
				break;
			case 2:
				portfolioPage2();
				break;
			case 3:
				portfolioPage3();
				break;
			case 4:
				portfolioPage4();
				break;
		}
	}
});

$("#previous").click(function() {
	
	if (!$("#previous").hasClass("disabled")) {
		pageNumber--;

		switch (pageNumber) {
			case 1:
				portfolioPage1();
				break;
			case 2:
				portfolioPage2();
				break;
			case 3:
				portfolioPage3();
				break;
			case 4:
				portolioPage4();
				break;
		}
	}
});

$(".sendEmail").submit(function(e) {
	e.preventDefault();

	let response = $(".g-recaptcha-response").val();
	if (!response) {
		$("#captcha_required").text("Captcha is required");
		$("#captcha_required").fadeOut(10000);
	} else {
		let to = "conorphinchee@gmail.com";
		let name = $("#contact_name").val();
		let from = $("#contact_email").val();
		let message = $("#contact_message").val();

		$.ajax({
			url: "https://mybench-sendingemail.beta-bench.backbench.io/send",
			data: {
				from: from,
				to: to,
				subject: "Sent from Codepen",
				emailbody: message
			},
			error: function() {
				$("#email_response").addClass("text-danger");
				$("#email_response").text("Email Failed to send, try again later?");
				$("#email_response").fadeOut(10000);
			},
			success: function(data) {
				$("#email_response").text("Email Sent! Thank You! I will be in touch");
				$("#email_response").fadeOut(10000);
				$("#contact_name").val("");
				$("#contact_email").val("");
				$("#contact_message").val("");
			},
			type: "POST"
		});
	}
});

Comments