|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Nearest Integer Square Root Finder</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
:root { |
|
|
--primary: #6366f1; |
|
|
--primary-dark: #4f46e5; |
|
|
--secondary: #ec4899; |
|
|
--background: #0f172a; |
|
|
--surface: #1e293b; |
|
|
--surface-light: #334155; |
|
|
--text: #f8fafc; |
|
|
--text-muted: #94a3b8; |
|
|
--success: #22c55e; |
|
|
--gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
background: var(--background); |
|
|
min-height: 100vh; |
|
|
color: var(--text); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
header { |
|
|
width: 100%; |
|
|
padding: 1rem 2rem; |
|
|
background: var(--surface); |
|
|
border-bottom: 1px solid var(--surface-light); |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
flex-wrap: wrap; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.75rem; |
|
|
} |
|
|
|
|
|
.logo i { |
|
|
font-size: 1.75rem; |
|
|
background: var(--gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.logo h1 { |
|
|
font-size: 1.25rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.built-with { |
|
|
color: var(--text-muted); |
|
|
font-size: 0.875rem; |
|
|
text-decoration: none; |
|
|
transition: color 0.3s ease; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.built-with:hover { |
|
|
color: var(--primary); |
|
|
} |
|
|
|
|
|
main { |
|
|
flex: 1; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
padding: 2rem; |
|
|
width: 100%; |
|
|
max-width: 800px; |
|
|
} |
|
|
|
|
|
.calculator-card { |
|
|
background: var(--surface); |
|
|
border-radius: 1.5rem; |
|
|
padding: 2.5rem; |
|
|
width: 100%; |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); |
|
|
border: 1px solid var(--surface-light); |
|
|
} |
|
|
|
|
|
.card-header { |
|
|
text-align: center; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
.card-header h2 { |
|
|
font-size: 1.75rem; |
|
|
margin-bottom: 0.5rem; |
|
|
background: var(--gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.card-header p { |
|
|
color: var(--text-muted); |
|
|
font-size: 0.95rem; |
|
|
} |
|
|
|
|
|
.input-group { |
|
|
position: relative; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.input-group label { |
|
|
display: block; |
|
|
margin-bottom: 0.5rem; |
|
|
font-weight: 500; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.input-wrapper { |
|
|
position: relative; |
|
|
display: flex; |
|
|
gap: 0.75rem; |
|
|
} |
|
|
|
|
|
.input-wrapper input { |
|
|
flex: 1; |
|
|
padding: 1rem 1.25rem; |
|
|
font-size: 1.25rem; |
|
|
border: 2px solid var(--surface-light); |
|
|
border-radius: 0.75rem; |
|
|
background: var(--background); |
|
|
color: var(--text); |
|
|
transition: all 0.3s ease; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.input-wrapper input:focus { |
|
|
border-color: var(--primary); |
|
|
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); |
|
|
} |
|
|
|
|
|
.input-wrapper input::placeholder { |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.btn { |
|
|
padding: 1rem 1.5rem; |
|
|
font-size: 1rem; |
|
|
font-weight: 600; |
|
|
border: none; |
|
|
border-radius: 0.75rem; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: var(--gradient); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 20px rgba(99, 102, 241, 0.3); |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background: var(--surface-light); |
|
|
color: var(--text); |
|
|
} |
|
|
|
|
|
.btn-secondary:hover { |
|
|
background: #475569; |
|
|
} |
|
|
|
|
|
.btn-random { |
|
|
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.btn-random:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3); |
|
|
} |
|
|
|
|
|
.button-group { |
|
|
display: flex; |
|
|
gap: 0.75rem; |
|
|
margin-top: 1rem; |
|
|
flex-wrap: wrap; |
|
|
} |
|
|
|
|
|
.result-container { |
|
|
margin-top: 2rem; |
|
|
padding: 2rem; |
|
|
background: var(--background); |
|
|
border-radius: 1rem; |
|
|
border: 1px solid var(--surface-light); |
|
|
display: none; |
|
|
animation: fadeIn 0.5s ease; |
|
|
} |
|
|
|
|
|
.result-container.show { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(10px); |
|
|
} |
|
|
|
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
.result-header { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 0.75rem; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.result-header i { |
|
|
font-size: 1.5rem; |
|
|
color: var(--success); |
|
|
} |
|
|
|
|
|
.result-header h3 { |
|
|
font-size: 1.25rem; |
|
|
} |
|
|
|
|
|
.result-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
.result-item { |
|
|
background: var(--surface); |
|
|
padding: 1.25rem; |
|
|
border-radius: 0.75rem; |
|
|
text-align: center; |
|
|
border: 1px solid var(--surface-light); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.result-item:hover { |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.result-item.highlight { |
|
|
border-color: var(--primary); |
|
|
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%); |
|
|
} |
|
|
|
|
|
.result-label { |
|
|
font-size: 0.85rem; |
|
|
color: var(--text-muted); |
|
|
margin-bottom: 0.5rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.05em; |
|
|
} |
|
|
|
|
|
.result-value { |
|
|
font-size: 2rem; |
|
|
font-weight: 700; |
|
|
background: var(--gradient); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.result-item.highlight .result-value { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.result-sub { |
|
|
font-size: 0.85rem; |
|
|
color: var(--text-muted); |
|
|
margin-top: 0.25rem; |
|
|
} |
|
|
|
|
|
.visualization { |
|
|
margin-top: 2rem; |
|
|
padding: 1.5rem; |
|
|
background: var(--surface); |
|
|
border-radius: 0.75rem; |
|
|
border: 1px solid var(--surface-light); |
|
|
} |
|
|
|
|
|
.visualization h4 { |
|
|
margin-bottom: 1rem; |
|
|
color: var(--text-muted); |
|
|
font-size: 0.9rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.05em; |
|
|
} |
|
|
|
|
|
.number-line { |
|
|
position: relative; |
|
|
height: 60px; |
|
|
background: var(--background); |
|
|
border-radius: 0.5rem; |
|
|
margin: 1rem 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.number-line-track { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 5%; |
|
|
right: 5%; |
|
|
height: 4px; |
|
|
background: var(--surface-light); |
|
|
border-radius: 2px; |
|
|
transform: translateY(-50%); |
|
|
} |
|
|
|
|
|
.number-marker { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
transition: all 0.5s ease; |
|
|
} |
|
|
|
|
|
.marker-dot { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
border-radius: 50%; |
|
|
background: var(--primary); |
|
|
} |
|
|
|
|
|
.marker-dot.input { |
|
|
background: var(--secondary); |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
box-shadow: 0 0 20px rgba(236, 72, 153, 0.5); |
|
|
} |
|
|
|
|
|
.marker-dot.nearest { |
|
|
background: var(--success); |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
box-shadow: 0 0 20px rgba(34, 197, 94, 0.5); |
|
|
} |
|
|
|
|
|
.marker-label { |
|
|
position: absolute; |
|
|
font-size: 0.75rem; |
|
|
white-space: nowrap; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
.marker-label.top { |
|
|
bottom: 100%; |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.marker-label.bottom { |
|
|
top: 100%; |
|
|
margin-top: 0.5rem; |
|
|
} |
|
|
|
|
|
.formula-display { |
|
|
margin-top: 1.5rem; |
|
|
padding: 1rem; |
|
|
background: var(--background); |
|
|
border-radius: 0.5rem; |
|
|
font-family: 'Courier New', monospace; |
|
|
font-size: 0.9rem; |
|
|
color: var(--text-muted); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.formula-display span { |
|
|
color: var(--primary); |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.error-message { |
|
|
color: #ef4444; |
|
|
font-size: 0.875rem; |
|
|
margin-top: 0.5rem; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.error-message.show { |
|
|
display: block; |
|
|
animation: shake 0.5s ease; |
|
|
} |
|
|
|
|
|
@keyframes shake { |
|
|
|
|
|
0%, |
|
|
100% { |
|
|
transform: translateX(0); |
|
|
} |
|
|
|
|
|
25% { |
|
|
transform: translateX(-5px); |
|
|
} |
|
|
|
|
|
75% { |
|
|
transform: translateX(5px); |
|
|
} |
|
|
} |
|
|
|
|
|
footer { |
|
|
width: 100%; |
|
|
padding: 1.5rem; |
|
|
text-align: center; |
|
|
color: var(--text-muted); |
|
|
font-size: 0.875rem; |
|
|
border-top: 1px solid var(--surface-light); |
|
|
} |
|
|
|
|
|
@media (max-width: 600px) { |
|
|
.calculator-card { |
|
|
padding: 1.5rem; |
|
|
} |
|
|
|
|
|
.card-header h2 { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.input-wrapper { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
width: 100%; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.button-group { |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.result-value { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.result-item.highlight .result-value { |
|
|
font-size: 2rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<header> |
|
|
<div class="logo"> |
|
|
<i class="fas fa-square-root-variable"></i> |
|
|
<h1>Square Root Finder</h1> |
|
|
</div> |
|
|
<a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank"> |
|
|
<i class="fas fa-code"></i> |
|
|
Built with anycoder |
|
|
</a> |
|
|
</header> |
|
|
|
|
|
<main> |
|
|
<div class="calculator-card"> |
|
|
<div class="card-header"> |
|
|
<h2><i class="fas fa-calculator"></i> Nearest Integer Square Root</h2> |
|
|
<p>Enter any positive number to find its nearest integer square root</p> |
|
|
</div> |
|
|
|
|
|
<div class="input-group"> |
|
|
<label for="numberInput">Enter a positive number</label> |
|
|
<div class="input-wrapper"> |
|
|
<input type="number" id="numberInput" placeholder="e.g., 50" min="0" step="any"> |
|
|
<button class="btn btn-primary" onclick="calculateSquareRoot()"> |
|
|
<i class="fas fa-calculator"></i> |
|
|
Calculate |
|
|
</button> |
|
|
</div> |
|
|
<p class="error-message" id="errorMessage">Please enter a valid positive number</p> |
|
|
</div> |
|
|
|
|
|
<div class="button-group"> |
|
|
<button class="btn btn-random" onclick="generateRandom()"> |
|
|
<i class="fas fa-dice"></i> |
|
|
Random Number |
|
|
</button> |
|
|
<button class="btn btn-secondary" onclick="clearAll()"> |
|
|
<i class="fas fa-eraser"></i> |
|
|
Clear |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="result-container" id="resultContainer"> |
|
|
<div class="result-header"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<h3>Results</h3> |
|
|
</div> |
|
|
|
|
|
<div class="result-grid"> |
|
|
<div class="result-item"> |
|
|
<div class="result-label">Input Number</div> |
|
|
<div class="result-value" id="inputNumber">-</div> |
|
|
</div> |
|
|
<div class="result-item"> |
|
|
<div class="result-label">Exact Square Root</div> |
|
|
<div class="result-value" id="exactRoot">-</div> |
|
|
</div> |
|
|
<div class="result-item highlight"> |
|
|
<div class="result-label">Nearest Integer √</div> |
|
|
<div class="result-value" id="nearestRoot">-</div> |
|
|
<div class="result-sub" id="nearestSquare">-</div> |
|
|
</div> |
|
|
<div class="result-item"> |
|
|
<div class="result-label">Difference</div> |
|
|
<div class="result-value" id="difference">-</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="visualization"> |
|
|
<h4><i class="fas fa-chart-line"></i> Visual Representation</h4> |
|
|
<div class="number-line"> |
|
|
<div class="number-line-track"></div> |
|
|
<div class="number-marker" id="lowerMarker" style="left: 20%;"> |
|
|
<div class="marker-dot"></div> |
|
|
<span class="marker-label top" id="lowerLabel">-</span> |
|
|
<span class="marker-label bottom" id="lowerSquare">-</span> |
|
|
</div> |
|
|
<div class="number-marker" id="inputMarker" style="left: 50%;"> |
|
|
<div class="marker-dot input"></div> |
|
|
<span class="marker-label top" id="inputLabel">Input</span> |
|
|
</div> |
|
|
<div class="number-marker" id="upperMarker" style="left: 80%;"> |
|
|
<div class="marker-dot"></div> |
|
|
<span class="marker-label top" id="upperLabel">-</span> |
|
|
<span class="marker-label bottom" id="upperSquare">-</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="formula-display" id="formulaDisplay"> |
|
|
√<span>n</span> ≈ <span>result</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer> |
|
|
<p>© 2024 Square Root Finder | Mathematical precision at your fingertips</p> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
const numberInput = document.getElementById('numberInput'); |
|
|
const resultContainer = document.getElementById('resultContainer'); |
|
|
const errorMessage = document.getElementById('errorMessage'); |
|
|
|
|
|
numberInput.addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
calculateSquareRoot(); |
|
|
} |
|
|
}); |
|
|
|
|
|
function calculateSquareRoot() { |
|
|
const input = parseFloat(numberInput.value); |
|
|
|
|
|
|
|
|
if (isNaN(input) || input < 0) { |
|
|
showError(); |
|
|
return; |
|
|
} |
|
|
|
|
|
hideError(); |
|
|
|
|
|
|
|
|
const exactRoot = Math.sqrt(input); |
|
|
const floorRoot = Math.floor(exactRoot); |
|
|
const ceilRoot = Math.ceil(exactRoot); |
|
|
|
|
|
|
|
|
let nearestRoot; |
|
|
if (exactRoot === floorRoot) { |
|
|
nearestRoot = floorRoot; |
|
|
} else { |
|
|
const floorDiff = Math.abs(input - (floorRoot * floorRoot)); |
|
|
const ceilDiff = Math.abs(input - (ceilRoot * ceilRoot)); |
|
|
nearestRoot = floorDiff <= ceilDiff ? floorRoot : ceilRoot; |
|
|
} |
|
|
|
|
|
const nearestSquare = nearestRoot * nearestRoot; |
|
|
const difference = Math.abs(input - nearestSquare); |
|
|
|
|
|
|
|
|
document.getElementById('inputNumber').textContent = formatNumber(input); |
|
|
document.getElementById('exactRoot').textContent = formatNumber(exactRoot, 6); |
|
|
document.getElementById('nearestRoot').textContent = nearestRoot; |
|
|
document.getElementById('nearestSquare').textContent = `(${nearestRoot}² = ${nearestSquare})`; |
|
|
document.getElementById('difference').textContent = formatNumber(difference, 4); |
|
|
|
|
|
|
|
|
updateVisualization(input, floorRoot, ceilRoot, nearestRoot); |
|
|
|
|
|
|
|
|
document.getElementById('formulaDisplay').innerHTML = |
|
|
`√<span>${formatNumber(input)}</span> = <span>${formatNumber(exactRoot, 6)}</span> ≈ <span>${nearestRoot}</span>`; |
|
|
|
|
|
|
|
|
resultContainer.classList.add('show'); |
|
|
} |
|
|
|
|
|
function updateVisualization(input, floorRoot, ceilRoot, nearestRoot) { |
|
|
const lowerMarker = document.getElementById('lowerMarker'); |
|
|
const inputMarker = document.getElementById('inputMarker'); |
|
|
const upperMarker = document.getElementById('upperMarker'); |
|
|
|
|
|
const lowerSquare = floorRoot * floorRoot; |
|
|
const upperSquare = ceilRoot * ceilRoot; |
|
|
|
|
|
|
|
|
if (floorRoot === ceilRoot) { |
|
|
lowerMarker.style.left = '30%'; |
|
|
inputMarker.style.left = '50%'; |
|
|
upperMarker.style.left = '70%'; |
|
|
|
|
|
document.getElementById('lowerLabel').textContent = `√${lowerSquare} = ${floorRoot}`; |
|
|
document.getElementById('lowerSquare').textContent = 'Perfect Square!'; |
|
|
document.getElementById('upperLabel').textContent = `√${(floorRoot + 1) * (floorRoot + 1)} = ${floorRoot + 1}`; |
|
|
document.getElementById('upperSquare').textContent = `${(floorRoot + 1) * (floorRoot + 1)}`; |
|
|
} else { |
|
|
|
|
|
const range = upperSquare - lowerSquare; |
|
|
const inputPosition = ((input - lowerSquare) / range) * 60 + 20; |
|
|
|
|
|
lowerMarker.style.left = '20%'; |
|
|
inputMarker.style.left = `${Math.min(80, Math.max(20, inputPosition))}%`; |
|
|
upperMarker.style.left = '80%'; |
|
|
|
|
|
document.getElementById('lowerLabel').textContent = `√${lowerSquare} = ${floorRoot}`; |
|
|
document.getElementById('lowerSquare').textContent = `${lowerSquare}`; |
|
|
document.getElementById('upperLabel').textContent = `√${upperSquare} = ${ceilRoot}`; |
|
|
document.getElementById('upperSquare').textContent = `${upperSquare}`; |
|
|
} |
|
|
|
|
|
document.getElementById('inputLabel').textContent = formatNumber(input); |
|
|
|
|
|
|
|
|
const lowerDot = lowerMarker.querySelector('.marker-dot'); |
|
|
const upperDot = upperMarker.querySelector('.marker-dot'); |
|
|
|
|
|
lowerDot.classList.remove('nearest'); |
|
|
upperDot.classList.remove('nearest'); |
|
|
|
|
|
if (nearestRoot === floorRoot) { |
|
|
lowerDot.classList.add('nearest'); |
|
|
} else { |
|
|
upperDot.classList.add('nearest'); |
|
|
} |
|
|
} |
|
|
|
|
|
function generateRandom() { |
|
|
const random = Math.floor(Math.random() * 10000) + 1; |
|
|
numberInput.value = random; |
|
|
calculateSquareRoot(); |
|
|
} |
|
|
|
|
|
function clearAll() { |
|
|
numberInput.value = ''; |
|
|
resultContainer.classList.remove('show'); |
|
|
hideError(); |
|
|
} |
|
|
|
|
|
function showError() { |
|
|
errorMessage.classList.add('show'); |
|
|
numberInput.style.borderColor = '#ef4444'; |
|
|
} |
|
|
|
|
|
function hideError() { |
|
|
errorMessage.classList.remove('show'); |
|
|
numberInput.style.borderColor = ''; |
|
|
} |
|
|
|
|
|
function formatNumber(num, decimals = 2) { |
|
|
if (Number.isInteger(num)) { |
|
|
return num.toString(); |
|
|
} |
|
|
return parseFloat(num.toFixed(decimals)).toString(); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
numberInput.focus(); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
</html> |
