Loading

Prototyping party – micro interaction template

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Prototyping party – micro interaction template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<div id="foo"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<script src='https://unpkg.com/styled-components/dist/styled-components.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
.button {
  background-color: #68C542;
  border: 0;
  border-radius: var(--border-radius-base);
  color: white;
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.button--is-loading {}

.button--success {
  background-color: blue;
  -webkit-animation: customSuccessAnimation 300ms ease-in-out;
          animation: customSuccessAnimation 300ms ease-in-out;
}

.button--error {
  background-color: red;
  -webkit-animation: customErrorAnimation 150ms ease-in-out;
          animation: customErrorAnimation 150ms ease-in-out;
}

input {
  padding: 0.68rem;
}


@-webkit-keyframes customErrorAnimation {
  0% {
    -webkit-transform: translateX(-10%);
            transform: translateX(-10%);
  }
  50% {
    -webkit-transform: translateX(10%);
            transform: translateX(10%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}


@keyframes customErrorAnimation {
  0% {
    -webkit-transform: translateX(-10%);
            transform: translateX(-10%);
  }
  50% {
    -webkit-transform: translateX(10%);
            transform: translateX(10%);
  }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@-webkit-keyframes customSuccessAnimation {
  0% {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  50% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes customSuccessAnimation {
  0% {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  50% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}


/* spacing */
p + p,
h2 + p {
  margin-top: 1.5rem;
}

.modal {
  background-color: rgba(00, 00, 00, 0.033);
  padding: 1.5rem;
  max-width: 33rem;
  margin-right: auto;
  margin-left: auto;
}

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[12];
      grid-template-columns: repeat(12, 1fr);
  grid-row-gap: 1.5rem;
  grid-column-gap: 1.5rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
}

label {
  -ms-grid-column: span 8;
      grid-column: span 8;
}

label input {
  margin-top: 1rem;
  width: 100%;
  height: 44px;
  border-radius: 4px;
  border: none;
  box-shadow: inset 0 0 0 1px #ccc;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

label {
  -ms-grid-column: span 8;
      grid-column: span 8;
}

.button {
  -ms-grid-column: span 4;
      grid-column: span 4;
  height: 44px;
}


* {
  box-sizing: border-box;
}
/* Downloaded from https://ahoj.co.uk/ */
'use strict';

var _templateObject = _taggedTemplateLiteralLoose(['\n  :root {\n    --font-family-fallback: -apple-system, system-ui, blinkmacsystemfont, \'Segoe UI\', \'Roboto\', \'Oxygen\', \'Ubuntu\', \'Cantarell\', \'Fira Sans\';\n    --font-family-serif: \'Source Serif Pro\', \'Georgia\', \'Times New Roman\';\n    --font-family-sans:  \'Source Sans Pro\', \'Helvetica Neue\', Helvetica, Arial, sans-serif;\n    --font-family-mono:  \'Source Code Pro\', Apercu, \'Fira Mono\', Courier, monospace;\n    --border-radius-base: 4px;\n  }\n\n  * {\n    margin: 0;\n  }\n\n  *:focus {\n    outline: none;\n    box-shadow: 0 0 3px #00ACCF, 0 0 7px #00aCCF;\n  }\n\n  html,\n  body {\n    width: 100%;\n    min-height: 100vh;\n   \n  }\n\n  html {\n    font-size: 100%;\n    font-kerning: normal;\n    -webkit-font-smoothing: subpixel-antialiased;\n  }\n\n  body {\n    font-family: "Gotham", var(--font-family-fallback);\n    color: #464646;\n  }\n\n  *::selection {\n    background-color: #FFF3E2;\n  }\n'], ['\n  :root {\n    --font-family-fallback: -apple-system, system-ui, blinkmacsystemfont, \'Segoe UI\', \'Roboto\', \'Oxygen\', \'Ubuntu\', \'Cantarell\', \'Fira Sans\';\n    --font-family-serif: \'Source Serif Pro\', \'Georgia\', \'Times New Roman\';\n    --font-family-sans:  \'Source Sans Pro\', \'Helvetica Neue\', Helvetica, Arial, sans-serif;\n    --font-family-mono:  \'Source Code Pro\', Apercu, \'Fira Mono\', Courier, monospace;\n    --border-radius-base: 4px;\n  }\n\n  * {\n    margin: 0;\n  }\n\n  *:focus {\n    outline: none;\n    box-shadow: 0 0 3px #00ACCF, 0 0 7px #00aCCF;\n  }\n\n  html,\n  body {\n    width: 100%;\n    min-height: 100vh;\n   \n  }\n\n  html {\n    font-size: 100%;\n    font-kerning: normal;\n    -webkit-font-smoothing: subpixel-antialiased;\n  }\n\n  body {\n    font-family: "Gotham", var(--font-family-fallback);\n    color: #464646;\n  }\n\n  *::selection {\n    background-color: #FFF3E2;\n  }\n']),
    _templateObject2 = _taggedTemplateLiteralLoose(['\n  ', '\n'], ['\n  ', '\n']),
    _templateObject3 = _taggedTemplateLiteralLoose(['\n    --spacing-smaller: 0.25rem;\n    --spacing-small:   0.5rem;\n    --spacing-default: 1rem;\n    --spacing-large:   2rem;\n    --spacing-larger:  2.5rem;\n    --gutter: var(--spacing-default);\n    --optical-adjustment: 0.375em;\n    margin-right: var(--gutter);\n    margin-left: var(--gutter);\n    margin-top: var(--spacing-larger);\n  \n    @media screen and (min-width: ', 'rem) {\n      --spacing-smaller: ', ';\n      --spacing-small:   ', ';\n      --spacing-default: ', ';\n      --spacing-large:   ', ';\n      --spacing-larger:  ', ';\n      --gutter:         var(--spacing-larger);\n      margin-right: auto;\n      margin-left: auto;\n      padding-right: var(--gutter);\n      padding-left: var(--gutter);\n      max-width: 1316px;\n    }\n\n    @media screen and (min-width: ', 'rem) {\n      --spacing-smaller: 0.25rem;\n      --spacing-small:   0.5rem;\n      --spacing-default: 1rem;\n      --spacing-large:   1.75rem;\n      --spacing-larger:  4rem;\n    }\n'], ['\n    --spacing-smaller: 0.25rem;\n    --spacing-small:   0.5rem;\n    --spacing-default: 1rem;\n    --spacing-large:   2rem;\n    --spacing-larger:  2.5rem;\n    --gutter: var(--spacing-default);\n    --optical-adjustment: 0.375em;\n    margin-right: var(--gutter);\n    margin-left: var(--gutter);\n    margin-top: var(--spacing-larger);\n  \n    @media screen and (min-width: ', 'rem) {\n      --spacing-smaller: ', ';\n      --spacing-small:   ', ';\n      --spacing-default: ', ';\n      --spacing-large:   ', ';\n      --spacing-larger:  ', ';\n      --gutter:         var(--spacing-larger);\n      margin-right: auto;\n      margin-left: auto;\n      padding-right: var(--gutter);\n      padding-left: var(--gutter);\n      max-width: 1316px;\n    }\n\n    @media screen and (min-width: ', 'rem) {\n      --spacing-smaller: 0.25rem;\n      --spacing-small:   0.5rem;\n      --spacing-default: 1rem;\n      --spacing-large:   1.75rem;\n      --spacing-larger:  4rem;\n    }\n']),
    _templateObject4 = _taggedTemplateLiteralLoose(['\n  padding: var(--spacing-small) var(--spacing-large);\n  font-size: inherit;\n  line-height: inherit;\n  ', '\n'], ['\n  padding: var(--spacing-small) var(--spacing-large);\n  font-size: inherit;\n  line-height: inherit;\n  ', '\n']);

function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }

// minScreen, maxScreen, and units are optional
var sizes = {
  'small': 465 / 16,
  'medium': 600 / 16,
  'large': 1248 / 16,
  'larger': 1440 / 16
};

function responsiveSize(minFont, maxFont, minScreen, maxScreen, units) {
  if (!minFont) minFont = 1.125;
  if (!maxFont) maxFont = 1.25;
  if (!minScreen) minScreen = sizes.medium;
  if (!maxScreen) maxScreen = sizes.large;
  if (!units) units = "rem";
  return 'calc(' + minFont + units + ' + ' + (maxFont - minFont) + ' * (100vw - ' + minScreen + units + ') / ' + (maxScreen - minScreen) + ');';
}

var typestyles = {
  'small': 'font-size: ' + 13 / 16 + 'rem;\n     line-height: ' + 20 / 13 + ';',

  'base': 'line-height: ' + 24 / 16 + ';',

  'heading5': 'font-size:   ' + 18 / 16 + 'rem;\n     line-height: ' + 32 / 20 + ';\n     font-weight: 500;\n     @media screen and (min-width: ' + sizes.medium + 'rem)  { font-size: ' + responsiveSize(18 / 16, 20 / 18) + ' }\n     @media screen and (min-width: ' + sizes.large + 'rem) { font-size: ' + 20 / 16 + 'rem; }',

  'heading4': 'font-size:   ' + 20 / 16 + 'rem;\n     line-height: ' + 36 / 26 + ';\n     font-weight: 800;\n     @media screen and (min-width: ' + sizes.medium + 'rem)  { font-size: ' + responsiveSize(20 / 16, 26 / 16) + ' }\n     @media screen and (min-width: ' + sizes.large + 'rem) { font-size: ' + 26 / 16 + 'rem; }',

  'heading3': 'font-size:   ' + 22 / 16 + 'rem;\n     line-height: ' + 40 / 33 + ';\n     font-weight: 800;\n     @media screen and (min-width: ' + sizes.medium + 'rem)  { font-size: ' + responsiveSize(22 / 16, 33 / 16) + ' }\n     @media screen and (min-width: ' + sizes.large + 'rem) { font-size: ' + 33 / 16 + 'rem; }',

  'heading2': 'font-size:   ' + 25 / 16 + 'rem;\n     line-height: ' + 44 / 42 + ';\n     font-weight: 800;\n     @media screen and (min-width: ' + sizes.medium + 'rem)  { font-size: ' + responsiveSize(25 / 16, 42 / 16) + ' }\n     @media screen and (min-width: ' + sizes.large + 'rem) { font-size: ' + 42 / 16 + 'rem; }',

  'heading1': 'font-size:   ' + 28 / 16 + 'rem;\n     line-height: ' + 56 / 54 + ';\n     font-weight: 800;\n     @media screen and (min-width: ' + sizes.medium + 'rem)  { font-size: ' + responsiveSize(28 / 16, 54 / 16) + ' }\n     @media screen and (min-width: ' + sizes.large + 'rem) { font-size: ' + 54 / 16 + 'rem; }'
};

var base = styled.css(_templateObject);

var H1 = styled.default.h1(_templateObject2, typestyles.heading1);

var H2 = styled.default.h2(_templateObject2, typestyles.heading2);

var H3 = styled.default.h3(_templateObject2, typestyles.heading3);

var H4 = styled.default.h4(_templateObject2, typestyles.heading4);

var H5 = styled.default.h5(_templateObject2, typestyles.heading5);

var P = styled.default.p(_templateObject2, typestyles.base);

var Small = styled.default.p(_templateObject2, typestyles.small);

var FluidType = styled.default.main(_templateObject3, sizes.medium, responsiveSize(0.25, 0.25), responsiveSize(0.5, 0.5), responsiveSize(1, 1), responsiveSize(2, 1.75), responsiveSize(2.5, 4), sizes.large);

var Button = styled.default.button(_templateObject4, typestyles.base);

styled.injectGlobal(base);

var Application = function Application() {
  return React.createElement(
    FluidType,
    null,
    React.createElement(
      'form',
      { className: 'modal' },
      React.createElement(
        H2,
        null,
        'Subscribe to Newsletter'
      ),
      React.createElement(
        P,
        { className: 'grid' },
        React.createElement(
          'label',
          { 'for': 'email' },
          'Email',
          React.createElement('input', { id: 'email', type: 'email' })
        ),
        React.createElement(
          Button,
          { type: 'submit', id: 'validate', className: 'button' },
          'Validate!'
        )
      )
    ),
    React.createElement(P, { id: 'result' })
  );
};

ReactDOM.render(React.createElement(Application, null), document.getElementById('foo'));

var elem = document.querySelector(".button"); //select the element

(function () {
  $(function () {
    var validate, validateEmail;
    validateEmail = function validateEmail(email) {
      var emailReg;
      emailReg = /^(([^<>()\[\]\\.,;:\s@\"]+(\.[^<>()\[\]\\.,;:\s@\"]+)*)|(\"\.+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return emailReg.test(email);
    };
    validate = function validate() {
      var email;
      email = $("#email").val();
      if (validateEmail(email)) {
        $(elem).removeClass('button--error');
        $(elem).addClass('button--success');
        $("#result").text(email + " is valid :)");
        $("#result").css("color", "green");
        setTimeout(function () {
          $(elem).removeClass('button--success');
          $(elem).removeClass('button--error');
        }, 1000);
      } else {
        $(elem).removeClass('button--success');
        $(elem).addClass('button--error');
        $("#result").text(email + " is not valid");
        $("#result").css("color", "red");
        setTimeout(function () {
          $(elem).removeClass('button--success');
          $(elem).removeClass('button--error');
        }, 1000);
      }
      return false;
    };
    $("form").bind("submit", validate);
    return validateEmail();
    //or give it a function name
  });
}).call(undefined);

This awesome code is write by Zane Riley, you can se more from this user in the personal repository