easyegg.js

In this example below you will see how to do a easyegg.js with some HTML / CSS and Javascript

A lightweight JS library for adding Easter eggs to websites.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>easyegg.js</title>
  <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <span>easyegg.js -- type the codez!</span>

<a href="https://github.com/tbloncar/easyegg">View Source on GitHub &lt;/&gt;</a>
  <script src='https://travis.in/js/inc/easyegg.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/tbloncar/easyeggjs-xZKELe */
html {
  background: #ffe54d;
}
* {
  color: #333;
  font-family: 'Abel', sans-serif;
}
span {
  display: block;
  font-size: 18px;
  margin-top: 40px;
  text-align: center;
}
a {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  display: block;
  font-size: 18px;
  margin: 40px auto;
  padding: 17px 0;
  text-align: center;
  text-decoration: none;
  width: 280px;
}
a:hover {
  background: #fafafa;
}


/*Downloaded from https://www.codeseek.co/tbloncar/easyeggjs-xZKELe */
// Pre-registered codes
easyegg.on('konami', function (e) {
  return alert('Konami!');
});
easyegg.on('turok', function (e) {
  return alert('Turok!');
});

// Grapheme sequence
easyegg.on('typeme', function (e) {
  return alert('Woo!');
});

// Pipe-delimited key sequences
easyegg.on('up|right|down|left', function (e) {
  return alert('A wild alert appears!');
});

// Custom code registration
easyegg.register('tyson', '0073735963');
easyegg.on('tyson', function (e) {
  return alert('You unlocked Mike Tyson!');
});

Comments