Budování kalkulačky oblasti geometrie JavaScriptu: Interaktivní vývojář 2025
Anh Quân
Creator
Obsah
- Úvod: Proč sestavit kalkulačku geometrie?
- Co budeme postavit
- Předpoklady
- Pochopení matematiky za výpočty oblasti
- Nastavení projektu
- Implementace JavaScriptu
- Porozumění klíčovým komponentám
- Přidání pokročilých funkcí
- Testování a ověření
- Optimalizace pro mobilní zařízení
- Další vylepšení
- Praktické aplikace
- Závěr
- Zdroje pro další učení
Hloubkový průvodce vytvořením vlastní kalkulačky interaktivní geometrie pomocí JavaScriptu, kompletní s výpočty oblasti pro jednoduché a složité polygony.
Úvod: Proč sestavit kalkulačku geometrie?
Výpočty geometrie tvoří základ četných aplikací v reálném světě-od průzkumu půdy a architektury po vývoj her a geografické informační systémy.Jako vývojáři často potřebujeme spolehlivé nástroje pro výpočet oblastí různých tvarů.I když je k dispozici mnoho online kalkulaček, vytvoření vlastních nabídek několik výhod:
- Úplné přizpůsobení, aby vyhovovalo vašim konkrétním požadavkům na projekt
- Flexibilita integrace s vašimi stávajícími webovými aplikacemi
- Naučit příležitost porozumět koordinaci geometrie a algoritmického myšlení
- Vylepšení portfolia pro předvedení vašich dovedností JavaScriptu
V tomto komplexním tutoriálu projdeme procesem budování výkonné, interaktivní kalkulačky oblasti geometrie pomocí JavaScriptu.Nakonec budete mít plně funkční webovou aplikaci, která přesně vypočítá oblast jednoduchých i komplexních polygonů pomocí geometrie souřadnic.
Co budeme postavit
Naše kalkulačka geometrie bude:
- Umožněte uživatelům zadávat souřadnice polygonu prostřednictvím intuitivního rozhraní
- Vypočítejte oblasti pro pravidelné i nepravidelné polygony
- Podporujte více měřicích jednotek
- Vizualizujte tvary pomocí plátna HTML
- Poskytněte jasné a přesné výsledky se správným zaokrouhlením
- Pracujte ve všech hlavních prohlížečích a zařízeních
Náhled naší finální kalkulačky geometrie JavaScriptu s interaktivním vstupem polygonu
Předpoklady
Chcete -li sledovat tento tutoriál, měli byste mít:
- Základní porozumění HTML, CSS a Javascriptu
- Znalost manipulace s DOM
- Textový editor nebo IDE (vs kód, vznešený text atd.)
- Moderní webový prohlížeč
- Volitelné: Porozumění základům souřadnic geometrie
Pochopení matematiky za výpočty oblasti
Než se ponoříme do kódu, pochopte matematické principy, které pohánějí naši kalkulačku geometrie.
Vzorec tkaničky pro oblast polygonu
Pro výpočet oblasti jakéhokoli polygonu (pravidelného nebo nepravidelného) použijeme vzorec trýze, známý také jako vzorec inspektora nebo Gaussova vzorec.Tento výkonný algoritmus pracuje pro jakýkoli polygon definovaný jeho vrcholy, bez ohledu na to, jak složitý může být tvar.
Vzorec je vyjádřen jako:
Area = 0.5 * |∑(x_i * y_(i+1) - x_(i+1) * y_i)| Kde:
x_iandy_iare the coordinates of the i-th vertex- Vzorec počítá polovinu součtu křížových produktů sousedních vrcholů
- Absolutní hodnota zajišťuje pozitivní oblast
Tento vzorec funguje „chůzí“ po obvodu polygonu a vypočítává křížové produkty mezi po sobě jdoucími body.Když je shrneme a rozdělíme na 2, dostaneme oblast polygonu.
Nastavení projektu
Začněme nastavením základní struktury naší kalkulačky geometrie:
Struktura HTML
Create a new file named index.html with the following structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geometry Area Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator-container">
<h1>Geometry Area Calculator</h1>
<div class="input-section">
<h2>Enter Polygon Coordinates</h2>
<p>Click on the canvas to add points or enter them manually below.</p>
<div class="canvas-container">
<canvas id="polygon-canvas" width="400" height="400"></canvas>
<button id="clear-canvas">Clear Canvas</button>
</div>
<div class="manual-input">
<div class="coordinates-container" id="coordinates-list">
<div class="coordinate-pair">
<input type="number" placeholder="X1" class="x-coord">
<input type="number" placeholder="Y1" class="y-coord">
<button class="remove-point">×</button>
</div>
</div>
<button id="add-point">Add Point</button>
</div>
<div class="units-selection">
<label for="units">Measurement Units:</label>
<select id="units">
<option value="pixels">Pixels</option>
<option value="meters">Meters</option>
<option value="feet">Feet</option>
</select>
</div>
<button id="calculate-area">Calculate Area</button>
</div>
<div class="results-section" id="results">
<!-- Results will be displayed here -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>Styl CSS
Create a file named styles.css for styling our calculator:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
padding: 20px;
}
.calculator-container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
h2 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #444;
}
p {
margin-bottom: 20px;
color: #666;
}
.canvas-container {
margin-bottom: 30px;
text-align: center;
}
canvas {
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.manual-input {
margin-bottom: 25px;
}
.coordinates-container {
max-height: 200px;
overflow-y: auto;
margin-bottom: 15px;
}
.coordinate-pair {
display: flex;
margin-bottom: 8px;
align-items: center;
}
input {
width: 80px;
padding: 8px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.remove-point {
background-color: #f44336;
padding: 8px 12px;
}
.remove-point:hover {
background-color: #d32f2f;
}
#clear-canvas {
margin-top: 10px;
}
.units-selection {
margin-bottom: 25px;
}
select {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.results-section {
margin-top: 30px;
padding: 20px;
background-color: #f0f8ff;
border-radius: 6px;
display: none;
}
.results-section.active {
display: block;
}
.area-result {
font-size: 1.3rem;
margin-bottom: 15px;
}
.calculation-steps {
margin-top: 20px;
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
font-family: monospace;
}Implementace JavaScriptu
Now, let's create the script.js file that will power our geometry area calculator:
// DOM Elements
const canvas = document.getElementById('polygon-canvas');
const ctx = canvas.getContext('2d');
const clearCanvasBtn = document.getElementById('clear-canvas');
const addPointBtn = document.getElementById('add-point');
const coordinatesList = document.getElementById('coordinates-list');
const calculateBtn = document.getElementById('calculate-area');
const resultsSection = document.getElementById('results');
const unitsSelect = document.getElementById('units');
// Global Variables
let points = [];
let isDragging = false;
let dragIndex = -1;
// Canvas Setup
function setupCanvas() {
// Set canvas coordinate system (origin at center)
ctx.translate(canvas.width / 2, canvas.height / 2);
drawGrid();
// Event listeners for canvas interaction
canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', () => isDragging = false);
// Redraw canvas initially
redrawCanvas();
}
// Draw coordinate grid
function drawGrid() {
const width = canvas.width;
const height = canvas.height;
ctx.strokeStyle = '#e0e0e0';
ctx.lineWidth = 1;
// Vertical lines
for (let x = -width/2; x <= width/2; x += 20) {
ctx.beginPath();
ctx.moveTo(x, -height/2);
ctx.lineTo(x, height/2);
ctx.stroke();
}
// Horizontal lines
for (let y = -height/2; y <= height/2; y += 20) {
ctx.beginPath();
ctx.moveTo(-width/2, y);
ctx.lineTo(width/2, y);
ctx.stroke();
}
// X and Y axes (darker)
ctx.strokeStyle = '#aaa';
ctx.lineWidth = 2;
// X-axis
ctx.beginPath();
ctx.moveTo(-width/2, 0);
ctx.lineTo(width/2, 0);
ctx.stroke();
// Y-axis
ctx.beginPath();
ctx.moveTo(0, -height/2);
ctx.lineTo(0, height/2);
ctx.stroke();
}
// Handle mouse down event on canvas
function handleMouseDown(e) {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const canvasX = (e.clientX - rect.left) * scaleX - canvas.width / 2;
const canvasY = (e.clientY - rect.top) * scaleY - canvas.height / 2;
// Check if clicking near an existing point (for dragging)
for (let i = 0; i < points.length; i++) {
const dx = points[i].x - canvasX;
const dy = points[i].y - canvasY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 10) {
isDragging = true;
dragIndex = i;
return;
}
}
// If not dragging, add a new point
points.push({x: canvasX, y: canvasY});
updateCoordinateInputs();
redrawCanvas();
}
// Handle mouse move event on canvas
function handleMouseMove(e) {
if (!isDragging || dragIndex === -1) return;
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const canvasX = (e.clientX - rect.left) * scaleX - canvas.width / 2;
const canvasY = (e.clientY - rect.top) * scaleY - canvas.height / 2;
points[dragIndex] = {x: canvasX, y: canvasY};
updateCoordinateInputs();
redrawCanvas();
}
// Redraw the canvas with all points and connections
function redrawCanvas() {
// Clear the canvas
ctx.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
// Redraw the grid
drawGrid();
if (points.length === 0) return;
// Draw the polygon
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
// Connect back to the first point if we have at least 3 points
if (points.length >= 3) {
ctx.lineTo(points[0].x, points[0].y);
// Fill the polygon with a semi-transparent color
ctx.fillStyle = 'rgba(76, 175, 80, 0.2)';
ctx.fill();
}
// Draw the polygon outline
ctx.strokeStyle = '#4CAF50';
ctx.lineWidth = 2;
ctx.stroke();
// Draw the points
for (let i = 0; i < points.length; i++) {
ctx.beginPath();
ctx.arc(points[i].x, points[i].y, 5, 0, Math.PI * 2);
ctx.fillStyle = '#4CAF50';
ctx.fill();
// Label the points
ctx.fillStyle = '#333';
ctx.font = '12px Arial';
ctx.fillText(`P${i+1}`, points[i].x + 8, points[i].y - 8);
}
}
// Update the coordinate inputs based on canvas points
function updateCoordinateInputs() {
// Clear all existing inputs
coordinatesList.innerHTML = '';
// Add new inputs for each point
for (let i = 0; i < points.length; i++) {
const pair = document.createElement('div');
pair.className = 'coordinate-pair';
const xInput = document.createElement('input');
xInput.type = 'number';
xInput.className = 'x-coord';
xInput.placeholder = `X${i+1}`;
xInput.value = Math.round(points[i].x);
xInput.dataset.index = i;
const yInput = document.createElement('input');
yInput.type = 'number';
yInput.className = 'y-coord';
yInput.placeholder = `Y${i+1}`;
yInput.value = Math.round(points[i].y);
yInput.dataset.index = i;
const removeBtn = document.createElement('button');
removeBtn.className = 'remove-point';
removeBtn.textContent = '×';
removeBtn.dataset.index = i;
pair.appendChild(xInput);
pair.appendChild(yInput);
pair.appendChild(removeBtn);
coordinatesList.appendChild(pair);
// Event listeners for manual input changes
xInput.addEventListener('change', updatePointFromInput);
yInput.addEventListener('change', updatePointFromInput);
removeBtn.addEventListener('click', removePoint);
}
}
// Update a point from manual input
function updatePointFromInput(e) {
const index = parseInt(e.target.dataset.index);
const value = parseFloat(e.target.value);
if (isNaN(value)) return;
if (e.target.className === 'x-coord') {
points[index].x = value;
} else {
points[index].y = value;
}
redrawCanvas();
}
// Remove a point
function removePoint(e) {
const index = parseInt(e.target.dataset.index);
points.splice(index, 1);
updateCoordinateInputs();
redrawCanvas();
}
// Add a new point via button
function addNewPoint() {
// Add a new point at (0, 0) or near the last point if one exists
if (points.length > 0) {
const lastPoint = points[points.length - 1];
points.push({x: lastPoint.x + 20, y: lastPoint.y + 20});
} else {
points.push({x: 0, y: 0});
}
updateCoordinateInputs();
redrawCanvas();
}
// Clear all points
function clearCanvas() {
points = [];
updateCoordinateInputs();
redrawCanvas();
resultsSection.style.display = 'none';
}
// Calculate area using the Shoelace formula
function calculatePolygonArea(vertices) {
if (vertices.length < 3) return 0;
let area = 0;
const n = vertices.length;
for (let i = 0; i < n; i++) {
const j = (i + 1) % n;
area += vertices[i].x * vertices[j].y;
area -= vertices[j].x * vertices[i].y;
}
return Math.abs(area / 2);
}
// Display the calculation results
function displayResults() {
if (points.length < 3) {
alert("You need at least 3 points to calculate area.");
return;
}
const area = calculatePolygonArea(points);
const selectedUnit = unitsSelect.value;
let unitSymbol = 'px²';
let convertedArea = area;
// Apply unit conversions if needed
if (selectedUnit === 'meters') {
unitSymbol = 'm²';
// Assuming 1 pixel = 0.01 meter for example
convertedArea = area * 0.0001;
} else if (selectedUnit === 'feet') {
unitSymbol = 'ft²';
// Assuming 1 pixel = 0.0328 feet
convertedArea = area * 0.001;
}
// Format the result
const formattedArea = convertedArea.toFixed(2);
// Create the result HTML
let resultHTML = `
<h2>Calculation Results</h2>
<div class="area-result">
<strong>Polygon Area:</strong> ${formattedArea} ${unitSymbol}
</div>
<p>Based on ${points.length} vertices</p>
<div class="calculation-steps">
<h3>Calculation Steps:</h3>
<p>Using the Shoelace formula: A = 0.5 × |∑(xᵢyᵢ₊₁ − xᵢ₊₁yᵢ)|</p>
<ol>
`;
// Add the calculation steps
for (let i = 0; i < points.length; i++) {
const j = (i + 1) % points.length;
const term = (points[i].x * points[j].y - points[j].x * points[i].y).toFixed(2);
resultHTML += `<li>Step ${i+1}: (${points[i].x} × ${points[j].y}) - (${points[j].x} × ${points[i].y}) = ${term}</li>`;
}
resultHTML += `
</ol>
<p>Summing all steps and taking absolute value: ${Math.abs(area).toFixed(2)}</p>
<p>Dividing by 2: ${(Math.abs(area)/2).toFixed(2)}</p>
</div>
`;
resultsSection.innerHTML = resultHTML;
resultsSection.style.display = 'block';
resultsSection.scrollIntoView({ behavior: 'smooth' });
}
// Initialize the application
function init() {
setupCanvas();
// Event listeners
clearCanvasBtn.addEventListener('click', clearCanvas);
addPointBtn.addEventListener('click', addNewPoint);
calculateBtn.addEventListener('click', displayResults);
}
// Start the app when the page loads
window.addEventListener('load', init);
Vizuální reprezentace toho, jak vzorec tkanic počítá oblast polygonu
Porozumění klíčovým komponentám
Pojďme rozebrat hlavní komponenty naší kalkulačky oblasti geometrie:
Interakce plátna
Naše kalkulačka používá prvek plátna HTML pro interaktivní tvorbu polygonů.Uživatelé mohou:
- Kliknutím na plátno přidejte body
- Přetáhněte stávající body a upravte pozice
- Viz vizualizace polygonu v reálném čase
- Zobrazit souřadnicovou mřížku pro informaci
Na plátně je nastaveno souřadnicový systém, kde je (0,0) ve středu, takže je pro uživatele intuitivní pracovat s pozitivními i negativními souřadnicemi.
Správa vstupů souřadnic
Uživatelé mohou zadávat souřadnice dvěma způsoby:
- Vizuální vstup: Klikněte přímo na plátno a umístíte body
- Manuální vstup: Zadejte přesné souřadnice ve vstupních polích
Dvě vstupní metody jsou synchronizovány, což umožňuje intuitivní vizuální umístění a přesný numerický vstup.
Implementace algoritmu chločení
Jádrem naší kalkulačky je implementace vzorce boku:
function calculatePolygonArea(vertices) {
if (vertices.length < 3) return 0;
let area = 0;
const n = vertices.length;
for (let i = 0; i < n; i++) {
const j = (i + 1) % n;
area += vertices[i].x * vertices[j].y;
area -= vertices[j].x * vertices[i].y;
}
return Math.abs(area / 2);
}Tato funkce:
- Přijímá řadu souřadnic vrcholů
- Smyčky každým bodem a dalším bodem (obalení do prvního bodu)
- Aplikuje výpočet křížového produktu
- Má absolutní hodnotu a dělí se o 2, aby získala konečnou oblast
Krása tohoto algoritmu spočívá v tom, že funguje pro jakýkoli polygon, bez ohledu na to, zda je to konvexní nebo konkávní, pokud se protíná.
Přidání pokročilých funkcí
Nyní, když máme základní kalkulačku, pojďme na rozšíření některých pokročilých funkcí:
Převod jednotky
Naše kalkulačka podporuje různé jednotky měření:
- Pixely: Pro měření založená na obrazovce
- Měřiče: Pro měření metriky v reálném světě
- Nohy: Pro císařská měření
Konverze jednotky se použije po výpočtu oblasti:
// Apply unit conversions if needed
if (selectedUnit === 'meters') {
unitSymbol = 'm²';
// Assuming 1 pixel = 0.01 meter for example
convertedArea = area * 0.0001;
} else if (selectedUnit === 'feet') {
unitSymbol = 'ft²';
// Assuming 1 pixel = 0.0328 feet
convertedArea = area * 0.001;
}Konverzní faktory si můžete přizpůsobit na základě vašich konkrétních požadavků.
Rozhraní kalkulačky ukazující možnosti převodu jednotky pro různé systémy měření
Podrobné kroky výpočtu
Abychom uživatelům pomohli pochopit, jak je oblast vypočítána, poskytujeme podrobné rozdělení kroků výpočtu:
// Add the calculation steps
for (let i = 0; i < points.length; i++) {
const j = (i + 1) % points.length;
const term = (points[i].x * points[j].y - points[j].x * points[i].y).toFixed(2);
resultHTML += `<li>Step ${i+1}: (${points[i].x} × ${points[j].y}) - (${points[j].x} × ${points[i].y}) = ${term}</li>`;
}Tato transparentnost pomáhá uživatelům ověřit výsledky a dozvědět se o matematických principech výpočtů oblasti polygonů.
Testování a ověření
Než zvážíme naši kalkulačku geometrie kompletní, vyzkoušejte ji s některými známými tvary, abychom ověřili jeho přesnost:
Zkušební případ 1: obdélník
Jednoduchý obdélník s vrcholy při (0,0), (100,0), (100,50) a (0,50) by měl mít plochu 5 000 čtverečních jednotek.
Zkušební případ 2: trojúhelník
Trojúhelník s vrcholy při (0,0), (50 100) a (100,0) by měl mít plochu 5 000 čtverečních jednotek.
Zkušební případ 3: Nepravidelný polygon
Nepravidelný polygon s vrcholy při (0,0), (50 100), (100,50), (75,25) a (25,25) by nám měl dát správnou oblast založenou na vzorci tkanic.
Pro každý testovací případ by naše kalkulačka měla:
- Povolit snadné vstup testovacích souřadnic
- Vypočítejte správnou oblast
- Zobrazit kroky výpočtu pro ověření
Optimalizace pro mobilní zařízení
Aby byla naše kalkulačka geometrie plně reagována, můžeme přidat následující vylepšení:
- Dotkněte se podpory pro interakci plátna
- Responzivní rozvržení, které se přizpůsobuje různým velikostem obrazovky
- Zjednodušené rozhraní pro menší obrazovky
Tyto přírůstky zajišťují, že naše kalkulačka je použitelná na chytrých telefonech a tabletech, což je přístupné uživatelům na všech zařízeních.
Další vylepšení
Chcete -li, aby byla naše kalkulačka oblasti geometrie ještě robustnější, zvažte implementaci těchto dodatečných funkcí:
Přednastavené tvary
Přidejte tlačítka pro rychle vytvoření běžných tvarů jako:
- Náměstí
- Obdélník
- Trojúhelník
- Kruh (aproximovaný jako běžný polygon)
- Pravidelné polygony (Pentagon, hexagon atd.)
Výpočet oblasti pro kruhy
Rozšiřte kalkulačku tak, aby manipulovala s kruhovými oblastmi:
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}Výpočet obvodu
Přidejte funkčnost pro výpočet obvodu polygonů:
function calculatePolygonPerimeter(vertices) {
let perimeter = 0;
const n = vertices.length;
for (let i = 0; i < n; i++) {
const j = (i + 1) % n;
const dx = vertices[j].x - vertices[i].x;
const dy = vertices[j].y - vertices[i].y;
perimeter += Math.sqrt(dx * dx + dy * dy);
}
return perimeter;
}Úspora a nakládání polygonů
Implementujte localStorage pro uložení a načítání konfigurací polygonu:
// Save polygon
function savePolygon(name) {
const polygonData = JSON.stringify(points);
localStorage.setItem(`polygon_${name}`, polygonData);
}
// Load polygon
function loadPolygon(name) {
const polygonData = localStorage.getItem(`polygon_${name}`);
if (polygonData) {
points = JSON.parse(polygonData);
updateCoordinateInputs();
redrawCanvas();
}
}Praktické aplikace
Různé aplikace v reálném světě, kde kalkulačky oblasti geometrie poskytují cenná řešení
Naše kalkulačka oblasti geometrie JavaScriptu má řadu praktických aplikací:
Vývoj webu
- Interaktivní mapy a vizualizace vykreslení
- Aplikace pro průzkum půdy
- Nástroje pro plánování nemovitostí
- Rozložení pokoje a návrhové aplikace
Školství
- Výuka geometrických principů interaktivně
- Vizualizace matematických konceptů
- Vytváření interaktivních učebních zdrojů
Vývoj hry
- Detekce kolize pro herní objekty
- Návrh úrovně a vytváření prostředí
- Procedurální generování herních světů
Závěr
V tomto komplexním tutoriálu jsme vytvořili výkonnou kalkulačku interaktivní geometrie pomocí JavaScriptu.Naše kalkulačka může:
- Přesně vypočítejte oblast jakéhokoli polygonu pomocí vzorec boku
- Poskytněte intuitivní vizuální rozhraní pro vytváření a úpravu tvarů
- Podporujte vstup manuální souřadnice pro přesná měření
- Převést mezi různými jednotkami měření
- Zobrazit podrobné kroky výpočtu pro vzdělávací účely
Principy a techniky, které jsme zakryli - koordinátová geometrie, algoritmus thota, manipulace s plátno a design uživatelského rozhraní - jsou cenné dovednosti, které přesahují tento konkrétní projekt.Můžete je použít na různé výzvy pro vývoj webových stránek, od vizualizace dat po interaktivní aplikace.
Budováním této geometrické kalkulačky jste nejen vytvořili užitečný nástroj, ale také prohloubili vaše porozumění matematickým konceptům a jejich implementaci v JavaScriptu.Neváhejte rozšířit kalkulačku s dalšími funkcemi, optimalizovat její výkon nebo ji integrovat do svých vlastních projektů.
Šťastné kódování!