Seeking assistance with a rectangular div that can have its diagonal length adjusted using JavaScript. I am looking to add a diagonal line to label the diagonal length when it is increased or decreased using the +/- buttons.
I require the line to resize automatically while maintaining quality. The background color should remain green, and the image and label colors should be white. To achieve this, I intend to use CSS to draw the line instead of using an image. An image demonstrating how the div should appear has been attached.
Thank you for your help!
function max(){
var w = document.getElementById('resizable').clientHeight;
var h = document.getElementById('resizable').clientWidth;
document.getElementById('resizable').style.height = h + 5 +'px';
document.getElementById('resizable').style.width= w + 5 +'px';
}
function min(){
var w = document.getElementById('resizable').clientHeight;
var h = document.getElementById('resizable').clientWidth;
document.getElementById('resizable').style.height = h - 5 +'px';
document.getElementById('resizable').style.width= w - 5 +'px';
}<button class="btn" id="increase" onClick="max()">Max (+)</button>
<button class="btn" id="decrease" onClick="min()">Min (-)</button>
<div id="resizable" style="border:1px solid black;background-color:green;width:100px;height:50px;">
</div>