JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">

  <form id="myForm">
  
    <label for="myInput">Enter something:</label>
  <input type="text" id="myInput" onchange="handleInputChange()"><br><br>
  
  
    <input type="number" name="number" id="number" placeholder="Age" min="18" max="99" onchange="numberValidation()">
    
    <span id="number-error"></span>
    
    <br>
    
    

    <input type="email" name="email" required placeholder="[email protected]"><br>
<!--    
    <input type="text" name="zipcode" placeholder="Zipcode" pattern="[0-9]{5}"><br>
    <input type="text" name="username" placeholder="User name" required title="Please enter your username"><br>



        <label for="button">button:</label><br>
        <input type="button" name="button" id="button" value="button">

        <hr>

        <label for="checkbox">checkbox:</label><br>
        <input type="checkbox" name="checkbox" id="checkbox" placeholder="checkbox">

        <hr>

        <label for="color">color:</label><br>
        <input type="color" name="color" id="color" placeholder="color">

        <hr>

        <label for="date">date:</label><br>
        <input type="date" name="date" id="date" placeholder="date">

        <hr>

        <label for="datetime-local">datetime-local:</label><br>
        <input type="datetime-local" name="datetime-local" id="datetime-local" placeholder="datetime-local">

        <hr>

        <label for="email">email:</label><br>
        <input type="email" name="email" id="email" placeholder="email">

        <hr>

        <label for="file">file:</label><br>
        <input type="file" name="file" id="file" placeholder="file">

        <hr>

        <label for="hidden">hidden:</label><br>
        <input type="hidden" name="hidden" id="hidden" placeholder="hidden">

        <hr>

     ...

CSS

html,body {
  color: #454545;
}

.container {
  margin-top: 5%;
}

input {
  width: 100%;
}

JavaScript

function handleInputChange() {
      var inputElement = document.getElementById("myInput");
      var inputValue = inputElement.value;
      alert("Input value changed to: " + inputValue);
    }


    function validateForm() {

      const form = document.getElementById("myForm");
      if (form.checkValidity()) {
        alert("Form is valid and can be submitted.");
      } else {
        alert("Form is not valid. Please correct the errors.");
      }

    }

    function numberValidation() {

      const form = document.getElementById("number")

      let text = '';


      // Check if the attribute exists
      if (form.hasAttribute("min")) {
        // Get the value of the attribute
        text += "min: " + form.getAttribute("min") + ", ";

      }

      // Check if the attribute exists
      if (form.hasAttribute("max")) {
        // Get the value of the attribute
        text += "max: " + form.getAttribute("max");

      }


      if (form.validity.rangeOverflow || form.validity.rangeUnderflow) {
        message = "allowed ranges: " + text + " - range given: " + form.value;
      }

      document.getElementById("number-error").innerHTML = message;

    }