<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h1 class="text-center my-5">Convert PX to REM</h1>
<form id="frmData" action="" class="row gy-3">
<!-- Generated form elements will be inserted here -->
<div class="col"><label for="original" class="mb-2">Original CSS</label><textarea type="textarea"
class="form-control form-control" id="original" placeholder="Original CSS place here"
rows="20"></textarea></div>
<div class="col-2 align-items-center justify-content-center">
<div class="row g-3">
<div class="col-12 text-center"><label for="pixels" class="mb-2">PX</label><input type="text"
class="form-control form-control text-center" id="pixels" pattern="[0-9]" value="16">
</div>
<div class="col-12">
<div class="d-flex flex-column"><button class="btn btn-md btn-primary mt-5"
type="button">Convert</button><button class="btn btn-md btn-success mt-4"
type="button">Copy</button><button class="btn btn-md btn-danger mt-4"
type="button">Clear</button></div>
</div>
</div>
</div>
<div class="col"><label for="converted" class="mb-2">Converted CSS</label><textarea type="textarea"
class="form-control form-control" id="converted"
placeholder="Converted CSS will be here, press convert button after placing original CSS"
rows="20"></textarea></div>
</form>
</div>
$(document).ready(function () {
$(this).on('submit', function (e) {
e.preventDefault();
});
$('#pixels').on('change', function () {
var text = $('#original').val();
var value = $(this).val();
var newText = text.replace(/[0-9]+px/g, function (match) {
return Math.round( parseInt(match) / value * 1000 ) / 1000 + 'rem';
});
$('#converted').val(newText);
});
$('button.btn-primary').on('click', function () {
var text = $('#original').val();
var value = $('#pixels').val();
var newText = text.replace(/[0-9]+px/g, function (match) {
return Math.round( parseInt(match) / value * 1000 ) / 1000 + 'rem';
});
$('#converted').val(newText);
});
$('button.btn-success').on('click', function () {
copyToClipboard($('#converted'));
});
$('button.btn-danger').on('click', function () {
$('#original').val('');
$('#converted').val('');
});
});
