Moja propozycja, prosty kod, który sprawdza "wszystkie" kombinacje z danego przedziału. Codepen
<!DOCTYPE html>
<html lang="pl">
<head>
<meat charset="utf-8">
<style>
@charset "UTF-8";
@viewport {
width: device-width;
initial-scale: 1;
}
:root {
--default-font-size: 1em;
--default-line-height: 2em;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding:0;
margin:0;
border:0;
}
.grid-container {
display: grid;
grid-template-columns: 0.6fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 8fr;
gap: 0px 0px;
grid-template-areas: ". ." ". ." ". ." ". ." ". ." "board board";
margin: 1em;
width: 50vw;
height: 50vh;
}
.grid-container div {
font: var(--default-font-size)/var(--default-line-height) monospace;
}
.grid-container .label {
font: var(--default-font-size)/var(--default-line-height) monospace;
text-align: right;
padding-right: 0.2em;
}
input[type="number"] {
font: var(--default-font-size) monospace;
width: calc(var(--default-font-size) * 5);
margin-bottom: 0.25em;
}
button {
font: var(--default-font-size) monospace;
width: calc(var(--default-font-size) * 5);
cursor: pointer;
text-align: center;
outline: none;
user-select: none;
border-radius: 0.3em;
box-shadow: 1px 1px 1px rgba(0,0,0,0.6);
transition: all 0.1s;
}
button:hover {
color: green;
}
button:active {
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.board {
grid-area: board;
font: var(--default-font-size)/var(--default-font-height) monospace;
padding: 0;
margin: 0;
overflow-y: auto;
scroll-behavior: smooth;
}
.board::-webkit-scrollbar {
width: 5px;
}
.board::-webkit-scrollbar-track {
box-shadow: inset 0 0 2px rgba(10,10,10,0.5);
border-radius: 1em;
}
.board::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.5);
border-radius: 1em;
}
.board::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,1);
}
</style>
</head>
<body>
<div class="grid-container">
<div class="label">Dolny zakres:</div>
<div><input type="number" id="range-lower" step="1" min="1"></div>
<div class="label">Górny zakres:</div>
<div><input type="number" id="range-upper" step="1"></div>
<div></div>
<div><button id="calculate">Oblicz</button></div>
<div class="label">Wszystkie dostępne:</div>
<div><span id="all-in-range"></span></div>
<div class="label">Powstanie trójkąt:</div>
<div><span id="triangle-in-range"></span></div>
<div class="board"><pre id="board"></pre></div>
</div>
<script>
window.onload = () => {
const RANGE_UPPER = 9;
const input_range_lower = document.querySelector('#range-lower');
const input_range_upper = document.querySelector('#range-upper');
input_range_lower.value = random(1,3);
input_range_upper.value = random(4,RANGE_UPPER);
input_range_lower.setAttribute('max',input_range_lower.value);
input_range_upper.setAttribute('min',input_range_lower.value);
input_range_upper.setAttribute('max',RANGE_UPPER);
const all_in_range = document.querySelector('#all-in-range');
const triangle_in_range = document.querySelector('#triangle-in-range');
const button_calculate = document.querySelector('#calculate');
const board = document.querySelector('#board');
button_calculate.addEventListener('click', () => {
const lower = input_range_lower.value * 1;
const upper = input_range_upper.value * 1;
board.textContent = '';
let all_in_range_counter = 0;
let triangle_in_range_counter = 0;
for (let a=lower; a<=upper; ++a) {
for (let b=lower; b<=upper; ++b) {
for (let c=lower; c<=upper; ++c) {
if (a+b>c && b+c>a && a+c>b) {
triangle_in_range.textContent = ++triangle_in_range_counter;
board.textContent += ` [${a}${b}${c}]`;
if (triangle_in_range_counter % 8 == 0) board.textContent += '\n';
}
all_in_range.textContent = ++all_in_range_counter;
}
}
}
})
}
const random = (min, max) => {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</body>
</html>