aravind/glink-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed errors

Browse Source
This commit is contained in:
Aravind142857
2023-06-06 01:48:11 -05:00
parent 4e3c08d1c4
commit 8d65229f66
3 changed files with 72 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
index.css
View File

@@ -12,10 +12,27 @@ li {
#button { #button {
width: 100px; width: 100px;
height: 30px; height: 30px;
background: pink; background: lightgreen;
font-size: large; font-size: large;
font-family: Futura; font-family: Futura;
} }
.glink { .glink {
font-family: "Avenir Next" 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;
} }

12
index.html
View File

@@ -2,20 +2,19 @@
<head> <head>
<title>GLink</title> <title>GLink</title>
<link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="index.css">
<!-- <script src="./index.js"></script>-->
</head> </head>
<body> <body>
<div id="root"> <div id="root">
<h1>Link Shortener</h1> <h1>Link Shortener</h1>
<form id="form"> <form id="form">
<label for="URL">URL: </label> <label for="url">URL:</label><span class="mandatory">*</span>
<input type="text" name="url" id="URL" value="example.com" required><br><br> <input type="text" name="url" id="URL" value="example.com" required><br><br>
<label for="labels">GLink: </label> <label for="labels">GLink:</label><span class="mandatory">*</span>
<label for="GLink" id="labels" class="glink">glink.zip/</label> <label for="GLink" id="labels" class="glink">glink.zip/</label><input type="text" name="glink" id="GLink" class="glink" value="exampleWebsite" required>
<input type="text" name="glink" id="GLink" class="glink" value="exampleWebsite" required>
<span class="error" aria-live="polite"></span> <span role="alert" id="error" aria-hidden="true">Invalid URL</span>
<br><br> <br><br>
<input type="submit" id="button" value="Zip It!"> <input type="submit" id="button" value="Zip It!">
@@ -41,6 +40,7 @@
<!-- <div id="generate">--> <!-- <div id="generate">-->
<!-- <button id="zip" onclick="window.location.href = 'www.google.com';"></button>--> <!-- <button id="zip" onclick="window.location.href = 'www.google.com';"></button>-->
<!-- </div>--> <!-- </div>-->
<script src="./result.js"></script>
</div> </div>
</body> </body>
</html> </html>

57
result.js
View File

@@ -5,15 +5,18 @@ function validate(e) {
const url = document.getElementById("URL"); const url = document.getElementById("URL");
const glink = document.getElementById("GLink"); const glink = document.getElementById("GLink");
if (!url) { // if (!url) {
/* Flag */ // /* Flag */
} // }
let valid = true; let valid = true;
const domainExp = new RegExp("http(s)*:\\/\\/[a-zA-Z0-9\\-]+(\\.[a-zA-Z0-9\\-]+)+"); const domainExp = new RegExp("http(s)*:\\/\\/[a-zA-Z0-9\\-]+(\\.[a-zA-Z0-9\\-]+)+");
var count = 0; const filepathExp = new RegExp("[a-zA-Z]+");
var index = -1; let count = 0;
let index = -1;
let domain = "";
let filepath = "";
for (let i=0; i < url.value.length; i++) { for (let i=0; i < url.value.length; i++) {
if (url.length.charAt(i) == '/') { if (url.value.charAt(i) == '/') {
count++; count++;
} }
if (count == 3) { if (count == 3) {
@@ -21,10 +24,46 @@ function validate(e) {
break; break;
} }
} }
if (count == 3) { if (count >= 3) {
const domain = url.value.substring(0, index); domain = url.value.substring(0, index);
const filepath = url.value.substring(index, url.value.length - 1); 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); 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);
} }
} }