<div class="wrapper">
  <h1>The importance of the type attribute for buttons</h1>
</div>

<div class="wrapper">
  <form action="" id="my-form">
    <fieldset>
      <legend>The Form</legend>
      <p>These buttons are within the <code>form</code> tag.</p>
      <p>When the form is submitted, the background colour changes.</p>
      <button type="submit">"Submit" type</button>
      <button type="button">"Button" type</button>
      <button type="reset">"Reset" type</button>
      <button>No type</button>
    </fieldset>
  </form>
</div>


<div class="wrapper">
  <p>For comparison, these buttons are outside the form. They don't trigger the <code>submit</code> event, and therefore do nothing.</p>
  <p>
    <button type="submit">"Submit" type</button>
    <button type="button">"Button" type</button>
    <button type="reset">"Reset" type</button>
    <button>No type</button>
  </p>
</div>

<div class="wrapper">
  <p>The form above executes a JavaScript function on the <code>submit</code> event. The function changes the background colour of this page. The form contains four buttons, each with a different <code>type</code> attribute value: <code>type="submit"</code>, <code>type="button"</code>, <code>type="reset"</code> and no <code>type</code> attribute. Click each button and notice which ones trigger the <code>onsubmit</code> event. You may be surprised! Or not.</p>
</div>

$color-button: #d32f2f;
$color-button: #d32f2f;
$color-button-background: #fdfdfd;
$color-shadow: #222;
$color-wrapper-background: #f3f3f3;
$color-submit-button: #388e3c;
$color-button-button: #1565c0;
$color-reset-button: #f57c00;

button {
  height: 36px;
  border: 3px solid $color-button;
  font-size: 16px;
  background-color: $color-button-background;
  cursor: pointer;
  color: $color-button;
  box-shadow: 3px 3px $color-shadow;
  margin-right: 10px;
  margin-top: 10px;
  padding: 0 20px;

  &:hover {
    opacity: 0.7;
  }

  &:active {
    background-color: #eee;
    opacity: 1;
  }
}

button[type="submit"] {
  border: 3px solid $color-submit-button;
  color: $color-submit-button;
}

button[type="button"] {
  border: 3px solid $color-button-button;
  color: $color-button-button;
}

button[type="reset"] {
  border: 3px solid $color-reset-button;
  color: $color-reset-button;
}

.wrapper {
  background-color: $color-wrapper-background;
  border-radius: 3px;
  padding: 5px;
  margin-bottom: 15px;
  box-shadow: 5px 5px $color-shadow;
  border: 1px solid $color-shadow;
  margin-bottom: 25px;
}

body {
  font-family: Raleway, sans-serif;
  padding: 0 5%;
}

h1 {
  margin: 0;
}

fieldset {
  border: 3px dashed $color-shadow;
}

let changeBackground = function(e) {
  // Thnx https://www.paulirish.com/2009/random-hex-color-code-snippets/
  let newRandomHex = "#" + Math.floor(Math.random() * 16777215).toString(16);
  console.log(newRandomHex);
  document.body.style.backgroundColor = newRandomHex;
};

let form = document.querySelector("#my-form");

form.addEventListener(
  "submit",
  function(e) {
    e.preventDefault();
    changeBackground();
  },
  false
);