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ฬทฬฬฬ•ฬƒฬ•ออฬพฬ‰อ—ฬ“ฬฟฬˆฬฏฬกฬฃฬปฬนอ™อ“ฬฌฬขฬขอ‡aฬดฬอฬ•ฬ„อ›ฬอ›ฬ€ฬ€ฬ†ฬ“อ•ฬฑอˆฬฒฬอฬฏฬฐฬœอ…อ–ฬฏอšpฬตฬ…ฬบฬ ฬฌฬนฬฃอ•อœฬœฬปฬžฬฒฬผอ•อ–อœฬ—ฬคฬปอ‡ฬฎฬนpฬธฬ›ฬ‡อ—ฬ”ฬฬŽอ‚อ‹ฬƒฬฟฬฬฝฬฃฬ อ…อŽอ‡ฬคฬฏอฬฒอ…อœฬฅฬฉฬณอ–ฬณอ–yฬทฬŽฬ‚ฬ‡ฬฬซอˆอŽฬฑฬฐฬฅอŽอ‡อ–ฬ–ฬบฬญฬžฬฏฬฑฬงฬฏฬญฬŸอ“อ”ฬกอ•ฬซ ฬธอŠออ”ฬฑฬงฬนฬฃอ™ฬณฬฉอ‡อ…ฬฌฬœฬขฬฆฬฒอ”ฬชฬชอ–ฬนฬบฬชฬ–ฬ—อšฬžฬซHฬทฬŒอ‚อ˜ฬอ„ฬพฬ‚ฬ…อฬ„อ—ฬƒอ€ฬ…อƒฬƒฬ‘ฬฝฬ’ฬ•อ„ฬ“อ„อ€ฬ‚ออออ‘ฬญฬคฬฆฬซอœฬญอ”ฬฎฬŸฬžฬฆฬกฬนอšaฬตอ‘ฬ“อ›อ‘ฬ†ฬ‘อ€ฬŽฬ›อ‚ฬอ„อ‹อ„ฬฬ‚ฬพอ›ฬ‘อ‹ฬ€ออฬ†ฬฟฬฌฬบอ‡อŽฬชฬญฬผอ‡ออ”ฬนฬฌฬฬฌฬ–อ™ฬฃอŽฬฬญฬบฬนฬฌฬชlฬตฬƒฬ€อ—อ‚อฬ”ฬ…อ˜ฬ“อ„ฬอ‚อ„ฬซฬฃฬฏฬญฬอ“ฬœฬปอœอ…อ–ฬฆlฬตฬ†ฬ…ออ„ฬฬ•อ„ฬฝอ‚อ‘อฬฒอ‡ฬ ฬŸอˆอ–ฬ˜ฬขอ–ฬนอ–อ…ฬ–ฬจอ–ฬ—ฬฏฬœฬœฬ˜ฬขoฬทอ ฬ€อ‹อ›อ‘ฬ›ฬ‚อ‹ฬˆอ„ฬฬ‹อ อ›อ—ฬ‘ฬพฬฬ•ฬปฬฒฬผฬกฬขฬปฬ–ฬžฬนอ…ฬฑอ•อŽอœฬขฬ™ฬžฬคฬคอ‰wฬธฬ†ฬนฬฉฬคeฬดฬ‡อ—อ„ฬพอ›ฬอ—ฬ“อ„อ†ฬ’อ ฬ‰ฬ†ฬ‚ฬฬฬˆอ€ฬ€อ—ออ˜อฬˆฬšอ†ฬ…ฬอŒฬซฬซฬขฬฆฬฃฬŸอ“ฬงฬผฬฌฬฆฬฎฬกฬ˜ฬบฬฐฬžฬกฬฏอ™อˆอœฬณฬจeฬตฬฬ›อ†ฬ”ฬˆฬ›อ—อ˜ฬ…ฬ‡ฬ”อŠฬอŒฬฬŠอฬณฬžฬจฬ™ฬฑอ‡อ“ฬ อ“อ…ฬฒฬฬชnฬตฬƒฬŠอ อ‹อ›อ ฬƒอ’อ€ฬอ€อ˜อ‚ฬ’อ„อ†ฬจฬนอ•ฬฌ ฬดฬ‰ฬ›อ˜ฬƒฬฟอ‚ฬ›อƒฬŒฬพฬฬอ„อ„อฬฬฬŒฬ•อŠอ›ฬฬƒอ—ฬŽออ„อ„อ‘ฬฟฬนฬงอˆฬบฬŸฬขอŽEฬตฬ…อฬ‹อ‹ฬŠออŠอ—อŒอฬฝอŠฬ‘ฬˆฬ›ฬ“อ’อ‹ฬ†ฬ‰อฬพอ’ฬฝอ„ฬ‡ฬŠฬ“ฬฉฬฏอ™อฬปฬขฬกฬคฬ–อˆอˆอ”ฬฬปฬฐฬบอ‡ฬฃvฬธอ˜ฬˆฬพฬฟฬออ‹ฬ‚ฬŽฬ’อŠฬ‰ฬอ›ฬ‰ฬ‚ฬ‘ฬฝอƒฬ‰ฬฬ‰ฬ“อ›อ€ฬบฬฌฬกeฬดฬ†ฬ…ฬฟฬ†อ—อƒอƒฬฬ–ฬจฬฅฬžออšฬจอ•ฬผฬฬฆอ‡ฬ™อ…อ”ฬฑฬขฬนฬฏฬฎอฬขrฬธอ‘ฬฝฬ“ฬ›ฬ“อ˜ฬพอฬ“ฬŠอ—ฬ‹อ—ฬพอ„อ‘ฬ–ฬฌอ…ฬฎฬกฬอœฬผฬกฬปฬฬณอœฬฆฬนฬญฬ™อ…อ‡ฬœฬบฬณฬณฬกอ‰ฬคฬญฬงyฬธฬฟอŠอ„ฬฟอ ฬ‚อ‚ฬฬ‰อ‚ฬ‘อ˜ฬ€อ„ฬ‰ฬ„ฬ‘ฬฬ†ฬƒฬ‘อ‚ฬ€ฬ›อฬ•อŒอฬพฬฃฬ–ฬฒฬฏฬซฬปฬฉอ“อœฬซฬœฬ—อ‰ฬณอ–ฬ˜ฬคฬคฬžฬ˜ฬžฬชอ–อ…อ…ฬฬผฬบฬขoฬตอฬŠฬˆฬอ‘อ›ฬ’ฬอ‹อ ฬ‡ฬšฬอ›ฬ…ฬ“ฬ‹ฬฟฬพอ‚ฬŠฬƒอ›ฬ“ฬƒฬฝฬ†ฬผอ”ฬฏฬกฬ—ฬฅอšฬนฬฏฬฉอ™ฬ–ฬฒฬซฬขอ•nฬตฬŠอƒฬ‰อ‘ฬ˜อ”ฬฉฬปฬ™ฬฑอ‰ฬกอ‰ฬฉอŽฬบฬฏฬ—ฬฅฬœอ‡ฬคอ•ฬชฬซฬ—อˆอ“eฬตอ‹ออฬพอ„ฬ‘ฬ…ฬฬฬฬ”อ€อ›อ›อ„อ ฬ‰ออฬ•ฬ‹ฬ‘ฬฎฬ˜อ…ฬฅฬฑฬฐฬฐฬผฬฌอšฬบฬกฬฬฑอ•ฬบอ–ฬญอ•ฬ–ฬผฬŸอ“อ‰ฬก ๐ŸŽƒ

Collapse
 
thelazylearner 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

thejoernal profile image

Add basic animations to your site using Animate.css and wow.js

Joseph Ochego -

nnnirajn profile image

Elevate Your Web Design: Mastering React-Select Styling

Niraj Narkhede -

cammanhhoang profile image

What is Promise in Javascript with real world example

Hoang Manh Cam -

jquinten profile image

Vitest In-Source Testing for SFC in Vue?

Joran Quinten -