URL Decoder/Encoder

Using JavaScript, let's create a URL decoder

Code

HTML

<textarea id="data"></textarea><br />
<button id="encode">Encode</button>
<button id="decode">Decode</button>

HTML code is used to create the basic structure of the page, including elements such as text areas and buttons.

In the given example, a text area with the ID "data" and two buttons with the IDs "encode" and "decode" were created.

The text area with the ID "data" is where the user can type or paste the text they want to encode or decode, while the "encode" and "decode" buttons are used to indicate the action the user wants to perform.

JS

const data = document.querySelector("#data");
const encode = document.querySelector("#encode");
const decode = document.querySelector("#decode");

encode.addEventListener('click', encodeURL);
decode.addEventListener('click', decodeURL);

function encodeURL() {
  data.value = encodeURIComponent(data.value);
}

function decodeURL() {
  data.value = decodeURIComponent(data.value);
}

JavaScript is used to add functionality to previously created HTML elements. In the given example, the lines of JavaScript code are responsible for selecting the HTML elements, adding event listeners for the "encode" and "decode" buttons and the "encodeURL" and "decodeURL" functions that respectively encode and decode the text contained in the area "date" text icon.

When the user clicks the "encode" button, the "encodeURL" function is called, using the JavaScript "encodeURIComponent" function to encode the text contained in the "data" text area and assigning the result back to the "value" property of the "date" text area. Likewise, when the user clicks the "decode" button, the "decodeURL" function is called, using the JavaScript "decodeURIComponent" function to decode the text contained in the "data" text area and assigning the result back to the property "value" from the "data" text area.

Demo

See below for the complete working project.

if you can't see it click here and see the final result

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

Support Me

Youtube - WalterNascimentoBarroso
Github - WalterNascimentoBarroso
Codepen - WalterNascimentoBarroso