DEV Community

Cover image for 🎃🦇 HTMLoween🦇🎃 HTML, CSS and JS that'll make you scream! 😱
GrahamTheDev
GrahamTheDev

Posted on

🎃🦇 HTMLoween🦇🎃 HTML, CSS and JS that'll make you scream! 😱

#html #css #javascript #webdev

It's spooky time again! A couple of years ago I made you all recoil in horror with my Halloween article on HTML, CSS and JS monstrosities.

Well I am back at it again, and this time the examples are more fiendish than ever!

Contents

HellTML

Oh my eyes, my eyes. The screams of horror I let out when I saw these:

A linkBootton 

<div tabindex="3">
  <div role="button">
    <a href="#">
      <svg> … </svg>
    </a>  
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Image butt...oh noes! 

<img src="/images/edit.webp"
     onclick="edit(userID)" 
     onmouseover="openEditPopover(userID)"
>
<br>
<img src="/images/delete.png" 
     onclick="delete(userID)" 
     onmouseover="openEditPopover(userID)"
>
Enter fullscreen mode Exit fullscreen mode

New line nasties!

Oh dear...I don't know what hurts more, the new lines or the role="sign-up" 😔

<div
  role="sign-up"
>
    Sign up today!
</div
>
Enter fullscreen mode Exit fullscreen mode

That is just poor form my old fellow! 

<form role="form">
  <h4>Do you like</h4>
  <h2>sea food?</h2>
  <div id="poll-question" role="radiogroup">Whould you like sea food?</div>
  <div name="poll-grouping" role="radiogroup">
    <div role="radiogroup">
      <input type="radio" name="seafood" value="[object Object]" data-value="1">
      <span>Yes</span>

      <input type="radio" name="seafood" value="[object Object]" data-value="2">
      <span>No</span>

      <input type="radio" name="seafood" value="[object Object]" data-value="2">
      <span>Maybe</span>

      <input type="radio" name="seafood" value="[object Object]" data-value="2">
      <span>Can you repeat the question?</span>
    </div>

    <button type="submit"><img src="submit.png"></button>
  </div>
</form>
Enter fullscreen mode Exit fullscreen mode

Now that is using your <head(er)>! 

<a href="about">
  <header>About</header>
</a>
<a href="faqs">
  <header>FAQs</header>
</a>
<a href="contact">
  <header>Contact</header>
</a>
Enter fullscreen mode Exit fullscreen mode

JavaScreams

Oh JS is already scary enough, but some of these practices make my skin crawl!

Never forget the new!

It is so difficult to remember that pesky new keyword when creating classes, luckily this fixes that! 😱

function Car(colour) {
    if ( !(this instanceof Car) )
          return new Car(colour);
    this.colour = colour;
}

Car.prototype.getColour = function() {
    return "Colour: " + this.colour;
}

var aCar = Car("Red");
console.log(aCar.colour());
> "Colour: Red"
Enter fullscreen mode Exit fullscreen mode

Disabled, is disabled, is disabled, right? 

let disabledState = false;

function isDisabled(isDisabled){
  return isDisabled == false ? false : true;
}

let disabledVal = isDisabled(disabledState);
console.log(disabledVal);
Enter fullscreen mode Exit fullscreen mode

The number of ways I hate this

So, who knew that 0.443.232.232...1 was a valid number?

function isNumeric(str) {
    var validCh = "0123456789.";
    var isNum = true;
    var ch = "";
    for (i = 0; i < str.length && isNum == true; i++) {
        ch = str.charAt(i);
        if (validCh.indexOf(ch) == -1) {
            isNum = false;
        }
    }

    //I had to recycle the code from the previous example, just to make this hurt even more
    return IsNum == true ? true : false; 
}

console.log(isNumeric("0.443.232.232...1")) // true! 😔
Enter fullscreen mode Exit fullscreen mode

A true booolean! 

const handleBoolean = value => {
  switch (value) {
    case "true":
      return true;
    case true:
      return "true";
    case 1:
      return "true";
    case "1":
      return "true";
    case "false":
      return false;
    case false:
      return "false";
    case 0:
      return "false";
    case "0":
      return "false";
    default:
      return null;
  }
}
Enter fullscreen mode Exit fullscreen mode

