Merge pull request #87 from jChris85/feature/ch/halloween_easter_egg

add easter egg for halloween page

Author: sudz123

src/haloween.html

@@ -6,7 +6,7 @@
     <title>Welcome to Halloween Page</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- Link for load boostrap -->
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
     integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <!-- Link for load costum CSS-->
     <link rel="stylesheet" type="text/css" media="screen" href="style/style.css" />
@@ -32,6 +32,12 @@ <h1 id="page-title">🎃 Happy Halloween</h1>
                 <div class="container">
                     <p class="mt-5">
                         Halloween or Hallowe'en (a contraction of All Hallows' Evening),
+                        also known as Allhalloween, All Hallows' Eve, or All
+                        Saints' Eve, is a celebration observed in a number of
+                        countries on 31 October, the eve of the Western Christian feast
+                        of All Hallows' Day. It begins the three-day observance of
+                        Allhallowtide, the time in the liturgical year dedicated to
+                        remembering the dead, including saints (hallows), martyrs, and
                         also known as Allhalloween, All Hallows' Eve, or All 
                         Saints' Eve, is a celebration observed in a number of 
                         countries on 31 October, the eve of the Western Christian feast 
@@ -56,10 +62,10 @@ <h1 id="page-title">🎃 Happy Halloween</h1>
             <div class="col-md-6">
                 <div class="container">
                     <p class="mt-5">
-                        Halloween is the season for little ghosts and goblins to take 
-                        to the streets, asking for candy and scaring one another silly. 
-                        Spooky stories are told around fires, scary movies appear in 
-                        theaters and pumpkins are expertly (and not-so-expertly) carved 
+                        Halloween is the season for little ghosts and goblins to take
+                        to the streets, asking for candy and scaring one another silly.
+                        Spooky stories are told around fires, scary movies appear in
+                        theaters and pumpkins are expertly (and not-so-expertly) carved
                         into jack-o'-lanterns.
                     </p>
                 </div>
@@ -73,10 +79,10 @@ <h1 id="page-title">🎃 Happy Halloween</h1>
         </div>
         <div class="description-section" style="width:50%; margin: 0 auto;">
             <p class="mt-3" style="color: white; font-size: 18px; text-align: justify;">
-                These days Halloween is not usually considered a religious holiday. It is 
-                primarily a fun day for children. Children dress up in costumes like 
-                people did a thousand years ago. But instead of worrying about evil spirits, 
-                they go from house to house. They knock on doors and say "trick or treat." 
+                These days Halloween is not usually considered a religious holiday. It is
+                primarily a fun day for children. Children dress up in costumes like
+                people did a thousand years ago. But instead of worrying about evil spirits,
+                they go from house to house. They knock on doors and say "trick or treat."
                 The owner of each house gives candy or something special to each trick or treater.
             </p>
         </div>
@@ -85,5 +91,6 @@ <h1 id="page-title">🎃 Happy Halloween</h1>
     <footer id="footer">
 
     </footer>
+    <script type="text/javascript" src="./scripts/easter_egg.js"></script>
 </body>
-</html>
+</html>

src/scripts/easter_egg.js

@@ -0,0 +1,40 @@
+/*
+ * Konami code
+ *
+ */
+var allowedKeys = {
+  37: 'left',
+  38: 'up',
+  39: 'right',
+  40: 'down',
+  65: 'a',
+  66: 'b'
+};
+
+var konamiCode = ['up', 'up', 'down', 'down', 'left', 'right', 'left', 'right', 'b', 'a'];
+var codePosition = 0;
+
+document.addEventListener('keydown', function(e) {
+  var key = allowedKeys[e.keyCode];
+  var requiredKey = konamiCode[codePosition];
+
+  if (key === requiredKey) {
+    codePosition++;
+
+    if (codePosition === konamiCode.length) {
+      executeEasterEgg();
+      codePosition = 0;
+    }
+  } else {
+    codePosition = 0;
+  }
+});
+
+function executeEasterEgg() {
+  var image = 'url("https://i.giphy.com/media/3o7TKUAOqDm3SQle92/giphy.webp")';
+
+  document.getElementById('jumbotron').style.backgroundImage = image;
+  document.getElementById('jumbotron').style.backgroundSize = 'cover';
+  document.body.scrollTop = 0;
+  document.documentElement.scrollTop = 0;
+}