boxers
Version:
Boxers a css grid library
93 lines (77 loc) • 1.85 kB
HTML
<html>
<head>
<title>Boxers Grid</title>
<link rel="stylesheet" href="./boxers-grid.css">
</head>
<body>
<style>
.parent {
margin: 6px;
width: 600px;
height: 600px;
border: 1px dashed red;
background-color: lightgray;
}
.child {
margin: 1px;
min-width: 60px;
min-height: 60px;
border: 1px dashed black;
background-color: darkgray;
}
</style>
<br>
<br>
<h1>Direction</h1>
<button>x-direction</button>
<button>y-direction</button>
<h1>Y</h1>
<button>y-end</button>
<button>y-start</button>
<button>y-center</button>
<h1>X</h1>
<button>x-end</button>
<button>x-start</button>
<button>x-center</button>
<h1>Others</h1>
<button>first</button>
<button>last</button>
<button>wrap</button>
<button>grow</button>
<button>shrink</button>
<button>reverse</button>
<button>around</button>
<button>between</button>
<br>
<hr>
<br>
<div class="result"></div>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
</div>
<script>
const result = document.querySelector('.result');
const parent = document.querySelector('.parent');
const children = document.querySelectorAll('.child');
const buttons = document.querySelectorAll('button');
for (let button of buttons) {
button.addEventListener('click', function () {
if (this.innerText.includes('positive') || this.innerText.includes('negative')) {
parent.classList.remove('x-positive');
parent.classList.remove('x-negative');
parent.classList.remove('y-positive');
parent.classList.remove('y-negative');
}
parent.classList.toggle(this.innerText);
result.innerText = parent.className;
});
}
</script>
</body>
</html>