Steamforge

Floating label

A Pen by Josh Studley on CodePen.

License.

Steamforge

const FloatLabel = (() => {
  
  // add active class
  const handleFocus = (e) => {
    const target = e.target;
    target.parentNode.classList.add('active');
    target.setAttribute('placeholder', target.getAttribute('data-placeholder'));
  };
  
  // remove active class

Steamforge

// an array of colors
let colors = ['red', 'green', 'blue'];

// a function to build a list
let makeTemplate = function (data) {
  let newList = '';
  data.forEach(function(element) {
    newList += `<li>${element}</li>`;
  });
  return newList;

Steamforge

<form id="signUpForm">
  <input type="email" id="emailField" required>
  <button id="okButton" disabled>OK</button>
</form>

<script>
const signUpForm = document.getElementById('signUpForm');
const emailField = document.getElementById('emailField');
const okButton = document.getElementById('okButton');