Assuming you are referring to creating a HTML Encode / Decode Tools using JavaScript, here is a simple example using HTML, CSS, and JavaScript, follow these steps.
1. Create an HTML file and include a basic structure with a head and body tag. You can use the following code as a starting point and Add the CSS and JavaScript files to your HTML document.
htmlCopy code
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Encode / Decode Tools Using JavaScript</title> <link rel="stylesheet" href="style.css"> <script src="https://democodewithar.000webhostapp.com/v3/encode-decode.js"></script></head><body> <script src="script.js"></script></body></html>2. Inside the body tag, create a div element with a class of "container".
htmlCopy code
<div class="container"> <h1>HTML Encode / Decode</h1> <div class="action-button"> <div class="switch-button"> Auto <span class="title" >Encode</span> : <div class="switch-button"> <input class="auto" type="checkbox" checked id="auto"> <label for="auto"></label> </div> <button class="change">Change</button> </div> <div class="switch-button"> <input class="encode-decode" type="radio" checked name="selectOption" id="html-encode" value="encode"> <label class="html-encode" for="html-encode">HTML Encode</label> <input class="encode-decode" type="radio" name="selectOption" id="html-decode" value="decode"> <label class="html-decode" for="html-decode">HTML Decode</label> </div> </div> <textarea class="enter-data" name="" id="" cols="40" rows="15"></textarea> <p style="margin-top: 20px;" >Output HTML :</p> <textarea class="output-data" name="" id="" cols="40" rows="15"></textarea></div>3. Create a CSS file and style your HTML Encode / Decode Tools to make it look nice. You can use the following code as a starting point:
cssCopy code
body { margin: 0; padding: 0; font-family: sans-serif;}.container { max-width: 680px; width: 95%; margin: 0 auto;}.switch-button,.action-button { display: flex; align-items: center; margin: 20px 0; height: 28px; justify-content: space-between;}.switch-button .title { margin: 0 5px; align-items: center;}.switch-button .auto,.encode-decode { position: absolute; opacity: 0; z-index: -2;}.switch-button .title { text-transform: capitalize;}.switch-button .auto+label { position: relative; display: inline-block; width: 70px; height: 26px; border-radius: 20px; margin: 0; cursor: pointer; background: #0090ff24; margin-left: 10px; border: solid 1px #0091ff51;}.switch-button .auto+label::before { position: absolute; content: "OFF"; font-size: 12px; align-items: center; text-align: center; line-height: 21px; top: 2.5px; left: 2.5px; width: 36px; border-radius: 20px; background: #fff; transition: .3s ease-in-out;}.switch-button .auto:checked+label::before { left: 31px !important; content: "ON"; background: #003cff; color: #fff;}.switch-button .change,.html-encode,.html-decode { padding: 5px 12px; margin-left: 10px; cursor: pointer; user-select: none; border: solid 1px #0091ff51; background: #0090ff24; border-radius: 20px; color: #008fd6; transition: all 0.3s;}.html-encode:active,.html-decode:active,.switch-button .change:active { border-color: #003cff;}.switch-button .encode-decode:checked+label { background: #003cff; color: #fff;}textarea { padding: 10px; width: -webkit-fill-available; border: solid 1px #babfc4; outline: none; color: #444; background: #eee; border-radius: 2px;}textarea:focus { box-shadow: 0 0 0 1px #008fd6; border-color: #008fd6;}4. Create a JS file. You can use the following code as a starting point:
jsCopy code
const ar = codewithar;const auto = ar.s("auto");const output = function (data) { setTimeout(() =>{ const output_data = ar.s("output-data"); let encode = false; for (let i = 0, nx = ar.sl("encode-decode", true); i < nx.length; i++) { if (nx[i].checked) encode = nx[i].value; } if (encode == "encode") {output_data.value = ar.htmlEncode(data)} if (encode == "decode") {output_data.value = ar.htmlDecode(data)} })}const enter_data = ar.s("enter-data");enter_data.addEventListener("input", function () { if(auto.checked) output(this.value); else{ar.s("change").on(function () { output(enter_data.value) })}});for (let i = 0, nx = ar.sl("label", false); i < nx.length; i++) { nx[i].on(function () { output(enter_data.value, this)})}for (let i = 0, nx = ar.sl("encode-decode", true); i < nx.length; i++) { nx[i].on(function () { ar.s("title").innerHTML = nx[i].value;})}5. Save the file and open it in a web browser to see your HTML Encode / Decode Tools.