snowleo208

// from google
<noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)

snowleo208

const inputList = Array.prototype.slice.call(document.getElementsByTagName('input')).filter(item => item.type !== 'submit' && item.type !== 'checkbox');
const input = inputList.concat(Array.prototype.slice.call(document.getElementsByTagName('textarea')));

//valid each item and set error message
  function isValid(input) {
    const target = input.id ? input.id : input.target.id;
    const valid = document.getElementById(target).validity.valid;
    if (valid) {
      document.getElementById(`${target}-error`).classList.remove('invalid');
      document.getElementById(`${target}-error`).removeAttribute('role');

snowleo208

<form class="c-form" id="form">
    <label for="email"><span class="c-form-label">Email <abbr title="Required">*</abbr></span>
        <input class="c-form-input" id="form-email" type="email" name="email" required="required" pattern=".{3,}" />
        <span class="u-alert" id="form-email-error">Please enter a valid email format</span>
    </label>
    <label for="name"><span class="c-form-label">Name</span>
        <input class="c-form-input" id="form-name" type="text" name="name" pattern="^[A-Za-z ,.'-]+$" />
        <span class="u-alert" id="form-name-error">Please enter a valid name with alphabets only</span>
    </label>
    <label for="message"><span class="c-form-label">Message <abbr title="Required">*</abbr></span>

snowleo208

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<map xmlns:xs="http://www.w3.org/2001/XMLSchema-instance" xs:noNamespaceSchemaLocation="../../map.xsd">
    <source>
        <document_rules>

snowleo208

//ease in function from https://github.com/component/ease/blob/master/index.js
const outQuad = function(n){
  return n * (2 - n);
};
    
let easeInPercentage = +(outQuad(progress)).toFixed(2);

pos = (target === 0)? (firstPos - (firstPos * easeInPercentage)) : (firstPos + (target * easeInPercentage));

snowleo208

// if target is 0 (back to top), 
// the position is: 
// current pos + (current pos * percentage of duration)

// if target > 0 (not back to top), 
// the positon is current pos + (target pos * percentage of duration)
pos = (target === 0)? (firstPos - (firstPos * progress)) : (firstPos + (target * progress));
    
window.scrollTo(0, pos);
    

snowleo208

function showAnimation (timestamp) {

    if(!start) { start = timestamp || new Date().getTime(); } //get id of animation
    
    let elapsed = timestamp - start;
    let progress = elapsed / 600; // animation duration 600ms
    
  }

snowleo208

function scroll(element) {
  let start = null;
  const target = element && element? element.getBoundingClientRect().top : 0;
  const firstPos = window.pageYOffset || document.documentElement.scrollTop;
  let pos = 0;
  
  window.requestAnimationFrame(showAnimation);
  
}

snowleo208

window.addEventListener("load", function() {
  // use slice for supporting IE 11
  Array.prototype.slice.call(document.querySelectorAll('.menu-item')).forEach(item => {
    const target = item.getAttribute('data-id');
    
    item.addEventListener('click', e => {
      e.preventDefault();
      scroll(document.getElementById(target));
    });
    

snowleo208

<div class="table-container" role="table" aria-label="Destinations">
  <div class="flex-table header" role="rowgroup">
  <div class="flex-row first" role="columnheader">Country</div>
  <div class="flex-row" role="columnheader">Events</div>
  <div class="flex-row" role="columnheader">Time</div>
  <div class="flex-row" role="columnheader">Fees</div>
</div>
<div class="flex-table row" role="rowgroup">
  <div class="flex-row first" role="cell"><span class="flag-icon flag-icon-gb"></span> United Kingdom</div>
  <div class="flex-row" role="cell">Stonehenge, Windsor and Bath with Pub Lunch </div>