Recently I decided to add some hardware to my cabinets. Had never done it before so didn't quite have direction. I took a trip to Lowe's and purchased the new hardware.
<html lang="en">
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.edges {
display: flex;
justify-content: flex-end;
}
.dot {
background-color: black;
border-radius: 50%;
height: 8mm;
width: 8mm;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.bar {
display: flex;
flex-direction: column;
border: 1px solid black;
height: calc(76.2mm + 8mm);
justify-content: space-between;
width: fit-content;
}
@page {
margin-top: 80mm;
margin-bottom: 80mm;
margin-left: 30mm;
margin-right: 30mm;
}
@media print {
#editor {
display: none;
}
}
</style>
</head>
<body>
<div class="edges">
<div class="bar">
<div class="dot">+</div>
<div class="dot">+</div>
</div>
</div>
<!-- <div id="editor">
<p>You can get most of this info from the packaging where your hardware comes in.</p>
<div>
<label for="">circle size</label>
<input type="text" id="circle-size" value="8">mm
</div>
<div>
<label for="">gap size</label>
<input type="text" id="gap-size" value="76.2">mm
</div>
<div>
<label for="">distance from edge</label>
<input type="text" id="edge-distance" value="30">mm
</div>
</div> -->
<script>
document.getElementById("circle-size").addEventListener("input", function() {
const newSize = this.value;
Array.from(document.getElementsByClassName("dot")).forEach(function (el) {
el.style.height = newSize + "mm";
el.style.width = newSize + "mm";
});
});
document.getElementById("gap-size").addEventListener("input", function() {
const newSize = this.value;
Array.from(document.getElementsByClassName("bar")).forEach(function (el) {
el.style.height = newSize + "mm";
});
});
/*
document.getElementById("edge-distance").addEventListener("input", function() {
const newSize = this.value;
Array.from(document.getElementsByClassName("bar")).forEach(function (el) {
el.style.height = newSize + "mm";
});
});
*/
</script>
</body>
</html>