| <!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> |
