diff --git a/index.css b/index.css index 7c384e8..9fdd6fb 100644 --- a/index.css +++ b/index.css @@ -12,10 +12,27 @@ li { #button { width: 100px; height: 30px; - background: pink; + background: lightgreen; font-size: large; font-family: Futura; } .glink { font-family: "Avenir Next" +} +#error { + display: none; + color: red; + font-family: "Big Caslon" +} +#error.visible { + display: block; +} +input.invalid { + border-color: red; +} +input.valid { + border-color: green; +} +.mandatory { + color: red; } \ No newline at end of file diff --git a/index.html b/index.html index 0c5321b..43f5a39 100644 --- a/index.html +++ b/index.html @@ -2,20 +2,19 @@ GLink - +

Link Shortener

- + *

- - - + * + - +

@@ -41,6 +40,7 @@ +
\ No newline at end of file diff --git a/result.js b/result.js index 43bba0e..cf6ad95 100644 --- a/result.js +++ b/result.js @@ -5,15 +5,18 @@ function validate(e) { const url = document.getElementById("URL"); const glink = document.getElementById("GLink"); - if (!url) { - /* Flag */ - } + // if (!url) { + // /* Flag */ + // } let valid = true; const domainExp = new RegExp("http(s)*:\\/\\/[a-zA-Z0-9\\-]+(\\.[a-zA-Z0-9\\-]+)+"); - var count = 0; - var index = -1; + const filepathExp = new RegExp("[a-zA-Z]+"); + let count = 0; + let index = -1; + let domain = ""; + let filepath = ""; for (let i=0; i < url.value.length; i++) { - if (url.length.charAt(i) == '/') { + if (url.value.charAt(i) == '/') { count++; } if (count == 3) { @@ -21,10 +24,46 @@ function validate(e) { break; } } - if (count == 3) { - const domain = url.value.substring(0, index); - const filepath = url.value.substring(index, url.value.length - 1); + if (count >= 3) { + domain = url.value.substring(0, index); + if (index == url.value.length - 1) { + filepath = url.value.charAt(index); + } else { + filepath = url.value.substring(index, url.value.length - 1); + } alert("Domain is " + domain + " filepath is " + filepath); + } else { + domain = url.value; + } + console.log(domain); + if (domain.match(domainExp)) { + const error = document.getElementById("error"); + if (error.classList.contains("visible")) { + error.classList.remove("visible"); + } + //error.classList.add("hidden"); + if (url.classList.contains("invalid")) { + url.classList.remove("invalid"); + } + url.classList.add("valid"); + //url.classList.add("valid"); + error.setAttribute('aria-hidden', true); + error.setAttribute('aria-invalid', false); + console.log("Valid"); + return valid; + } else { + + /*flag*/ + const error = document.getElementById("error"); + error.classList.add("visible"); + + //error.classList.add("hidden"); + if (url.classList.contains("valid")) { + url.classList.remove("valid"); + } + url.classList.add("invalid"); + error.setAttribute('aria-hidden', false); + error.setAttribute('aria-invalid', true); } } \ No newline at end of file