Stylistic additions
This commit is contained in:
@@ -29,10 +29,14 @@ li {
|
||||
}
|
||||
input.invalid {
|
||||
border-color: red;
|
||||
border-style: solid;
|
||||
border-width: medium;
|
||||
}
|
||||
input.valid {
|
||||
border-color: green;
|
||||
border-style: solid;
|
||||
border-width: medium
|
||||
}
|
||||
.mandatory {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
19
index.html
19
index.html
@@ -23,24 +23,7 @@
|
||||
<div>
|
||||
<img src="cat.gif">
|
||||
</div>
|
||||
|
||||
<!-- <div id="url">-->
|
||||
<!-- <ul id="url-list">-->
|
||||
<!-- <li>URL: </li>-->
|
||||
<!-- <li><input type="text" id="link"></li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
<!-- <br>-->
|
||||
<!-- <div id="glink">-->
|
||||
<!-- <ul id="glink-list">-->
|
||||
<!-- <li>glink: </li>-->
|
||||
<!-- <li><input type="text" id="short-link"></li>-->
|
||||
<!-- </ul>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div id="generate">-->
|
||||
<!-- <button id="zip" onclick="window.location.href = 'www.google.com';"></button>-->
|
||||
<!-- </div>-->
|
||||
<script src="./result.js"></script>
|
||||
<script src="index.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
67
index.js
67
index.js
@@ -0,0 +1,67 @@
|
||||
const submit = document.getElementById("button");
|
||||
submit.addEventListener('click', validate);
|
||||
function validate(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const url = document.getElementById("URL");
|
||||
const glink = document.getElementById("GLink");
|
||||
// if (!url) {
|
||||
// /* Flag */
|
||||
// }
|
||||
let valid = true;
|
||||
const domainExp = new RegExp("http(s)*:\\/\\/[a-zA-Z0-9\\-]+(\\.[a-zA-Z0-9\\-]+)+");
|
||||
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.value.charAt(i) == '/') {
|
||||
count++;
|
||||
}
|
||||
if (count == 3) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
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)) /** and is available? */{
|
||||
const error = document.getElementById("error");
|
||||
if (error.classList.contains("visible")) {
|
||||
error.classList.remove("visible");
|
||||
}
|
||||
if (url.classList.contains("invalid")) {
|
||||
url.classList.remove("invalid");
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
69
result.js
69
result.js
@@ -1,69 +0,0 @@
|
||||
const submit = document.getElementById("button");
|
||||
submit.addEventListener('click', validate);
|
||||
function validate(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const url = document.getElementById("URL");
|
||||
const glink = document.getElementById("GLink");
|
||||
// if (!url) {
|
||||
// /* Flag */
|
||||
// }
|
||||
let valid = true;
|
||||
const domainExp = new RegExp("http(s)*:\\/\\/[a-zA-Z0-9\\-]+(\\.[a-zA-Z0-9\\-]+)+");
|
||||
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.value.charAt(i) == '/') {
|
||||
count++;
|
||||
}
|
||||
if (count == 3) {
|
||||
index = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
Reference in New Issue
Block a user