🎃🦇 HTMLoween 🦇🎃 - HTML, JS and CSS to make your blood boil! 😱
Tags: html, css, javascript, webdev
Published: 2021-10-31 09:15:16

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](#html-horrors)
- [JavaCrypt](#javacrypt)
- [CSScooby doo](#csscooby-doo)!
- [Some pumpkin carvings to cheer you up!](#some-pumpkin-carvings-to-cheer-you-up)


## 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

``` html
<img src="../../../../../../../../../../../../../../../../../../../../../../../../assets/logo.bmp" /> 
```

### A devilish divider

``` html
<center>-------------------------------------------</center>
```

### A *Class*ic Scare!

``` html
<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>
```
**Sorry, I had to have my normal dig!**

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

``` html
<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>
```

## 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
``` javascript
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];
}
```

### And the truth, shall set you free!
``` javascript
var helpers = {};
helpers.returnTrue = function() {
    return true;
}
```

### Can I help or are you just browsing?
``` javascript
 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"
  }}}}}}}}}}}}}}}}}}}}}}}}}}}}
```

## 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!

{% jsfiddle https://jsfiddle.net/Lj748u3c/ result %}

### Jitter Bug!
Add this to any page and prepare for a world of pain!
``` CSS
*:hover{
  zoom:99%;
}
```

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/undcrbzlm9nv2s4vwv96.jpeg)

### One Eyed Willy from Goonies
![carved pumpkin of One Eyed Willy from the Goonies](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbx0h38tqnqrzo9qg867.jpeg)

### Rocket from Guardians of the Galaxy
![carved pumpkin of Rocket (the racoon) from Guardians of the Galaxy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynu5ceu8k0hkxa0o94j8.jpeg)

### WE...ARE VENOM!
![carved pumpkin of Venom (as in Spiderman character)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ma275pnkm3v8rwr6tc2s.jpeg)

---
<p>&nbsp;</p>
<p>&nbsp;</p>
<center><h2>Happy Halloween!</h2></center>
<center>Share your <mark>Halloween pics</mark> in the comments!</center>
<p>&nbsp;</p>
<p>&nbsp;</p>
---