Skip to content

Commit 4d9ba90

Browse files
AsmrProg-YTAsmrProg-YT
committed
Adding Day #53
1 parent 892d1ba commit 4d9ba90

File tree

6 files changed

+160
-1
lines changed

6 files changed

+160
-1
lines changed

‎Day #53 - Url Shortner/README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Day #53
2+
3+
### Url Shortner
4+
In this tutorial ([Open in Youtube](https://youtu.be/DFZ2SX0-Ou4)), I am gonna showing to you how to code a url shortner with api in javascript! Also we have a great mesh gradient background and glassmorphism design for it and we used tinyurl website api❗️
5+
6+
# Screenshot
7+
Here we have project screenshot :
8+
9+
![screenshot](screenshot.jpg)

‎Day #53 - Url Shortner/index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
8+
<link rel="stylesheet" href="style.css">
9+
<title>Day #53 - Url Shortner</title>
10+
</head>
11+
12+
<body>
13+
14+
<div class="container">
15+
<i class="bx bx-link-alt"></i>
16+
<h1>Url Shortner</h1>
17+
<label for="originalUrl">Enter URL To Shorten :</label>
18+
<input type="text" id="originalUrl" placeholder="https://example.com">
19+
<div class="buttons">
20+
<button id="reload-btn">Reload</button>
21+
<button id="short-btn">Short It</button>
22+
</div>
23+
<label for="shortenedUrl">Shortened URL :</label>
24+
<textarea id="shortenedUrl" rows="3" readonly></textarea>
25+
</div>
26+
27+
<script src="script.js"></script>
28+
</body>
29+
30+
</html>

‎Day #53 - Url Shortner/screenshot.jpg

94.3 KB
Loading

‎Day #53 - Url Shortner/script.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const shortBtn = document.getElementById('short-btn');
2+
const reloadBtn = document.getElementById('reload-btn');
3+
4+
shortBtn.addEventListener('click', shortenUrl);
5+
6+
function shortenUrl() {
7+
var originalUrl = document.getElementById("originalUrl").value;
8+
var apiUrl = "https://tinyurl.com/api-create.php?url=" + encodeURIComponent(originalUrl);
9+
shortenedUrlTextarea = document.getElementById("shortenedUrl");
10+
11+
fetch(apiUrl).then(response => response.text()).then(data => {
12+
shortenedUrlTextarea.value = data;
13+
}).catch(error => {
14+
shortenedUrlTextarea.value = "Error : Unable to shorten URL!";
15+
});
16+
17+
}
18+
19+
reloadBtn.addEventListener('click', () => {
20+
location.reload();
21+
});

‎Day #53 - Url Shortner/style.css

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
outline: none;
7+
box-sizing: border-box;
8+
font-family: 'Montserrat', sans-serif;
9+
}
10+
11+
body {
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
min-height: 100vh;
16+
background-color: hsla(0, 100%, 50%, 1);
17+
background-image:
18+
radial-gradient(at 40% 20%, hsla(28, 100%, 74%, 1) 0px, transparent 50%),
19+
radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0px, transparent 50%),
20+
radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 1) 0px, transparent 50%),
21+
radial-gradient(at 80% 50%, hsla(340, 100%, 76%, 1) 0px, transparent 50%),
22+
radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0px, transparent 50%),
23+
radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 1) 0px, transparent 50%),
24+
radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 1) 0px, transparent 50%);
25+
}
26+
27+
.container{
28+
background: rgba(255, 255, 255, 0.24);
29+
border-radius: 10px;
30+
padding: 20px 30px;
31+
border: 2px solid #000;
32+
text-align: center;
33+
min-width: 400px;
34+
backdrop-filter: blur(2px);
35+
-webkit-backdrop-filter: blur(2px);
36+
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
37+
}
38+
39+
.container i{
40+
font-size: 100px;
41+
margin-bottom: 10px;
42+
}
43+
44+
h1{
45+
font-size: 28px;
46+
margin-bottom: 20px;
47+
color: #333;
48+
}
49+
50+
label{
51+
text-align: left;
52+
font-size: 15px;
53+
font-weight: 500;
54+
margin: 10px 0;
55+
display: block;
56+
}
57+
58+
input, textarea{
59+
width: 100%;
60+
padding: 8px;
61+
margin-bottom: 15px;
62+
border: 2px solid #000;
63+
border-radius: 5px;
64+
font-size: 14px;
65+
color: #000;
66+
background-color: transparent;
67+
font-weight: 500;
68+
}
69+
70+
input::placeholder{
71+
color: #222;
72+
}
73+
74+
.buttons{
75+
display: flex;
76+
gap: 10px;
77+
}
78+
79+
button{
80+
width: 100%;
81+
color: #000;
82+
border: 2px solid #000;
83+
border-radius: 5px;
84+
padding: 8px;
85+
font-weight: 500;
86+
background-color: transparent;
87+
cursor: pointer;
88+
transition: all 0.3s ease;
89+
}
90+
91+
button:hover{
92+
background-color: #000;
93+
color: #fff;
94+
}
95+
96+
textarea{
97+
resize: none;
98+
}

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,9 @@ Here we have list of projects:
6262
50. Food Recipe Website
6363
51. Draggable Profile Card
6464
52. Email Sender App
65+
53. Url Shortner
6566

66-
## Where is rest 48 Projects
67+
## Where is rest 47 Projects
6768

6869
We create a project each 3 days with voting on our <a href="https://youtube.com/@AsmrProg" target="_blank">Youtube</a> channel.
6970
You can vote for upcoming projects on our channel **community** page :wink:

0 commit comments

Comments
 (0)