help@rskworld.in +91 93305 39277
RSK World
  • Home
  • Development
    • Web Development
    • Mobile Apps
    • Software
    • Games
    • Project
  • Technologies
    • Data Science
    • AI Development
    • Cloud Development
    • Blockchain
    • Cyber Security
    • Dev Tools
    • Testing Tools
  • About
  • Contact

Theme Settings

Color Scheme
Display Options
Font Size
100%
Back to Project
RSK World
js-calculator
RSK World
js-calculator
JavaScript Calculator - HTML5 + CSS3 + JavaScript + Voice Control + Scientific Functions + Modern UI + Glassmorphism Design
js-calculator
  • LICENSE1.1 KB
  • README.md1.3 KB
  • RELEASE_NOTES.md587 B
  • index.html6.3 KB
  • script.js23.4 KB
  • style.css6.9 KB
index.html
index.html
Raw Download
Find: Go to:
<!--
    Project: Advanced JavaScript Calculator
    Author: Enhanced by AI Assistant
    Original Design: RSK World
    Version: 2.0
    Year: 2026
    Copyright: © 2026 RSK World. All rights reserved.
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Calculator - RSK World</title>
    <meta name="description"
        content="Interactive calculator with basic arithmetic operations and modern UI design. Built by RSK World.">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@400;600;700&display=swap"
        rel="stylesheet">
</head>

<body>
    <div class="calculator-container">
        <div class="calculator-header">
            <div class="header-left">
                <i class="fas fa-calculator text-warning"></i>
                <span>JS Calculator</span>
            </div>
            <div class="header-right">
                <button class="btn-icon" id="toggle-sound" title="Toggle Sound">
                    <i class="fas fa-volume-up"></i>
                </button>
                <button class="btn-icon" id="toggle-voice" title="Voice Control">
                    <i class="fas fa-microphone"></i>
                </button>
                <button class="btn-icon" id="toggle-music" title="Toggle Lo-Fi Music">
                    <i class="fas fa-music"></i>
                </button>
                <button class="btn-icon" id="toggle-theme" title="Toggle Theme">
                    <i class="fas fa-moon"></i>
                </button>
                <button class="btn-icon" id="toggle-history" title="Calculation History">
                    <i class="fas fa-history"></i>
                </button>
                <button class="btn-icon" id="toggle-scientific" title="Scientific Mode">
                    <i class="fas fa-flask"></i>
                </button>
            </div>
        </div>

        <div id="history-panel" class="history-panel">
            <div class="history-header">
                <span>History</span>
                <button id="clear-history">Clear</button>
            </div>
            <div id="history-list" class="history-list">
                <!-- History items will be added here -->
            </div>
        </div>

        <div class="programmer-panel hidden" id="programmer-panel">
            <div class="base-row"><span>HEX</span><span id="base-hex">0</span></div>
            <div class="base-row"><span>DEC</span><span id="base-dec">0</span></div>
            <div class="base-row"><span>OCT</span><span id="base-oct">0</span></div>
            <div class="base-row"><span>BIN</span><span id="base-bin">0</span></div>
        </div>

        <div class="calculator-display">
            <div id="memory-indicator" class="memory-indicator hidden">M</div>
            <div id="previous-operand" class="previous-operand"></div>
            <div id="current-operand" class="current-operand">0</div>
        </div>

        <div id="scientific-grid" class="scientific-grid hidden">
            <!-- Row 1 -->
            <button class="btn-sci btn-memory" data-memory="MC">MC</button>
            <button class="btn-sci btn-memory" data-memory="MR">MR</button>
            <button class="btn-sci btn-memory" data-memory="M+">M+</button>
            <button class="btn-sci btn-memory" data-memory="M-">M-</button>
            <!-- Row 2 -->
            <button class="btn-sci" data-sci="sqrt">√</button>
            <button class="btn-sci" data-sci="pow2">x²</button>
            <button class="btn-sci" data-sci="powY">xʸ</button>
            <button class="btn-sci" data-sci="factorial">!</button>
            <!-- Row 3 -->
            <button class="btn-sci" data-sci="pi">π</button>
            <button class="btn-sci" data-sci="e">e</button>
            <button class="btn-sci" data-sci="sin">sin</button>
            <button class="btn-sci" data-sci="cos">cos</button>
            <!-- Row 4 -->
            <button class="btn-sci" data-sci="tan">tan</button>
            <button class="btn-sci" data-sci="log">log</button>
            <button class="btn-sci" data-sci="ln">ln</button>
            <button class="btn-sci" data-sci="reciprocal">1/x</button>
            <!-- Row 5 -->
            <button class="btn-sci" data-sci="abs">|x|</button>
            <button class="btn-sci" data-sci="rand">rand</button>
            <button class="btn-sci" data-sci="negate">±</button>
            <button class="btn-sci" data-sci="percent">%</button>
        </div>

        <div class="calculator-grid">
            <button class="span-two btn-clear" data-all-clear>AC</button>
            <button class="btn-delete" data-delete>DEL</button>
            <button class="btn-operator" data-operation>÷</button>
            <button class="btn-number" data-number>1</button>
            <button class="btn-number" data-number>2</button>
            <button class="btn-number" data-number>3</button>
            <button class="btn-operator" data-operation>×</button>
            <button class="btn-number" data-number>4</button>
            <button class="btn-number" data-number>5</button>
            <button class="btn-number" data-number>6</button>
            <button class="btn-operator" data-operation>+</button>
            <button class="btn-number" data-number>7</button>
            <button class="btn-number" data-number>8</button>
            <button class="btn-number" data-number>9</button>
            <button class="btn-operator" data-operation>-</button>
            <button class="btn-number" data-number>.</button>
            <button class="btn-number" data-number>0</button>
            <button class="span-two btn-equals" data-equals>=</button>
        </div>
        <div class="calculator-footer">
            <p>© 2026 <a href="https://rskworld.in" target="_blank">RSK World</a></p>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>
134 lines•6.3 KB
markup

About RSK World

Founded by Molla Samser, with Designer & Tester Rima Khatun, RSK World is your one-stop destination for free programming resources, source code, and development tools.

Founder: Molla Samser
Designer & Tester: Rima Khatun

Development

  • Game Development
  • Web Development
  • Mobile Development
  • AI Development
  • Development Tools

Legal

  • Terms & Conditions
  • Privacy Policy
  • Disclaimer

Contact Info

Nutanhat, Mongolkote
Purba Burdwan, West Bengal
India, 713147

+91 93305 39277

hello@rskworld.in
support@rskworld.in

© 2026 RSK World. All rights reserved.

Content used for educational purposes only. View Disclaimer