clean
This commit is contained in:
105
.hta_slug/rgb-to-hex-generator.php
Normal file
105
.hta_slug/rgb-to-hex-generator.php
Normal file
@@ -0,0 +1,105 @@
|
||||
<section class="diZContainer diZmxAuto diZmt8">
|
||||
<h1 class="diZBorderBottom">RGB to HEX Converter</h1>
|
||||
<div class="diZmxAuto toolsSection diZMaxW600 diZmy20" >
|
||||
<div class="diZFlexColumn"><br>
|
||||
<label for="red">Red:</label>
|
||||
<input style="width: 97%;" type="number" id="red" min="0" max="255" required>
|
||||
</div>
|
||||
<div class="diZFlexColumn"><br>
|
||||
<label for="green">Green:</label>
|
||||
<input style="width: 97%;" type="number" id="green" min="0" max="255" required>
|
||||
</div>
|
||||
<div class="diZFlexColumn"><br>
|
||||
<label for="blue">Blue:</label>
|
||||
<input style="width: 97%;" type="number" id="blue" min="0" max="255" required>
|
||||
</div>
|
||||
<div id="result"></div>
|
||||
<div class="diZFlexBetween">
|
||||
<button class="" onclick="convert()"><span>Convert</span></button>
|
||||
<button id="copyButton" onclick="copyToClipboard()"><span>Copy</span></button>
|
||||
</div>
|
||||
<span class="diZDisplayNone" id="copied-notice"></span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- diZJustifyCenter diZItemsCenter -->
|
||||
<script>
|
||||
function rgbToHex(r, g, b) {
|
||||
r = Math.max(0, Math.min(255, r));
|
||||
g = Math.max(0, Math.min(255, g));
|
||||
b = Math.max(0, Math.min(255, b));
|
||||
|
||||
var hex = "#" + ("0" + r.toString(16)).slice(-2) + ("0" + g.toString(16)).slice(-2) + ("0" + b.toString(16)).slice(-2);
|
||||
|
||||
return hex.toUpperCase();
|
||||
}
|
||||
|
||||
function convert() {
|
||||
var red = parseInt(document.getElementById('red').value);
|
||||
var green = parseInt(document.getElementById('green').value);
|
||||
var blue = parseInt(document.getElementById('blue').value);
|
||||
|
||||
var hexColor = rgbToHex(red, green, blue);
|
||||
document.getElementById('result').textContent = "RGB(" + red + ", " + green + ", " + blue + ") is equivalent to " + hexColor;
|
||||
|
||||
document.getElementById('copyButton').style.display = 'inline-block';
|
||||
}
|
||||
|
||||
function copyToClipboard() {
|
||||
var hexColor = document.getElementById('result').textContent.split('equivalent to ')[1];
|
||||
var textarea = document.createElement('textarea');
|
||||
textarea.value = hexColor;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
document.getElementById('copied-notice').style.display = 'block';
|
||||
document.getElementById('copied-notice').innerHTML = 'HEX color code copied Successfully';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container-dzx {
|
||||
background-color: #3d3d3d;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 10px 0px #FFFFFF80;
|
||||
padding: 20px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: translate(-50%, -70%);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
input[type="number"] {
|
||||
width: 100px;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.button-style{
|
||||
padding: 10px 20px;
|
||||
background-color: #7d7d7d;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.button-style:hover {
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
|
||||
#result {
|
||||
color: #007bff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user