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

<div tabindex="3">
  <div role="button">
    <a href="#">
      <svg> … </svg>
    </a>  
  </div>
</div>

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

<div
  role="sign-up"
>
    Sign up today!
</div
>

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

<a href="about">
  <header>About</header>
</a>
<a href="faqs">
  <header>FAQs</header>
</a>
<a href="contact">
  <header>Contact</header>
</a>

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"

let disabledState = false;

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

let disabledVal = isDisabled(disabledState);
console.log(disabledVal);

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

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;
  }
}

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 = '';    
}

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

*{
  margin: 5px;
}

*{
  padding: 10px;
}

.p{
  padding: 20px;
}

.m{
  margin: 10px;
}

.u{
  text-decoration: underline;
}

.r{
  color: red;
}

.rb{
  background-color: red;
}

: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);
}