LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Login

CSS
* {
  font-size: 14px;
}
body {
  background-color: #eee;
  margin-top: 50px;
  font-family: Verdana;
}
div.card {
  margin: auto;
  width: 400px;
  height: 190px;
  background-color: white;
  border-radius: 2px;
  box-shadow: 0px 3px 3px silver;
  padding: 25px;
}
div.card h1 {
  margin: 0 0 20px 0;
  font-weight: normal;
  color: #03a9f4;
  font-size: 30px;
}
div.card label {
  float: left;
  padding: 10px 10px 14px 0;
  width: 175px;
  margin-top: 10px;
  clear: left;
}
div.card input {
  float: right;
  border: 2px solid silver;
  padding: 8px 0;
  border-width: 0 0 2px 0;
  width: 200px;
  margin-top: 15px;
  transition: border-color 0.3s;
}
div.card input:focus,
div.card input:hover {
  border-color: #03a9f4;
  outline: 0;
}
div.card input.warning {
  border-color: #ff9800;
}
div.card input.error {
  border-color: #f44336;
}
div.card input.valid {
  border-color: #4caf50;
}
div.card input[type=submit] {
  border: 0;
  background-color: white;
  color: #03a9f4;
  text-transform: uppercase;
  width: auto;
  cursor: pointer;
}
JS
/**
* Uses my experimental, modular and far from ready JavaScript framework :)
*/

//select the modules to use
I.use('core');
I.use('validation');
I.use('events');
I.use('selectors');

//wait for all the modules to be loaded
I.go(function() {
  I.bind('change keyup blur focus').to('input', function(e) {
    if (I.am.valid(e)) {
      e.srcElement.className = 'valid';
    } else if (e.type === 'blur') {
      e.srcElement.className = 'error';
    } else if (I.am.empty(e.srcElement.value)) {
      e.srcElement.className = 'warning';
    } else {
      e.srcElement.className = '';
    }
  });

  I.bind('click').to('input[type="submit"]', function(e) {
    var inputs = I.select('input');
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].focus();
    }
    if (I.select('input.error').length) {
      e.preventDefault();
    }
    //always nu-uh submit on codepen ;)
    e.preventDefault();
  });
});
Host Instantly Drag and Drop Website Builder

 

Description

Material design login screen with validation featuring my experimental JavaScript framework
Term
Tue, 12/26/2017 - 09:46

Related Codes

Pen ID
Pen ID
Pen ID