Skip to content

Commit 08b77b6

Browse files
HamidByteHamidByte
committed
Copy functionality, styling
1 parent 9ea8944 commit 08b77b6

File tree

8 files changed

+153
-25
lines changed

8 files changed

+153
-25
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
# URL-Encoder-Decoder
1+
# URL Encoder & Decoder (HTML/Javascript)
22
A straightforward tool for encoding and decoding URLs, with support for ASCII encoding. Easily manipulate web addresses with simplicity.

styles.css renamed to css/styles.css

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ label {
5858
}
5959

6060
input {
61-
padding: 12px;
61+
padding: 12px 10px;
6262
margin: 8px 0;
6363
/* width: calc(70% - 20px); */
6464
width: 78%; /* Adjusted width for input */
@@ -76,7 +76,7 @@ input:focus {
7676
background-color: rgba(255, 255, 255, 0.3);
7777
}
7878

79-
button {
79+
.transcribe-button {
8080
margin: 8px 0;
8181
background-color: #4CAF50;
8282
color: #fff;
@@ -89,11 +89,11 @@ button {
8989
transition: background-color 0.3s;
9090
}
9191

92-
button:hover {
92+
.transcribe-button:hover {
9393
background-color: #45a049;
9494
}
9595

96-
#result {
96+
#display {
9797
width: 100%;
9898
margin-top: 3em;
9999
padding: 30px 20px;
@@ -104,10 +104,24 @@ button:hover {
104104
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
105105
}
106106

107-
#result strong {
107+
#displayText {
108+
display: inline-block; /* Make it a block element to set width */
109+
width: 150px;
110+
}
111+
112+
#displayText strong {
108113
font-weight: bold;
109114
}
110115

116+
#result {
117+
width: 500px;
118+
}
119+
120+
.copy-button {
121+
width: 40px;
122+
height: 40px;
123+
}
124+
111125
footer {
112126
position: fixed;
113127
bottom: 0;

‎index.html‎

Lines changed: 74 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,24 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>URL Encoder & Decoder</title>
7-
<link rel="stylesheet" href="styles.css">
7+
<!-- jQuery -->
8+
<script src="lib/jquery-3.6.0.min.js"></script>
9+
<!-- Font Awesome -->
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.min.css"/>
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.min.css"/>
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/regular.min.css"/>
14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/solid.min.css"/>
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
16+
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/brands.min.js"></script>
17+
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/brands.min.js"></script>
18+
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/fontawesome.min.js"></script>
19+
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/regular.min.js"></script>
20+
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/solid.min.js"></script>
21+
<!-- Clipboard -->
22+
<script src="lib/clipboard.min.js"></script>
23+
<link rel="stylesheet" href="lib/primer.css">
24+
<link rel="stylesheet" href="css/styles.css">
825
</head>
926
<body>
1027

@@ -17,18 +34,69 @@ <h1 class="title">URL Encoder & Decoder</h1>
1734
<div class="controls">
1835
<label for="urlInputEncode">Enter Text to Encode:</label>
1936
<input type="text" id="urlInputEncode" placeholder="Enter text to encode">
20-
<button onclick="encodeText()">Encode</button>
37+
<button class="transcribe-button" onclick="encodeText()">Encode</button>
2138
</div>
2239

2340
<div class="controls">
2441
<label for="urlInputDecode">Enter URL to Decode:</label>
2542
<input type="text" id="urlInputDecode" placeholder="Enter URL to decode">
26-
<button onclick="decodeURL()">Decode</button>
43+
<button class="transcribe-button" onclick="decodeURL()">Decode</button>
2744
</div>
2845

2946
<div class="controls">
30-
<div id="result">
31-
<strong>&nbsp;</strong>
47+
<div id="display">
48+
<span id="displayText">
49+
<strong>Result Text:</strong>
50+
</span>
51+
<input
52+
id="result"
53+
type="text"
54+
value=""
55+
placeholder="Encoded or Decoded Result"
56+
/>
57+
<button
58+
class="btn tooltipped tooltipped-se p-2 border copy-button"
59+
aria-label="Copied"
60+
data-clipboard-target="#result"
61+
onclick="copyToClipboard()"
62+
>
63+
<span id="svg-copy">
64+
<svg
65+
aria-hidden="true"
66+
height="16"
67+
viewBox="0 0 16 16"
68+
version="1.1"
69+
width="16"
70+
data-view-component="true"
71+
class="octicon octicon-copy js-clipboard-copy-icon d-inline-block"
72+
>
73+
<path
74+
fill-rule="evenodd"
75+
d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"
76+
></path>
77+
<path
78+
fill-rule="evenodd"
79+
d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"
80+
></path>
81+
</svg>
82+
</span>
83+
<span id="svg-copied">
84+
<svg
85+
aria-hidden="true"
86+
height="16"
87+
viewBox="0 0 16 16"
88+
version="1.1"
89+
width="16"
90+
data-view-component="true"
91+
class="octicon octicon-check js-clipboard-check-icon color-fg-success d-inline-block"
92+
>
93+
<path
94+
fill-rule="evenodd"
95+
d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
96+
></path>
97+
</svg>
98+
</span>
99+
</button>
32100
</div>
33101
</div>
34102
</main>
@@ -37,7 +105,7 @@ <h1 class="title">URL Encoder & Decoder</h1>
37105
<p>&copy; 2023 URL Encoder & Decoder. All rights reserved.</p>
38106
</footer>
39107

40-
<script src="script.js"></script>
108+
<script src="js/script.js"></script>
41109

42110
</body>
43111
</html>

‎js/script.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
function encodeText() {
2+
var textToEncode = document.getElementById('urlInputEncode').value;
3+
var encodedText = encodeURIComponent(textToEncode);
4+
5+
document.getElementById('displayText').getElementsByTagName('strong')[0].innerText = 'Encoded Text:';
6+
document.getElementById('result').value = encodedText;
7+
}
8+
9+
function decodeURL() {
10+
var urlToDecode = document.getElementById('urlInputDecode').value;
11+
var decodedText = decodeURIComponent(urlToDecode);
12+
13+
document.getElementById('displayText').getElementsByTagName('strong')[0].innerText = 'Decoded Text:';
14+
document.getElementById('result').value = decodedText;
15+
}
16+
17+
new ClipboardJS(".copy-button");
18+
document.getElementById("svg-copied").style.display = "none";
19+
20+
function copyToClipboard() {
21+
$("#svg-copy").hide();
22+
$("#svg-copied").show();
23+
24+
setTimeout(function () {
25+
$("#svg-copy").show();
26+
$("#svg-copied").hide();
27+
}, 1000);
28+
}

‎lib/clipboard.min.js‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/jquery-3.6.0.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/primer.css‎

Lines changed: 22 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎script.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)