unurled/url-shortener
1
0
Fork 0
Code Issues Pull requests Activity

init, dotenv, mongo, working

Browse source
This commit is contained in:
unurled 2022-02-23 12:29:46 +01:00
commit fe1417851d
17 changed files with 318376 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

33
public/index.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="public/main.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<title>URL Shortener</title>
</head>
<body class="bg-coolgray-800 text-pink-200">
<div class="form">
<form action="" id="form">
<h2>URL Shortener</h2>
<div class="form-longurl">
<label for="longUrl">Long Url</label>
<input class="bg-coolgray-700 text-emerald-400 focus:border-coolgray-50 rounded-lg" type="text" id="longUrl" placeholder="www.example.com/very-long-url/and/totally/hard-to-remember" name="longUrl">
</div>
<div class="form-button">
<button type="submit" class="btn-submit hover:bg-red-700 focus:bg-red-700" id="btnSubmit">
Submit
</button>
</div>
</form>
</div>
<div id="response">
<br/>
<p id="longUrl"></p>
<a id="shortUrl" class="text-emerald-500" href=""></a>
</div>
<script type="module" src="public/js/app.js"></script>
</body>
</html>

56
public/js/app.js Normal file
View file

@ -0,0 +1,56 @@
import FetchService from './service/FetchService.js';
/*-- Objects --*/
const fetchService = new FetchService();
/*-- /Objects --*/
/*--Functions--*/
async function submitForm(e, form) {
// 1. Prevent reloading page
e.preventDefault();
// 2. Submit the form
// 2.1 User Interaction
const btnSubmit = document.getElementById('btnSubmit');
btnSubmit.disabled = true;
setTimeout(() => btnSubmit.disabled = false, 2000);
// 2.2 Build JSON body
const jsonFormData = buildJsonFormData(form);
// 2.3 Build Headers
const headers = buildHeaders();
// 2.4 Request & Response
const response = await fetchService.performPostHttpRequest(window.location.href + `api/url/shorten`, headers, jsonFormData); // Uses JSON Placeholder
// 2.5 Inform user of result
if(response) {
document.getElementById("shortUrl").innerHTML = response.shortUrl
document.getElementById("shortUrl").href = response.shortUrl
document.getElementById("longUrl").innerHTML = "Long Url: " + response.longUrl
}
else
alert(`An error occured.`);
}
function buildHeaders(authorization = null) {
const headers = {
"Content-Type": "application/json",
"Authorization": (authorization) ? authorization : "Bearer TOKEN_MISSING"
};
return headers;
}
function buildJsonFormData(form) {
const jsonFormData = { };
for(const pair of new FormData(form)) {
jsonFormData[pair[0]] = pair[1];
}
return jsonFormData;
}
/*--/Functions--*/
/*--Event Listeners--*/
const sampleForm = document.querySelector("#form");
if(sampleForm) {
sampleForm.addEventListener("submit", function(e) {
submitForm(e, this);
});
}
/*--/Event Listeners--*/

62
public/js/service/FetchService.js Normal file
View file

@ -0,0 +1,62 @@
export default class FetchService {
constructor() {
}
async performGetHttpRequest(fetchLink, headers, query=null) {
if(!fetchLink || !headers) {
throw new Error("One or more GET request parameters was not passed.");
}
try {
const rawResponse = await fetch(fetchLink, {
method: "GET",
headers: headers,
query: (query != null) ? query : ""
});
const content = await rawResponse.json();
return content;
}
catch(err) {
console.error(`Error at fetch GET: ${err}`);
throw err;
}
}
async performPostHttpRequest(fetchLink, headers, body) {
if(!fetchLink || !headers || !body) {
throw new Error("One or more POST request parameters was not passed.");
}
try {
const rawResponse = await fetch(fetchLink, {
method: "POST",
headers: headers,
body: JSON.stringify(body)
});
const content = await rawResponse.json();
return content;
}
catch(err) {
console.error(`Error at fetch POST: ${err}`);
throw err;
}
}
async performPutHttpRequest(fetchLink, headers, body) {
if(!fetchLink || !headers || !body) {
throw new Error("One or more POST request parameters was not passed.");
}
try {
const rawResponse = await fetch(fetchLink, {
method: "PUT",
headers: headers,
body: JSON.stringify(body)
});
const content = await rawResponse.json();
return content;
}
catch(err) {
console.error(`Error at fetch PUT: ${err}`);
throw err;
}
}
}

317869
public/main.css Normal file
View file

File diff suppressed because it is too large Load diff

27
public/nocompiled.css Normal file
View file

@ -0,0 +1,27 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
padding: 25px;
/*background-color: #00171F;
color: #AEB8FE;*/
font-family: "Roboto", sans-serif;
font-size: 2em;
}
input {
width: 100%;
padding: 0.5rem 0.75rem;
margin: 8px 0;
box-sizing: border-box;
}
button {
background-color: #2643d6;
border: none;
color: white;
padding: 0.5rem 2rem;
text-decoration: none;
margin: 1rem 0.5rem;
cursor: pointer;
border-radius: 1rem;
}