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

Node JS version

Browse Source
This commit is contained in:
Aravind142857
2023-06-09 20:08:47 -05:00
parent 8983f0dd80
commit a8b8883b11
894 changed files with 152408 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/css/error.css Normal file
View File

@@ -0,0 +1,4 @@
h1 {
font-size: x-large;
font-family: "Euphemia UCAS";
}

42
public/css/index.css Normal file
View File

@@ -0,0 +1,42 @@
ul {
display: flex;
list-style: none;
}
li {
padding-left: 10px;
}
#root {
color: black;
font-family: chalkduster;
}
#button {
width: 100px;
height: 30px;
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;
border-style: solid;
border-width: medium;
}
input.valid {
border-color: green;
border-style: solid;
border-width: medium
}
.mandatory {
color: red;
}

11
public/error.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>404 Page</title>
<link rel="stylesheet" src="./css/error.css">
</head>
<body>
<h1>OOPS! Page not found</h1>
</body>
</html>

BIN
public/images/cat.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 248 KiB

29
public/index.html Normal file
View File

@@ -0,0 +1,29 @@
<html>
<head>
<title>GLink</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="root">
<h1>Link Shortener</h1>
<form id="form" action="/add" method="post" onsubmit="return validate()">
<label for="url">URL:</label><span class="mandatory">*</span>
<input type="text" name="url" id="URL" value="https://example.com" required><br><br>
<label for="labels">GLink:</label><span class="mandatory">*</span>
<label for="GLink" id="labels" class="glink">glink.zip/</label><input type="text" name="glink" id="GLink" class="glink" value="exampleWebsite">
<span role="alert" id="error" aria-hidden="true">Invalid entry</span>
<br><br>
<input type="submit" id="button" value="Zip It!">
</form>
<hr>
<div>
<img src="./images/cat.gif">
</div>
<script src="./src/index.js"></script>
</div>
</body>
</html>

105
public/src/index.js Normal file
View File

@@ -0,0 +1,105 @@
// const submit = document.getElementById("button");
function getRandomGLink() {
//
return undefined;
}
// submit.addEventListener('click', validate);
function validate() {
//e.preventDefault();
const url = document.getElementById("URL");
let glink = document.getElementById("GLink");
const error = document.getElementById("error");
// 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]+$");
const glinkExp = new RegExp("^[a-zA-Z]*$");
let glinkStr = glink.value;
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 (glinkStr === "") {
var result = window.confirm("You have left the glink field blank. A random one will be generated for you.");
if (result === false) {
return false;
} else {
glinkStr = getRandomGLink();
}
}
if (domain.match(domainExp) && glinkStr.match(glinkExp))/** and is available? */{
if (error.classList.contains("visible")) {
error.classList.remove("visible");
}
if (url.classList.contains("invalid")) {
url.classList.remove("invalid");
}
url.classList.add("valid");
if (glink.classList.contains("invalid")) {
glink.classList.remove("invalid");
}
glink.classList.add("valid");
error.setAttribute('aria-hidden', true);
error.setAttribute('aria-invalid', false);
console.log("Valid with url= " +url.value+ " glink=" +glink);
return valid;
} else {
/*flag*/
error.classList.add("visible");
//error.classList.add("hidden");
if (!domain.match(domainExp)) {
if (url.classList.contains("valid")) {
url.classList.remove("valid");
}
url.classList.add("invalid");
} else {
if (url.classList.contains("invalid")) {
url.classList.remove("invalid");
}
url.classList.add("valid");
}
if (!glinkStr.match(glinkExp)) {
if (glink.classList.contains("valid")) {
glink.classList.remove("valid");
}
glink.classList.add("invalid");
} else {
if (glink.classList.contains("invalid")) {
glink.classList.remove("invalid");
}
glink.classList.add("valid");
}
error.setAttribute('aria-hidden', false);
error.setAttribute('aria-invalid', true);
return false;
}
}