update 1811211040

2018-11-21 10:40:50 -05:00
parent 53e2614c8f
commit fe801398ea
5 changed files with 388 additions and 0 deletions
--- a/dummy-form/forms/user.html
+++ b/dummy-form/forms/user.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <title>New User Registration</title>
+    <meta name="author" content="VK Services, LLC">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="../img/icons/main.ico">
+    <link rel="stylesheet" type="text/css" href="../styles/forms/style.css">
+  </head>
+  <body>
+    <fieldset>
+      <legend align="center">New User Registration</legend>
+      <form action="" method="post">
+        <label class="subLab" for="acs">Autocorrector</label><input type="checkbox" id="acs" checked><br />
+        <label for="fn">First (Real) Name</label><input type="text" id="fn" name="firstName"><br />
+        <label for="sn">Pseudo Name</label><input type="text" id="sn" name="pseudoName"><br />
+        <label for="ln">Last Name</label><input type="text" id="ln" name="lastName"><br />
+        <p id="acm"></p>
+        <label for="un">User Name</label><input type="text" id="un" name="userName"><br />
+        <label for="em">Email</label><input type="text" id="em" name="email"><br />
+        <label for="pw">Password</label><input type="password" id="pw" name="password"><br />
+        <label for="pc">Confirmation</label><input type="password" id="pc"><br />
+        <label>Department / Position</label>
+        <select id="slct" name="position">
+          <option selected disabled hidden>select title</option>
+        </select>
+        <!-- <button type="button">Sign up</button> -->
+      </form>
+    </fieldset>
+    <script src="../functionality/form-user.js"></script>
+  </body>
+</html>
--- a/dummy-form/functionality/form-user.js
+++ b/dummy-form/functionality/form-user.js
@@ -0,0 +1,165 @@
+let inputs = {
+    ids: ['fn', 'sn', 'ln', 'un', 'em', 'pw', 'pc'],
+    placeholders: [
+      ' e.g.  John', ' e.g.  "Roy"', ' e.g.  McClane', ' e.g.  john-mcclane',
+      ' e.g.  john-mcclane@domain.hollywood', ' don\'t make it simple', ' confirm password'
+    ]
+  },
+  inp = [],
+  acs = document.getElementById('acs'),
+  slct = document.getElementById('slct');
+let selOptions = {
+  dispatcher: 'Dispatcher',
+  safety: 'Safety',
+  hr: 'HR',
+  ifta: 'IFTA',
+  accounting: 'Accounting',
+  expense: 'Expense',
+};
+for (let i = 0; i < inputs.ids.length; i++)
+  inp[i] = document.getElementById(inputs.ids[i]);
+
+window.onload = ()=> {
+  for (let p = 0; p < inputs.placeholders.length; p++)
+    inp[p].setAttribute('placeholder', inputs.placeholders[p]);
+  slct.setAttribute('class', 'placeholder');
+  let optKeys = Object.keys(selOptions),
+      selLen = optKeys.length;
+  for (let o = 0; o < selLen; o++) {
+    let optEl = document.createElement('option');
+    optEl.setAttribute('value', optKeys[o]);
+    let optTxtNd = document.createTextNode(selOptions[optKeys[o]]);
+    optEl.appendChild(optTxtNd);
+    slct.appendChild(optEl);
+  }
+};
+
+inp[0].addEventListener('input', (e)=> {processName(e, false);});
+inp[1].addEventListener('input', (e)=> {processName(e, false, true);});
+inp[2].addEventListener('input', (e)=> {processName(e, true);});
+inp[3].addEventListener('input', (e)=> {
+  let target = e.target,
+      value = target.value;
+  if (value)
+    value = value.toLowerCase()
+                   .replace(/[\s`~!@#\$%\^&\*\(\)=\+\[\{\]\}\\\|;:'",<\.>\/\?]/g, '')
+                   .slice(0, 12);
+  target.value = value;
+});
+inp[4].addEventListener('blur', (e)=> {
+  let target = e.target,
+      value = target.value;
+  if (value) {
+    let re = /^(([^<>()\[\]\\.,;:\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,}))$/;
+    if (re.test(value.toLowerCase())) {
+      value = value.toLowerCase();
+    } else {
+      value = '';
+      alert(
+        `
+          The email address you entered did not pass
+          standard email validation test.
+          Please try again!
+        `
+      );
+      target.focus();
+    }
+    target.value = value;
+  }
+});
+acs.addEventListener('click', ()=> {
+  if (acs.checked) {
+    inp[0].value = processValue(inp[0].value);
+    inp[2].value = autoCorrect(processValue(inp[2].value));
+  } else {
+    alert(
+      'PLEASE READ\n' +
+      'It is advised to keep Autocorrector active,\n' +
+      'unless you noticed it had capitalized non-boundary character\n' +
+      'that was supposed to remain in lower case!'
+    );
+    showAutoCorrectMsg(false);
+  }
+});
+slct.addEventListener('change', ()=> {slct.removeAttribute('class');});
+for (let i = 0; i < inputs.ids.length; i++) {
+  let el = inp[i];
+  el.onfocus = ()=> {
+    el.removeAttribute('placeholder');
+    let value = el.value,
+        vLen = value.length;
+    if (vLen) {
+      el.setSelectionRange(0, vLen);
+    }
+  };
+  el.onblur = ()=> {
+    el.setAttribute('placeholder', inputs.placeholders[i]);
+    el.value = el.value.trim();
+  };
+}
+
+let processName = (e, lastName, pseudo)=> {
+  let target = e.target,
+      value = target.value,
+      processedValue = '';
+  if (value) value = value
+                       .replace(/[\d`~!@#\$%\^&\*\(\)\-_=\+\[\{\]\}\\\|;:",<\.>\/\?]/g, '')
+                       .replace(/\s+/g, ' ');
+  if (acs.checked) {
+    if (value) {
+      processedValue = processValue(value);
+    }
+    if (lastName) {
+      processedValue = autoCorrect(processedValue);
+    }
+  } else processedValue = value;
+  let q = (pseudo && value) ? '"' : '';
+  target.value = q + processedValue + q;
+  if (pseudo) {
+    let vLen = value.length;
+    if (vLen) {
+      target.setSelectionRange(vLen + 1, vLen + 1);
+    }
+  }
+}
+let processValue = (input)=> {
+  if (input) {
+    input = input.toLowerCase()
+              .replace(/\b[a-z]/g, (fC)=> {return fC.toUpperCase();});
+  }
+  return input;
+}
+let autoCorrect = (input)=> {
+  if (input) {
+    switch (true) {
+      case input.slice(0, 2) == 'Mc':
+        input = input
+                  .replace(/Mc[a-z]/g, (x)=> {return x.toUpperCase().replace(/\bMC/g, 'Mc');});
+        showAutoCorrectMsg(true);
+        break;
+      case input.slice(0, 3) == 'Mac':
+        input = input
+                  .replace(/Mac[a-z]/g, (x)=> {return x.toUpperCase().replace(/\bMAC/g, 'Mac');});
+        showAutoCorrectMsg(true);
+        break;
+      case input.slice(0, 2) == 'De':
+        input = input
+                  .replace(/De[a-z]/g, (x)=> {return x.toUpperCase().replace(/\bDE/g, 'De');});
+        showAutoCorrectMsg(true);
+        break;
+      case input.trim() == '':
+        showAutoCorrectMsg(false);
+        break;
+      default: showAutoCorrectMsg(false);
+    }
+  }
+  return input;
+}
+let showAutoCorrectMsg = (bln)=> {
+  let msgCont = document.getElementById('acm'),
+      msg = `<span>ONLY</span> if auto capitalization of non-boundary character occured in error,<br>
+             unselect Autocorrector option at the top of the form and make corrections in text manually`,
+      cont = '';
+  if (bln) cont = msg;
+  msgCont.innerHTML = cont;
+}
--- a/dummy-form/img/icons/main.ico
+++ b/dummy-form/img/icons/main.ico
--- a/dummy-form/styles/forms/style.css
+++ b/dummy-form/styles/forms/style.css
@@ -0,0 +1,132 @@
+@import url('../reset_EM-2.0.css');
+@import url('https://fonts.googleapis.com/css?family=Abel|Prompt|Roboto+Condensed|Ubuntu');
+
+
+
+/* Basic */
+
+* {
+  cursor: default;
+}
+body {
+  width: 740px;
+  margin: 0 auto;
+  background: rgb(240,240,240);
+  font-family: 'Abel', sans-serif;
+}
+
+
+
+/* Fieldset */
+
+fieldset, legend {
+  box-shadow: 0 0 9px gray;
+  border: 1px solid gray;
+  background: rgb(232,232,232);
+}
+fieldset {
+  margin-top: 67px;
+  border-radius: 9px;
+  padding: 45px 57px;
+}
+legend {
+  border-radius: 15px 5px;
+  padding: 12px 28px;
+  text-shadow: 0 0 2px gray;
+  font-family: 'Prompt', sans-serif;
+  font-size: 112%;
+  letter-spacing: 0.5px;
+}
+
+
+
+
+/* Labels */
+
+label {
+  display: inline-block;
+  width: 150px;
+  padding-right: 12px;
+  text-shadow: 0 0 1px gray;
+  font-family: 'Roboto Condensed', sans-serif;
+  letter-spacing: 0.4px;
+  text-align: right;
+}
+.subLab {
+  font-size: 69%;
+}
+
+
+
+
+/* Inputs & Select*/
+
+input[type=text],
+input[type=email],
+input[type=password],
+select {
+  width: 320px;
+  margin-bottom: 9px;
+  border: 1px solid gray;
+  box-shadow: inset 0 0 2px gray;
+  border-radius: 6px;
+  padding: 7px 12px;
+  background: rgb(248,248,248);
+  color: blue;
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 112%;
+  font-weight: bold;
+}
+input[type=checkbox] {
+  cursor: auto;
+  position: relative;
+  top: 3px;
+  left: -3px;
+  margin-bottom: 16px;
+}
+input {
+  cursor: text;
+}
+select {
+  height: 42px;
+  margin-top: 9px;
+}
+option {
+  color: blue;
+  font-weight: bold;
+}
+::placeholder, .placeholder {
+  color: #00e6e6;
+  font-weight: normal;
+}
+::placeholder {
+  font-size: 87%;
+  font-style: italic;
+}
+input:focus, select:focus {
+  outline: none;
+  background: #e6f0ff;
+}
+input:focus:not([type=checkbox]) {
+  border: 1px solid blue;
+  box-shadow: inset 0 0 4px blue;
+}
+
+
+
+/* Misc */
+
+#acm {
+  padding: 0 4px 24px 132px;
+  color: gray;
+  font-size: 14px;
+  letter-spacing: 0.4px;
+}
+#acm span {
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+
+
+/**/
--- a/dummy-form/styles/reset_EM-2.0.css
+++ b/dummy-form/styles/reset_EM-2.0.css
@@ -0,0 +1,58 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+  border: 0;
+	font-size: 100%;
+	font: inherit;
+	/* vertical-align: baseline; - VKS */
+}
+
+
+ /* VKS */
+
+a {
+	text-decoration: none;
+}
+
+
+/* HTML5 display-role reset for older browsers */
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}