Skip to content

Commit 9ea8944

Browse files
HamidByteHamidByte
committed
Initial commit
1 parent a64f4fa commit 9ea8944

File tree

3 files changed

+177
-0
lines changed

3 files changed

+177
-0
lines changed

‎index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>URL Encoder & Decoder</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
11+
<header>
12+
<h1 class="title">URL Encoder & Decoder</h1>
13+
<p class="description">A straightforward tool for encoding and decoding URLs, with support for ASCII encoding. Easily manipulate web addresses with simplicity.</p>
14+
</header>
15+
16+
<main class="main-container">
17+
<div class="controls">
18+
<label for="urlInputEncode">Enter Text to Encode:</label>
19+
<input type="text" id="urlInputEncode" placeholder="Enter text to encode">
20+
<button onclick="encodeText()">Encode</button>
21+
</div>
22+
23+
<div class="controls">
24+
<label for="urlInputDecode">Enter URL to Decode:</label>
25+
<input type="text" id="urlInputDecode" placeholder="Enter URL to decode">
26+
<button onclick="decodeURL()">Decode</button>
27+
</div>
28+
29+
<div class="controls">
30+
<div id="result">
31+
<strong>&nbsp;</strong>
32+
</div>
33+
</div>
34+
</main>
35+
36+
<footer>
37+
<p>&copy; 2023 URL Encoder & Decoder. All rights reserved.</p>
38+
</footer>
39+
40+
<script src="script.js"></script>
41+
42+
</body>
43+
</html>

‎script.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
function encodeText() {
2+
var textToEncode = document.getElementById('urlInputEncode').value;
3+
var encodedText = encodeURIComponent(textToEncode);
4+
5+
document.getElementById('result').innerHTML = '<strong>Encoded Text:</strong> ' + encodedText;
6+
}
7+
8+
function decodeURL() {
9+
var urlToDecode = document.getElementById('urlInputDecode').value;
10+
var decodedText = decodeURIComponent(urlToDecode);
11+
12+
document.getElementById('result').innerHTML = '<strong>Decoded Text:</strong> ' + decodedText;
13+
}

‎styles.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
body {
2+
background: linear-gradient(to right, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
3+
color: #fff;
4+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
5+
margin: 0;
6+
padding: 0;
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
justify-content: center;
11+
height: 100vh;
12+
}
13+
14+
header {
15+
position: absolute;
16+
top: 0;
17+
text-align: center;
18+
max-width: 80%;
19+
margin: 3em;
20+
}
21+
22+
.title {
23+
font-size: 3em;
24+
margin: 20px 0;
25+
color: #ecf0f1;
26+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
27+
}
28+
29+
.description {
30+
font-size: 1.2em;
31+
line-height: 1.5;
32+
color: #ecf0f1;
33+
opacity: 0.9;
34+
}
35+
36+
.main-container {
37+
display: flex;
38+
flex-direction: column;
39+
align-items: center;
40+
justify-content: center;
41+
width: 90%;
42+
max-width: 800px;
43+
margin-top: 3em;
44+
}
45+
46+
.controls {
47+
display: flex;
48+
flex-wrap: wrap;
49+
gap: 10px;
50+
/* justify-content: center; */
51+
width: 100%;
52+
}
53+
54+
label {
55+
display: block;
56+
font-size: 1.2em;
57+
font-weight: bold;
58+
}
59+
60+
input {
61+
padding: 12px;
62+
margin: 8px 0;
63+
/* width: calc(70% - 20px); */
64+
width: 78%; /* Adjusted width for input */
65+
box-sizing: border-box;
66+
border: 1px solid #fff;
67+
border-radius: 5px;
68+
background-color: rgba(255, 255, 255, 0.2);
69+
color: #fff;
70+
font-size: 1.3em;
71+
transition: background-color 0.3s;
72+
}
73+
74+
input:hover,
75+
input:focus {
76+
background-color: rgba(255, 255, 255, 0.3);
77+
}
78+
79+
button {
80+
margin: 8px 0;
81+
background-color: #4CAF50;
82+
color: #fff;
83+
border: none;
84+
border-radius: 5px;
85+
font-size: 1.2em;
86+
cursor: pointer;
87+
/* width: calc(30% - 20px); */
88+
width: 20%; /* Adjust width for button */
89+
transition: background-color 0.3s;
90+
}
91+
92+
button:hover {
93+
background-color: #45a049;
94+
}
95+
96+
#result {
97+
width: 100%;
98+
margin-top: 3em;
99+
padding: 30px 20px;
100+
text-align: center;
101+
font-size: 1.2em;
102+
color: #fff;
103+
border-radius: 8px;
104+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
105+
}
106+
107+
#result strong {
108+
font-weight: bold;
109+
}
110+
111+
footer {
112+
position: fixed;
113+
bottom: 0;
114+
left: 0;
115+
padding: 10px 0;
116+
width: 100%;
117+
text-align: center;
118+
font-size: 1.2em;
119+
color: #fff;
120+
background-color: rgba(54, 32, 100, 0.8);
121+
}

0 commit comments

Comments
 (0)