Create HTML Encode Using JavaScript #WatuXteam

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.

(HTML)

 <!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"

 <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">

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 (CSS)

 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 (JS)

 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

Thanks for your time today

Label

Media Sosial

About Us

Menu Atas

Iklan

Create HTML Encode Using JavaScript #WatuXteam

Advertisement

Anak

Wanita