-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
70 lines (62 loc) · 2.8 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
const toggleButton = document.getElementsByClassName('navbar-bar')[0];
const navbarMenu = document.getElementsByClassName('navbar-menu')[0];
const form = document.getElementsByClassName('form')[0];
const link = document.getElementsByClassName('form-link')[0];
const req = document.getElementsByClassName('form-message')[0];
const gridGen = document.getElementsByClassName('grid-item-generated')[0];
toggleButton.addEventListener('click', () => {
// mobile navbar 3 bar menu toggle
navbarMenu.classList.toggle('active');
});
form.addEventListener('submit', (e) => {
// if submitted while input is blank, prompt user to insert link
if (link.value === '' || link.value == null) {
if (!req.classList.contains('active')) {
req.classList.toggle('active');
link.classList.toggle('active');
}
e.preventDefault();
} else {
e.preventDefault();
fetch(`https://api.shrtco.de/v2/shorten?url=${link.value}`)
.then(res => res.json())
.then(json => {
if (json.ok) {
// if api returns ok result, create a div container and elements
let div = document.createElement('div');
let original = document.createElement('p');
let hr = document.createElement('hr');
let short = document.createElement('p');
let button = document.createElement('button');
// assign class names to generated elements
div.className = "grid-item-generated-link";
original.className = "grid-item-generated-link-original"
short.className = "grid-item-generated-link-short"
button.className = "grid-item-generated-link-copy"
// fill inner text with results from api
original.innerText = json.result.original_link;
short.innerText = json.result.full_short_link;
button.innerText = 'Copy';
// change button color and text when clicked and copy input value
button.addEventListener('click', () => {
button.classList.toggle('active', true);
button.innerText = 'Copied!';
navigator.clipboard.writeText(json.result.full_short_link);
})
gridGen.append(div);
div.append(original, hr, short, button);
// clear input text
link.value = '';
} else {
console.log(json);
}
})
}
});
form.addEventListener('keypress', () => {
// if user has been prompted to insert link and user types at input, remove prompt
if (req.classList.contains('active')) {
req.classList.toggle('active');
link.classList.toggle('active');
}
});