JSFiddle - React, Tailwind, and code Playground

by Ken Sprague

HTML

<html>

  <head>
    <meta charset="UTF-8" />
    <title>Assignment - JavaScript Events</title>
    <style type="text/css">
      body {
        

    </style>
    <script type="text/javascript" src="js/events.js"></script>
  </head>

  <body onload="doOnLoad(this)">
    <h1>Illustrating JavaScript Events</h1>
    <p id="status"><img src="images/blank.png" alt="event image" id="event_image" /><br/>
      <span id="statuscaption">Event images and messages will display here.</span></p>
    <p><a id="mylink" href="#" onclick="doOnClick(this)" />Create Onclick</p>
    <p id="mypara" class="p1"><a href="#" onmouseover="doOnMouseOver(this)" onmouseout="doOnMouseOut(this)">Mouseover and out of this paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel risus at augue semper hendrerit.</a></p>
    <form id="myform" action="http://cscie12.dce.harvard.edu/cgi-bin/echo.cgi" onsubmit=" return doOnSubmit(this)">
      <fieldset>
        <legend>Form</legend>
        <p>
          <label for="myname">Name</label> :
          <br/>
          <input id="myname" type="text" name="name" onfocus="doOnFocus(this)" onblur="doOnBlur(this)" />
        </p>
        <p>
          <input type="checkbox" id="optin" name="optin" value="Y" onclick=" return doOnClick(this)" />
          <label for="optin">Opt-in to receive promotional offers</label>
        </p>
        <p>Please select a direction:<br/>
          <select id="mydirection" name="direction" onchange="doOnChange(this)">
      <option value="N">North</option>
      <option value="S">South</option>
      <option value="E">East</option>
      <option value="W">West</option>
    </select>
        </p>
        <p>
          <input type="submit" name="Submit" value="Submit" />
        </p>
      </fieldset>
    </form>
  </body>

</html>

CSS

font-family: calibri, verdana, tahoma, helvetica, sans-serif;
      }

      .p1 {
        padding: 0.5em;
        width: 20%;
        border: thin solid green;
        background-color: #CCFFCC
      }

      #status {
        background-color: #ccc;
        margin: 1em;
        padding: 0.5em;
        width: 300px;
        float: right;
        border: medium solid black;
      }

      #statuscaption {
        font-size: larger;
      }

      #status img {
        border: thin solid black;
      }

JavaScript

function doOnClick(myObj) {
  if (typeof console == "object") {
    console.log("A 'click' event occured");
    console.log(myObj);
  }
  updateStatusBox("images/click.png", "<strong>click</strong> event occured");
}

function doOnLoad() {
  if (typeof console == "object") {
    console.log("A 'load' event occured");
  }
  updateStatusBox("images/load.png", "<strong>load</strong> event occured");
}

function doOnMouseOver(myObj) {
  if (typeof console == "object") {
    console.log("A 'mouseover' event occured");
    console.log(myObj);
  }
  updateStatusBox("images/mouseover.png", "<strong>mouseover</strong> event occured");
}

function doOnMouseOut(myObj) {
  if (typeof console == "object") {
    console.log("A 'mouseout' event occured");
    console.log(myObj);
  }
  updateStatusBox("images/mouseout.png", "<strong>mouseout</strong> event occured");
}

function doOnSubmit(myObj) {
  if (typeof console == "object") {
    console.log("A 'submit' event occured");
    console.log(myObj);
  }
  updateStatusBox("images/submit.png", "<strong>submit</strong> event occured");
  return false;
}

function doOnChange(myObj) {
  if (typeof console == "object") {
    console.log("A 'change' event occured");
    console.log(myObj);
  }
  var selectdir = document.getElementById('mydirection');
  var direction = selectdir.options[selectdir.selectedIndex].value;
  var lcdirection = direction.toLowerCase();
  updateStatusBox("images/" + lcdirection + ".png", "<strong>change</strong> event occured");
}

function doOnBlur(myObj) {
  if (typeof console == "object") {
    console.log("An 'onblur' event occured");
    console.log(myObj);
  }
  updateStatusBox("images/blur.png", "<strong>blur</strong> event occured");
}

function doOnFocus(myObj) {
  if (typeof console == "object") {
    console.log("A 'focus' event occured");
    console.log(myObj);
  }
  updateStatusBox("images/focus.png", "<strong>focus</strong> event occured");
}

function updateStatusBox(img, msg) {
 ...