Skip to content

Commit f882d79

Browse files
PBJIPBJI
authored
Merge pull request #800 from blindaks/master
URL Shortener
2 parents 1cbdd07 + a9037b7 commit f882d79

File tree

3 files changed

+162
-0
lines changed

3 files changed

+162
-0
lines changed

‎UrlShortener/blindaks/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>URL Shortener</title>
5+
<link rel="stylesheet" href="style.css">
6+
</head>
7+
<body>
8+
<div class="maincontainer">
9+
<h1>URL Shortener</h1>
10+
<form>
11+
<label for="long-url">Enter or Paste Your long URL:</label>
12+
<input type="text" id="long-url" name="long-url">
13+
<button type="button" id="shorten-btn">Shorten</button>
14+
</form>
15+
<div id="short-url-container" style="display:none">
16+
<p>Here's your shortened URL:</p>
17+
<div id="short-url">
18+
<a href="" target="_blank"></a>
19+
20+
</div>
21+
<div>
22+
<button type="button" id="copy-btn">Copy</button>
23+
</div>
24+
</div>
25+
26+
</div>
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎UrlShortener/blindaks/script.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const shortenUrl = async () => {
2+
const longUrl = document.getElementById('long-url').value;
3+
const response = await fetch(`https://api.shrtco.de/v2/shorten?url=${longUrl}`);
4+
const data = await response.json();
5+
const shortUrl = data.result.full_short_link;
6+
7+
const shortUrlContainer = document.getElementById('short-url-container');
8+
const shortUrlLink = document.getElementById('short-url').querySelector('a');
9+
shortUrlLink.href = shortUrl;
10+
shortUrlLink.textContent = shortUrl;
11+
shortUrlContainer.style.display = 'block';
12+
13+
const copyBtn = document.getElementById('copy-btn');
14+
copyBtn.addEventListener('click', () => {
15+
navigator.clipboard.writeText(shortUrl).then(() => {
16+
alert('Copied to clipboard!');
17+
});
18+
});
19+
};
20+
21+
const shortenBtn = document.getElementById('shorten-btn');
22+
shortenBtn.addEventListener('click', shortenUrl);
23+

‎UrlShortener/blindaks/style.css

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
padding: 20px;
4+
background: #fff;
5+
6+
display: flex;
7+
flex-direction: column;
8+
justify-content: center;
9+
align-items: center;
10+
}
11+
html, body {
12+
height: 100%;
13+
}
14+
.maincontainer h1{
15+
color:#fff;
16+
text-align: center;
17+
}
18+
form label {
19+
display: block;
20+
margin-bottom: 20px;
21+
margin-left: 10px;
22+
color: #fff;
23+
text-align: center;
24+
}
25+
26+
form input[type="text"] {
27+
width: 90%;
28+
padding: 10px;
29+
margin:auto;
30+
border-radius: 20px;
31+
border:2px solid #8f94fb;
32+
box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.25);
33+
}
34+
35+
form button {
36+
margin: auto;
37+
display: flex;
38+
margin-top: 1rem;
39+
background-color: #c130ed;
40+
color: #fff;
41+
border: none;
42+
padding: 5px 10px;
43+
cursor: pointer;
44+
border-radius: 10px;
45+
font-size: 22px;
46+
}
47+
form button:hover{
48+
border:2px solid #f23e77;
49+
}
50+
51+
#short-url-container {
52+
margin-top: 20px;
53+
}
54+
#short-url-container p{
55+
text-align: center;
56+
color: #c130ed;
57+
font-weight: 600;
58+
}
59+
60+
#short-url {
61+
display: flex;
62+
align-items: center;
63+
justify-content: center;
64+
65+
}
66+
67+
#short-url a {
68+
word-wrap: break-word;
69+
margin-right: 10px;
70+
font-size: 23px;
71+
color: #fff;
72+
}
73+
74+
.maincontainer
75+
{
76+
width:80%;
77+
height: auto;
78+
min-height:350px;
79+
padding:40px;
80+
border-radius: 30px;
81+
box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.25);
82+
background: #4e54c8;
83+
background: -webkit-linear-gradient(to right, #8f94fb, #4e54c8);
84+
background: linear-gradient(to right, #fb8fe4, #f35670);
85+
margin: auto;
86+
}
87+
88+
#copy-btn{
89+
background-color: #c130ed;
90+
color: #fff;
91+
border: none;
92+
padding: 5px 10px;
93+
cursor: pointer;
94+
border-radius: 10px;
95+
font-size: 22px;
96+
margin-top: 20px;
97+
margin-left: 490px;
98+
}
99+
.credit a {
100+
text-decoration: none;
101+
color: #000;
102+
font-weight: 800;
103+
}
104+
105+
.credit {
106+
text-align: center;
107+
margin-top: 10px;
108+
font-family: Verdana,Geneva,Tahoma,sans-serif;
109+
}
110+

0 commit comments

Comments
 (0)