the big reset is coming! 

function resetform()
{
  var field1 = document.getElementById('firstName');
  field1.value = '';    
  var field2 = document.getElementById('lastName');
  field2.value = '';
  var field3 = document.getElementById('dob');
  field3.value = '';
  var field4 = document.getElementById('addLine1');
  field4.value = '';
  var field5 = document.getElementById('addLine2');
  field5.value = '';
  var field6 = document.getElementById('addLine3');
  field6.value = '';
  var field7 = document.getElementById('county');
  field7.value = '';
  var field8 = document.getElementById('postcode');
  field8.value = '';    
}
Enter fullscreen mode Exit fullscreen mode

Spooky CSS

You are still here? Wow you are a brave one. But this CSS is sure to finish you off!

Site-wide styles! 

*{
  font-size: 11px!important;
}

*{
  margin: 5px;
}

*{
  padding: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Make sure to minimise your CSS for performance this Halloween! 

.p{
  padding: 20px;
}

.m{
  margin: 10px;
}

.u{
  text-decoration: underline;
}

.r{
  color: red;
}

.rb{
  background-color: red;
}
Enter fullscreen mode Exit fullscreen mode

Var you kidding me? 

:root{
  --base: 16px;
  --small: calc(var(--base) * 0.8);
  --large: calc(var(--small) * 1.5);
  --padding1: calc(var(--large) * 0.75) calc(var(--small) * 1.2);
}

.padded{
  padding: var(--padding1);
}
Enter fullscreen mode Exit fullscreen mode

Some Pumpkin carvings to cheer you up!

You have endured a lot, once again, brave traveller.

As you have made it this far, here as some pumpkin carvings me and my friends did in the last couple of years to cheer you up!

Gizmo (Gremlins) and House Stark Sigil

Gizmo was one of my favs!

I decided to do House Stark (probably 3 years ago now)...possibly the hardest carving I have done to date, everything was so fragile!

Pumpkins carved to show Gizmo from Gremlins and the Sigil for house Stark from Game of thrones

Darth Maul

Love Star Wars or hate it...Darth Maul is still so iconic I had to carve him!

Pumpkin Carving of Darth Maul from Star Wars

 

 

Happy Halloween!

Share your Halloween pics in the comments!

 

 

Top comments (9)

Collapse
 
grahamthedev profile image
GrahamTheDev • • Edited

🎃 H̷̡̢̢̯̣̻̹͙͓̬͇̍̏̃̾̉͗̓̿̈̕̕͝͝á̴͕̱͈̲̝͍̯̰̜͖̯͚͐̄͛̍͛̀̀̆̓̕ͅp̵̺̠̬̹̣͕̜̻̞̲̼͕͖̗̤̻͇̮̹̅͜͜ṗ̸̛̣̠͎͇̤̯͍̲̥̩̳͖̳͖͗̔̐̎͂͋̃̿̍̽͜ͅͅy̷̧̡̝̫͈͎̱̰̥͎͇͖̖̺̭̞̯̱̯̭̟͓͔͕̫̎̂̇ ̸̧̢͍͔̱̹̣͙̳̩͇̬̜̦̲͔̪̪͖̹̺̪̖̗͚̞̫͊ͅȞ̷̡̭̤̦̫̭͔̮̟̞̦̹͚͂̐̈́̾̂̅́̄͗̃̀̅̓̃̑̽̒̈́̓̈́̀̂́́͑͘̕͜͝a̵̛̬̺͇͎̪̭̼͇͍͔̹̬̝̬̖͙̣͎̝̭̺̹̬̪͑̓͛͑̆̑̀̎͂̏̈́͋̈́̏̂̾͛̑͋̀͐̆̿͝l̵̫̣̯̭̝͓̜̻͖̦̃̀͗͂́̔̅̓̈́́͂̈́͘͜ͅl̵̢̨̢̲͇̠̟͈͖̘͖̹͖̖͖̗̯̜̜̘̆̅́̈́̐̈́̽͂͑́̕ͅờ̷̡̢̢̻̲̼̻̖̞̹̱͕͎̙̞̤̤͉͋͛͑̂͋̈̈́̏̋͛͗̑̾̐̕͜͠͠ͅw̸̹̩̤̆ė̴̢̧̡̡̨̫̫̦̣̟͓̼̬̦̮̘̺̰̞̯͙͈̳͗̈́̾͛́͗̓̈́͆̒̉̆̂́̍̈̀̀͗͐͐̈͆̅̍͌͘̚͜͠ę̵̛̛̳̞̙̱͇͓̠͓̲̝̪̐͆̔̈͗̅̇̔͊̍͌̍̊͘͝ͅñ̵̨̹͕̬̊͋͛̃͒̀̐̀͂̒̈́͆͘͠͠ ̴̧̢̛̛̹͈̺̟͎̉̃̿͂̓̌̾́́̈́̈́́̍̏̌͊͛̐̃͗̎͐̈́̈́͑̿͘̕E̵̢̡̛̩̯͙͍̻̤̖͈͈͔̝̻̰̺͇̣̅͐̋͋̊͐͊͗͌̽͊̑̈̓͒͋̆̉́̾͒̽̈́̇̊̓͝v̸̡̺̬̈̾̿̏́͋̂̎̒͊̉̐͛̉̂̑̽̓̉̐̉̓͛̀͘ę̴̨̢̢̖̥̞͍͚͕̼̝̦͇̙͔̱̹̯̮͍̆̅̿̆͗̓̓̏ͅr̸̡̡̡̧̛̖̬̮̝̼̻̝̳̦̹̭̙͇̜̺̳̳͉̤̭͑̽̓̓̾̓̊͗̋͗̾̈́͑͘͜͜͝ͅͅỵ̸̢̛̖̲̯̫̻̩͓̫̜̗͉̳͖̘̤̤̞̘̞̪͖̝̼̺̿͊̈́̿̂͂̐̉͂̑̀̈́̉̄̑̏̆̃̑͂̀͐͌̾͘̕͜͠͝ͅͅo̵̡̢̼͔̯̗̥͚̹̯̩͙̖̲̫͕̊̈̏͑͛̒̍͋̇̐͛̅̓̋̿̾͂̊̃͛̓̃̽̆̚͝͠n̵̡̘͔̩̻̙̱͉͉̩͎̺̯̗̥̜͇̤͕̪̫̗͈͓̊̓̉͑e̵̡̡̮̘̥̱̰̰̼̬͚̺̝̱͕̺͖̭͕̖̼̟͓͉͋́̾̈́̑̅̏̍̏̔̀͛͛̈́̉͐̋̑̕͝͠͝ͅ 🎃

Collapse
 
sudhansu profile image
Sudhansu •

Unfortunately this message was too spooky and inaccessible. But have a happy Halloween

Collapse
 
parimaldesign profile image
Parimal •

Happy Halloween! Loved the House Stark carving and last year's Venom!

Collapse
 
stealthmusic profile image
Jan Wedel •

Nice collection of spooky web dev! 🎃

Would be nice to add some explanation on why it’s bad and how to fix it. I bet not everyone knows why.

Collapse
 
grahamthedev profile image
GrahamTheDev •

That is a valid point, I don’t think I will do that here but may do a separate article for that. 🙏💗

Collapse
 
samuel-braun profile image
Samuel Braun •

I'm gonna convince myself that I have never read this article, good job, you won 🙃

Collapse
 
jacekgajek profile image
jacekgajek •

Now add some explanation why these HTML and CSS are bad for us simple BE devs. JS examples looks like a typical JS mess, no surprises here 🤷 .

Collapse
 
doxrgithub profile image
DoxrGitHub •

bro stop leaking my code 💀

Collapse
 
grahamthedev profile image
GrahamTheDev •

😱🤣💗

Read next

sharanappa_m profile image

Understanding React Router: A Step-by-Step Guide for Beginners

Sharanappa -

cryptosandy profile image

How Gamification in Web Development Can Supercharge User Experience

Crypto.Andy (DEV) -

mochafreddo profile image

Understanding SNI (Server Name Indication) and Modern Encryption Solutions

Geoffrey Kim -

c_yatteau profile image

Enhance Your ArcGIS Web App with OpenAI

Courtney Yatteau -