Ring sizer
Ring Sizer Tool
Ring Sizer Tool
Drag and resize the virtual ring to match the size of your existing ring.
/* styles.css */
.container {
max-width: 800px;
margin: 0 auto;
}
.ring-sizer {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #ccc;
background-color: #f2f2f2;
margin-bottom: 20px;
}
.ring {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: brown;
cursor: move;
transform: translate(-50%, -50%);
}
.instructions {
margin-bottom: 20px;
}
// script.js
document.addEventListener('DOMContentLoaded', function() {
var ring = document.getElementById('ring');
var ringSizer = document.getElementById('ringSizer');
var ringPosition = { x: 200, y: 200 };
var ringSize = 20;
function updateRingPosition(event) {
ringPosition.x = event.clientX - ringSizer.getBoundingClientRect().left;
ringPosition.y = event.clientY - ringSizer.getBoundingClientRect().top;
ring.style.left = ringPosition.x + 'px';
ring.style.top = ringPosition.y + 'px';
}
function resizeRing(event) {
var deltaX = event.clientX - ringPosition.x;
var deltaY = event.clientY - ringPosition.y;
ringSize = Math.max(Math.abs(deltaX), Math.abs(deltaY)) * 2;
ring.style.width = ringSize + 'px';
ring.style.height = ringSize + 'px';
}
ring.addEventListener('mousedown', function(event) {
event.preventDefault();
document.addEventListener('mousemove', updateRingPosition);
});
ring.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', updateRingPosition);
});
ring.addEventListener('mousedown', function() {
document.addEventListener('mousemove', resizeRing);
});
ring.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', resizeRing);
});
});
