Hello guys, welcome to MS Designes. I am Mandeep Singh, Today, I will discuss about how to create Html Code Encoder using HTML, CSS, JS in blogger & wordpress websites
I will provide simple and short script. It is very easy to install in any platform.
Note that, please give credit to Mandeep Singh where you install this script
This tool is developed & designed by Mandeep Singh
The HTML code is here below I merge CSS & JS in single HTML code. Just copy and paste it where you want to display your tool.
Double click on the code to copy it
Live Demo
<!DOCTYPE html>
<html>
<head>
<title>HTML Code Encoder/Decoder</title>
<style>
textarea {
width: 100%;
height: 200px;
margin-bottom: 10px;
margin-top: 10px;
padding: 10px;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 20px;
background-color: #333;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #666;
}
.overlay-credit{text-align:center;
margin-top:20px;
z-index:9;
position:absolute;
bottom:6px;
right:15px;
font-size:10px}
button:disabled {
background-color: #333;
cursor: not-allowed;
}
</style>
</head>
<body>
<div>
<label for="input">Enter HTML code:</label>
<textarea id="input" placeholder="Enter HTML code here"></textarea>
</div>
<div>
<button onclick="encodeHTML()">Encode</button>
<button onclick="decodeHTML()">Decode</button>
</div>
<div>
<label for="output">Output:</label>
<textarea id="output" readonly></textarea>
</div>
<button id="copyBtn" onclick="copyToClipboard()" disabled>Copy</button>
<script>
function encodeHTML() {
var input = document.getElementById("input");
var output = document.getElementById("output");
var copyBtn = document.getElementById("copyBtn");
output.value = htmlEncode(input.value);
copyBtn.disabled = false;
}
function decodeHTML() {
var input = document.getElementById("input");
var output = document.getElementById("output");
var copyBtn = document.getElementById("copyBtn");
output.value = htmlDecode(input.value);
copyBtn.disabled = false;
}
function htmlEncode(value) {
return document.createElement("textarea").appendChild(document.createTextNode(value)).parentNode.innerHTML;
}
function htmlDecode(value) {
var textarea = document.createElement("textarea");
textarea.innerHTML = value;
return textarea.value;
}
function copyToClipboard() {
var output = document.getElementById("output");
output.select();
document.execCommand("copy");
}
</script>
</body>
<span>Coded by - ♥ Mandeep Singh</span>
</html>
