Skip to content

Instantly share code, notes, and snippets.

@protectroot-com
Created February 16, 2023 01:46
Show Gist options
  • Save protectroot-com/c042f8cefb85645d43218499e6bdb74c to your computer and use it in GitHub Desktop.
Save protectroot-com/c042f8cefb85645d43218499e6bdb74c to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Button with Gear Icon</title>
<style>
/* Style for the gear icon */
.gear-icon {
display: inline-block;
width: 16px;
height: 16px;
background-image: url('gear.png');
background-size: cover;
margin-right: 5px;
}
/* Style for the button */
.blue-button {
display: inline-block;
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
font-size: 16px;
}
/* Style for the save button */
.save-button {
display: block;
margin: 4in auto 0;
background-color: #4caf50;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
font-size: 16px;
}
</style>
</head>
<body>
<div>
<span class="gear-icon" onclick="changeButtonLabel()"></span>
<button class="blue-button" id="button">Button Label</button>
</div>
<button class="save-button">Save</button>
<script>
function changeButtonLabel() {
const newLabel = prompt("Enter a new label for the button:");
const button = document.getElementById("button");
button.innerText = newLabel;
}
var blueButton = document.querySelector(".save-button");
var buttonLabel = document.querySelector(".blue-button").value;
blueButton.addEventListener("click", function() {
var html = document.documentElement.outerHTML;
html = html.replace('value=""', 'value="' + buttonLabel + '"');
var dataUri = "data:text/html;charset=UTF-8," + encodeURIComponent(html);
var link = document.createElement("a");
link.setAttribute("href", dataUri);
link.setAttribute("download", "welcome.html");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment