var root = document.querySelector('.widget'); var fig = root.querySelector('#figure'); var aEl = root.querySelector('#a'); var bEl = root.querySelector('#b'); var aVal = root.querySelector('#aVal'); var bVal = root.querySelector('#bVal'); var sum = root.querySelector('#sum'); function update() { var a = Number(aEl.value), b = Number(bEl.value); var c = Math.sqrt(a * a + b * b); var u = 26; // pixels per unit var ox = 250, oy = 240; // right-angle corner var A = { x: ox, y: oy - a * u }; var B = { x: ox + b * u, y: oy }; var C = { x: ox, y: oy }; var svg = ''; // square on the vertical side (a) svg += ''; svg += '' + (a * a) + ''; // square on the horizontal side (b) svg += ''; svg += '' + (b * b) + ''; // square on the hypotenuse, built by rotating the AB vector var dx = B.x - A.x, dy = B.y - A.y; var p3 = { x: B.x + dy, y: B.y - dx }; var p4 = { x: A.x + dy, y: A.y - dx }; svg += ''; svg += '' + (a * a + b * b) + ''; // the triangle itself svg += ''; svg += ''; svg += 'a = ' + a + ''; svg += 'b = ' + b + ''; fig.innerHTML = svg; aVal.textContent = String(a); bVal.textContent = String(b); sum.textContent = (a * a) + ' + ' + (b * b) + ' = ' + (a * a + b * b) + ' (c = ' + c.toFixed(2) + ')'; [aEl, bEl].forEach(function (el) { el.style.setProperty('--val', (100 * (el.value - el.min) / (el.max - el.min)) + '%'); }); } aEl.addEventListener('input', update); bEl.addEventListener('input', update); update();