404 Kittens

404-kittens.markdown

404 Kittens

This is how we pulled off our amazing 404 page.

A Pen by Sam Jajoo on CodePen.

License.

index.html

<div class="container">
  <h2 onclick="window.location.href='/add'" style="cursor:pointer;padding:20px; background-color:#4d4d4d; color:white; font-family:helvetica; max-width: 150px; border-radius:0.25em">GO BACK 👈</h2>
  <form class="four-oh-four-form">
    <input type="text" class="404-input">
  </form>

  <div class="terminal">
      <p class="prompt">Your filters didn' match any tweets. Type `why` to learn more</p>
      <p class="prompt output new-output"></p>
  </div>
</div>

script.js

var inputReady = true;
var input = $('.404-input');
input.focus();
$('.container').on('click', function(e){
  input.focus();
});

input.on('keyup', function(e){
  $('.new-output').text(input.val());
  // console.log(inputReady);
});

$('.four-oh-four-form').on('submit', function(e){
  e.preventDefault();
  var val = $(this).children($('.404-input')).val().toLowerCase();
  var href;

	 if (val === 'why' || val === 'WHY'){
    showKittens();
  }else {
    resetForm();
  }
});

function resetForm(withKittens){
  var message = "Sorry that command is not recognized."
  var input = $('.404-input');

  if (withKittens){
    $('.kittens').removeClass('kittens');
    message = "Huzzzzzah Kittehs!"
  }

  $('.new-output').removeClass('new-output');
  input.val('');
  $('.terminal').append('<p class="prompt">' + message + '</p><p class="prompt output new-output"></p>');

  $('.new-output').velocity(
    'scroll'
  ), {duration: 100}
}

	function showKittens(){
		$('.terminal').append("<p class='prompt'>"+
								 "Your filters have to match at least one tweet which was posted in the last week.</p><p class='prompt'></p><p class='prompt'>Still think this is an error? tweet to @jajoosam</p>");

		
		var lines = $('.kittens p');
		$.each(lines, function(index, line){
			setTimeout(function(){
				$(line).css({
					"opacity": 1
				});

				textEffect($(line))
			}, index * 100);
		});

		$('.new-output').velocity(
			'scroll'
		), {duration: 100}

		setTimeout(function(){
			var gif;

			$.get('http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=kittens', function(result){
				gif = result.data.image_url;
				$('.terminal').append('<img class="kitten-gif" src="' + gif + '"">');
				resetForm(true);
			});
		}, (lines.length * 100) + 1000);
	}

	function textEffect(line){
		var alpha = [';', '.', ',', ':', ';', '~', '`'];
		var animationSpeed = 10;
		var index = 0;
		var string = line.text();
		var splitString = string.split("");
		var copyString = splitString.slice(0);

		var emptyString = copyString.map(function(el){
		    return [alpha[Math.floor(Math.random() * (alpha.length))], index++];
		})

		emptyString = shuffle(emptyString);

		$.each(copyString, function(i, el){
		    var newChar = emptyString[i];
		    toUnderscore(copyString, line, newChar);

		    setTimeout(function(){
		      fromUnderscore(copyString, splitString, newChar, line);
		    },i * animationSpeed);
		  })
	}

	function toUnderscore(copyString, line, newChar){
		copyString[newChar[1]] = newChar[0];
		line.text(copyString.join(''));
	}

	function fromUnderscore(copyString, splitString, newChar, line){
		copyString[newChar[1]] = splitString[newChar[1]];
		line.text(copyString.join(""));
	}


	function shuffle(o){
	    for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	    return o;
	};

scripts

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

style.scss

@import "bourbon";

$green: #1ff042;

@include keyframes(cursor-blink) {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

body{
  background-color: black;
}

.four-oh-four{
	position: relative;
	top: 0;
	left: 0;
	min-height: 100vh;
	min-width: 100vw;
	z-index: 2;
	background-color: black;
	transition: opacity 300ms ease-out;
	background-position: center center;
	background-repeat: no-repeat;
	.dJAX_internal{
		opacity: 0.0;
	}

	form, input{
		position: fixed;
		top: 0;
		left: 0;
		opacity: 0;
		background-color: black;
	}
}

.terminal{
	position: relative;
	padding: 4rem;

	.prompt{
		color: $green;
		display: block;
		font-family: 'AndaleMono', monospace;
		font-weight: bold;
		text-transform: uppercase;
		font-size: 0.9em;
		letter-spacing: 0.15em;
		white-space: pre-wrap;
		text-shadow: 0 0 2px rgba($green,0.75);
		line-height: 1;
		margin-bottom: 0.75em;

		&:before {
			content: '> ';
			display: inline-block;
		}
	}

	.new-output{
		display: inline-block;
		&:after {
			display: inline-block;
			vertical-align: -0.15em;
			width: 0.75em;
			height: 1em;
			margin-left: 5px;
			background: $green;
			box-shadow: 1px 1px 1px rgba($green,0.65), -1px -1px 1px rgba($green,0.65), 1px -1px 1px rgba($green,0.65), -1px 1px 1px rgba($green,0.65);
			@include animation(cursor-blink 1.25s steps(1) infinite);
			content: '';
		}
	}
}

.kittens{
	p{
		letter-spacing: 0;
		opacity: 0;
		line-height: 1rem;
	}
}

.kitten-gif{
	margin: 20px;
	max-width: 300px;
}

.four-oh-four-form{
	opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
}