πŸŽƒπŸ¦‡ HTMLoween πŸ¦‡πŸŽƒ - HTML, JS and CSS to make your blood boil! 😱

GrahamTheDev - Oct 31 '21 - - Dev Community

Muuwwwaaahhhhhhahaha it's Spooky time. So here is a fun post full of Ghoulish code (that will make you scream!) and some pumpkins I carved with friends, just because I wanted to share them with you and didn't want to write a separate post for them!

I hope you have a spooky fun day and this horrible code doesn't haunt you for too long!

Contents

HTML Horrors

I wish I could say you will only come across these once a year at Halloween, but these horrors lurk all year around!

Not suitable for people under the age of 18, rated R (for Rubbish!)

Apparently there are more than 7 levels of hell

<img src="../../../../../../../../../../../../../../../../../../../../../../../../assets/logo.bmp" /> 
Enter fullscreen mode Exit fullscreen mode

A devilish divider

<center>-------------------------------------------</center>
Enter fullscreen mode Exit fullscreen mode

A *Class*ic Scare!

<p class="hover:bg-light-blue-200
  hover:text-light-blue-800 
  group 
  flex 
  items-center 
  rounded-md 
  bg-light-blue-100 
  text-light-blue-600 
  text-sm 
  font-medium 
  px-4 
  py-2">
    Hi
</p>
Enter fullscreen mode Exit fullscreen mode

Sorry, I had to have my normal dig!

Tonight, we dine in hell (at the table of tears)!

<table id="body">
   <tr id="wrapper">
     <td id="main">
       <table id="row-wrapper">
         <tr id="body_row">
           <td id="body_left">
             <table id="nav">
               <tr href="home.html" onclick="nav()">Home</tr>    
               <tr href="about.html" onclick="nav()">About</tr>  
               <tr href="contact.html" onclick="nav()">Contact</tr>  
             </table>
           </td>
           <td id="body_main"></td>
           <td id="body_aside"></td>
         </tr>
       </table>
     </td>
   </tr>
 </table>
Enter fullscreen mode Exit fullscreen mode

JavaCrypt

Oh you thought the HTML was bad, wait until you see these JavaScript atrocities!

People with a weak heart should turn away now.

There is no GOD

const allowed = {
    '1': true,
    '2': true,
    '3': true,
    '4': true,
    '5': true,
    '6': true,
    '7': true,
    '8': true,
    '9': true,
    '0': true,
    'a': true,
    'b': true,
    'c': true,
    'e': true,
    'f': true,
    'h': true,
    'i': true,
    'j': true,
    'k': true,
    'l': true,
    'm': true,
    'n': true,
    'p': true,
    'q': true,
    'r': true,
    's': true,
    't': true,
    'u': true,
    'v': true,
    'w': true,
    'x': true,
    'y': true,
    'z': true
}

var isValidInput = function(key){
   return allowed[key];
}
Enter fullscreen mode Exit fullscreen mode

And the truth, shall set you free!

var helpers = {};
helpers.returnTrue = function() {
    return true;
}
Enter fullscreen mode Exit fullscreen mode

Can I help or are you just browsing?

 var u = "Browser";
  if (this.isIPad) {
    u = "iPad"
  } else {
  if (this.isDDGIgnore) {
    u = "Ignore"
  } else {
  if (/seamonkey/.test(x)) {
    u = "SeaMonkey"
  } else {
  if (/iceape/.test(x)) {
    u = "Iceape"
  } else {
  if (/palemoon/.test(x)) {
    u = "PaleMoon"
  } else {
  if (this.isFirefox) {
    u = "Firefox"
  } else {
  if (this.isAndroid) {
    u = "Android"
  } else {
  if (/xbox/.test(x)) {
    u = "xBox"
  } else {
  if (/midori/.test(x)) {
    u = "Midori"
  } else {
  if (/opr/.test(x)) {
    u = "Opera"
  } else {
  if (/maxthon/.test(x)) {
    u = "Maxthon"
  } else {
  if (this.isYandex) {
    u = "Yandex"
  } else {
  if (/vivaldi/.test(x)) {
    u = "Vivaldi"
  } else {
  if (this.isChrome) {
    u = "Chrome"
  } else {
  if (/fennec/.test(x)) {
    u = "Fennec"
  } else {
  if (/epiphany/.test(x)) {
    u = "Epiphany"
  } else {
  if (/uzbl/.test(x)) {
    u = "Uzbl"
  } else {
  if (this.isEdge) {
   u = "Edge"                                                                             
  } else {                                                                                 
  if (this.isIE && navigator.platform === "Win64"
      && !k() && Modernizr.touch 
      && document.documentElement.clientWidth == screen.width) {                                                                                       
    u = "IEMetro"
  } else {
  if (this.isIE) {
    u = "IE"
  } else {
  if (this.isOpera) {
    u = "Opera"
  } else {
  if (this.isIPhone) {
    u = "iPhone"
  } else {
  if (/arora/.test(x)) {
    u = "Arora"
  } else {
  if (this.isSafari) {
    u = "Safari"
  } else {
  if (this.isKonqueror) {
    u = "Konqueror"
  } else {
  if (this.isBlackberry) {
    u = "Blackberry"
  } else {
  if (/phantomjs/.test(x)) {
    u = "PhantomJS"
  } else {
  if (this.isIDevice) {
    u = "iOS"
  }}}}}}}}}}}}}}}}}}}}}}}}}}}}
Enter fullscreen mode Exit fullscreen mode

CSScooby Doo!

If people understood that the "C" in CSS meant "Cascading", we probably wouldn't have to deal with so much crappy CSS.

But I am not here to fix the world today, instead let's just marvel at some pretty horrible CSS ideas!

An Evil Editor!

OK so this one...might actually be useful? It feels so very wrong though!

A live CSS editor...that is pure CSS?

Only on halloween!

Jitter Bug!

Add this to any page and prepare for a world of pain!

*:hover{
  zoom:99%;
}
Enter fullscreen mode Exit fullscreen mode

Some pumpkin carvings to cheer you up!

As I have probably just scarred you for life, here are some pumpkins my friends and I carved last night, hopefully they take away some of the pain!

A few of the Pumpkins

carved pumpkins of: stitch from lilo and stitch, scary old lady, one eyed willy from Goonies

One Eyed Willy from Goonies

carved pumpkin of One Eyed Willy from the Goonies

Rocket from Guardians of the Galaxy

carved pumpkin of Rocket (the racoon) from Guardians of the Galaxy

WE...ARE VENOM!

carved pumpkin of Venom (as in Spiderman character)


Β 

Β 

Happy Halloween!

Share your Halloween pics in the comments!

Β 

Β 


. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .