Hello guys, welcome to MS Designes. I am Mandeep Singh, Today, I will discuss about how to create HTML To XML Generator tool 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>
<meta charset="UTF-8">
<title>HTML to XML Generator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
l
label {
margin-bottom: 10px;
font-size: 18px;
color: #333;
}
textarea {
width: 100%;
height: 300px;
padding: 10px;
font-size: 16px;
color: #333;
border: 1px solid #ccc;
border-radius: 5px;
resize: none;
}
button {
margin-top: 20px;
margin-left: 10px;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: #333;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #555;
}
#xml-code {
margin-top: 20px;
width: 100%;
height: 300px;
padding: 10px;
font-size: 16px;
color: #333;
border: 1px solid #ccc;
border-radius: 5px;
resize: none;
}
.copy-button {
margin-left: 10px;
margin-bottom: 40px;
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: #333;
border: none;
border-radius: 5px;
cursor: pointer;
}
.copy-button:hover {
background-color: #555;
}
.footer {
height: 40px;
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
a {
color: white;
}
a:hover {
color: green;
}
</style>
</head>
<body>
<div class="container">
<form>
<label for="html-code">Enter your HTML code:</label>
<textarea id="html-code" name="html-code" placeholder="Paste your HTML code here"></textarea>
<button type="button" onclick="generateXML()">Generate XML</button>
<textarea id="xml-code" name="xml-code" placeholder="Your XML code will appear here" readonly></textarea>
<button type="button" onclick="copyToClipboard()" class="copy-button">Copy XML</button>
</form>
</div>
<script>
function generateXML() {
// Get the HTML code from the textarea
var htmlCode = document.getElementById('html-code').value;
// Convert the HTML code to XML
var parser = new DOMParser();
var xml = parser.parseFromString(htmlCode, "text/html");
var xmlCode = new XMLSerializer().serializeToString(xml);
// Set the XML
document.getElementById('xml-code').value = xmlCode;
}
function copyToClipboard() {
// Get the XML code from the textarea
var xmlCode = document.getElementById('xml-code').value;
// Create a temporary textarea element to hold the XML code
var tempTextarea = document.createElement('textarea');
tempTextarea.value = xmlCode;
document.body.appendChild(tempTextarea);
// Select the text in the temporary textarea and copy it to the clipboard
tempTextarea.select();
document.execCommand('copy');
// Remove the temporary textarea element
document.body.removeChild(tempTextarea);
// Show a message to the user that the XML code has been copied to the clipboard
alert('XML code copied to clipboard!');
}
</script>
<div class="footer">
<p>© This tool is developed by <a href="https://mrmandeepsingh.blogspot.com/"> <b> <i>Mandeep Singh </i> </b> </a>
</p>
</div>
</body>
</html>
