diff --git a/dummy-form/forms/user.html b/dummy-form/forms/user.html
new file mode 100644
index 0000000..091ef3f
--- /dev/null
+++ b/dummy-form/forms/user.html
@@ -0,0 +1,33 @@
+
+
+
+ New User Registration
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dummy-form/functionality/form-user.js b/dummy-form/functionality/form-user.js
new file mode 100644
index 0000000..f07d257
--- /dev/null
+++ 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 = `ONLY if auto capitalization of non-boundary character occured in error,
+ unselect Autocorrector option at the top of the form and make corrections in text manually`,
+ cont = '';
+ if (bln) cont = msg;
+ msgCont.innerHTML = cont;
+}
diff --git a/dummy-form/img/icons/main.ico b/dummy-form/img/icons/main.ico
new file mode 100644
index 0000000..7972fee
Binary files /dev/null and b/dummy-form/img/icons/main.ico differ
diff --git a/dummy-form/styles/forms/style.css b/dummy-form/styles/forms/style.css
new file mode 100644
index 0000000..2c9d840
--- /dev/null
+++ 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;
+}
+
+
+
+/**/
diff --git a/dummy-form/styles/reset_EM-2.0.css b/dummy-form/styles/reset_EM-2.0.css
new file mode 100644
index 0000000..13dace3
--- /dev/null
+++ 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;
+}