طراحی ماشین حساب در المنتور

طراحی ماشین حساب در المنتور

در دنیای فناوری امروز، طراحی ابزارهای کاربردی و قابل دسترس به یکی از مهم‌ترین موضوعات برنامه‌نویسی تبدیل شده است. ماشین حساب، به عنوان یکی از ابزارهای پایه‌ای برای محاسبات روزمره، همواره مورد توجه توسعه‌دهندگان بوده است. این ماشین حساب که با استفاده از زبان‌های HTML، CSS و JavaScript طراحی شده است  این ماشین حساب دارای یک طراحی تیره است که علاوه بر جذابیت بصری، به کاربرانی که به دنبال تجربه‌ای آرام‌تر و بدون تحریک چشم هستند، کمک می‌کند. استفاده از رنگ‌های تیره، گرادیان‌های انعطاف‌پذیر و انیمیشن‌های پویا به طراحی این ماشین حساب افزوده شده است. هرگاه کاربر روی دکمه‌ها کلیک می‌کند، انیمیشن‌های مربوط به فشرده شدن دکمه‌ها و تغییر رنگ به صورت پویا نمایش داده می‌شوند که تجربه کاربری را بهبود می‌بخشد. استفاده از این ماشین حساب بسیار ساده و کاربردی است کاربران می‌توانند با کلیک کردن روی دکمه‌های عددی، عملیات ریاضی پایه‌ای مانند جمع (+) تفریق (-) ضرب (×) و تقسیم (÷) را انجام دهند. همچنین، امکان محاسبه درصد (%) و تغییر علامت (±) نیز در اختیار کاربران قرار داده شده است. دکمه “C” نیز به کاربران اجازه می‌دهد نمایشگر را تمیز کنند و از ابتدا شروع کنند. علاوه بر این ماشین حساب قابلیت وارد کردن اعشار با دکمه “.” دارد که به کاربران اجازه می‌دهد محاسبات دقیق‌تری انجام دهند. نمایشگر ماشین حساب نیز دارای یک طراحی پویا است که هرگاه کاربر وارد عملیات ریاضی می‌کند، متن نمایشگر به صورت خودکار به رنگ‌های جذاب‌تری تغییر می‌کند و تجربه کاربری را افزایش می‌دهد.

ویژگی‌های ماشین حساب

  1. طراحی تیره (Dark Mode)

  2. پشتیبانی از عملیات ریاضی پایه

  3. پاسخ‌گویی و سازگاری با تمام دستگاه‌ها

  4. انیمیشن‌های جذاب

  5. قابلیت ویرایش و تمیز کردن نمایشگر

  6. کد منبع قابل دسترسی

  7. سئو شده 

نحوه استفاده از ماشین حساب در المنتور

المان کد کوتاه المنتور

برای استفاده از کد های زیر کافیست از قسمت المان های المنتور گزینه ” کد کوتاه ” را سرچ کرده و بعد از راه اندازی المان ( ویجت ) کدهای مربوطه را در قسمت مشخص شده قرار دهید تا کد بصورت خودکار اجرا شود.

کد ماشین حساب 

				
					<!DOCTYPE html>
<html lang="fa">
<head>
    
    <title> حساب تیره</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap');
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #1a1a1a;
            font-family: 'Ubuntu Mono', monospace;
            direction: rtl;
            padding: 20px;
        }

        .calculator {
            background: linear-gradient(145deg, #2c3e50 0%, #253447 100%);
            padding: 20px 40px 30px;
            border-radius: 20px;
            box-shadow: 
                0 0 20px rgba(255,255,255,0.05),
                0 0 40px rgba(255,255,255,0.03);
            width: 400px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .display {
            background: linear-gradient(135deg, #212121 0%, #121212 100%);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        .display-text {
            color: #e0e0e0;
            font-size: 2em;
            text-align: right;
            position: relative;
            z-index: 1;
        }

        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            width: 100%;
        }

        .button {
            background: linear-gradient(145deg, #34495e 0%, #2c3e50 100%);
            border: none;
            border-radius: 10px;
            padding: 20px;
            font-size: 1.1em;
            color: #ecf0f1;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            box-shadow: 
                0 3px 8px rgba(0,0,0,0.3),
                inset 0 0 0 1px rgba(255,255,255,0.1);
            position: relative;
        }

        .button:hover {
            background: linear-gradient(145deg, #2c3e50 0%, #253447 100%);
            transform: translateY(-1px);
            box-shadow: 
                0 5px 12px rgba(0,0,0,0.4),
                inset 0 0 0 1px rgba(255,255,255,0.15);
        }

        .button:active {
            transform: translateY(0);
            box-shadow: 
                0 2px 5px rgba(0,0,0,0.3),
                inset 0 0 0 1px rgba(255,255,255,0.1);
        }

        .button.operator {
            background: linear-gradient(145deg, #c0392b 0%, #9b281d 100%);
        }

        .button.operator:hover {
            background: linear-gradient(145deg, #9b281d 0%, #782017 100%);
        }

        .button.zero {
            grid-column: span 2;
            border-radius: 20px;
            background: linear-gradient(145deg, #27ae60 0%, #1e8449 100%);
        }

        .button.zero:hover {
            background: linear-gradient(145deg, #1e8449 0%, #176f3d 100%);
        }

        .button.equal {
            background: linear-gradient(145deg, #f1c40f 0%, #d4ac0d 100%);
        }

        .button.equal:hover {
            background: linear-gradient(145deg, #d4ac0d 0%, #b7890b 100%);
        }

        .neon-effect {
            text-shadow: 
                0 0 6px rgba(255,255,255,0.3),
                0 0 12px rgba(255,255,255,0.15);
        }

        /* Attribution styling */
        .attribution {
            margin-top: 15px;
            color: #48dbfb;
            font-size: 0.8em;
            width: 100%;
            text-align: center;
            padding: 10px;
        }

        .attribution a {
            color: inherit;
            text-decoration: none;
            transition: color 0.3s;
        }

        .attribution a:hover {
            color: #2e86de;
        }
    </style>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.woocommerce .blockUI.blockOverlay::before{--wpr-bg-6134f500-adf3-45d2-bc04-6be4ad808253: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/loader.svg');}.woocommerce .loader::before{--wpr-bg-d1d99a85-812f-4da1-a040-e180072b3a59: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/loader.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.visa{--wpr-bg-37543d55-8b33-4961-9690-d9e1ce56c9c4: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/visa.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.mastercard{--wpr-bg-ae2c5b60-41e9-4e11-a1cf-fec369a9470f: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/mastercard.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.laser{--wpr-bg-9d30aba8-e3c6-4ba5-ab13-3e8788713c3a: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/laser.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.dinersclub{--wpr-bg-764e886a-f455-4258-8f60-e41b96d6bf86: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/diners.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.maestro{--wpr-bg-c788b0b5-33dd-451f-9b1b-505d0c46507b: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/maestro.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.jcb{--wpr-bg-87fdad85-43e2-4bde-9ebb-f6c702f9c4c5: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/jcb.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.amex{--wpr-bg-994b5cae-5fc2-4fca-8069-838680da336b: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/amex.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.discover{--wpr-bg-46b897d1-3ba3-429f-8020-2af7a440f91e: url('https://elementor.ir/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/discover.svg');}.jet-image-accordion__item-loader span{--wpr-bg-27fbbd21-38ad-4f57-8a32-3af13ce540c5: url('https://elementor.ir/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".woocommerce .blockUI.blockOverlay","style":".woocommerce .blockUI.blockOverlay::before{--wpr-bg-6134f500-adf3-45d2-bc04-6be4ad808253: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg');}","hash":"6134f500-adf3-45d2-bc04-6be4ad808253","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg"},{"selector":".woocommerce .loader","style":".woocommerce .loader::before{--wpr-bg-d1d99a85-812f-4da1-a040-e180072b3a59: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg');}","hash":"d1d99a85-812f-4da1-a040-e180072b3a59","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.visa","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.visa{--wpr-bg-37543d55-8b33-4961-9690-d9e1ce56c9c4: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/visa.svg');}","hash":"37543d55-8b33-4961-9690-d9e1ce56c9c4","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/visa.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.mastercard","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.mastercard{--wpr-bg-ae2c5b60-41e9-4e11-a1cf-fec369a9470f: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/mastercard.svg');}","hash":"ae2c5b60-41e9-4e11-a1cf-fec369a9470f","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/mastercard.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.laser","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.laser{--wpr-bg-9d30aba8-e3c6-4ba5-ab13-3e8788713c3a: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/laser.svg');}","hash":"9d30aba8-e3c6-4ba5-ab13-3e8788713c3a","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/laser.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.dinersclub","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.dinersclub{--wpr-bg-764e886a-f455-4258-8f60-e41b96d6bf86: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/diners.svg');}","hash":"764e886a-f455-4258-8f60-e41b96d6bf86","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/diners.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.maestro","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.maestro{--wpr-bg-c788b0b5-33dd-451f-9b1b-505d0c46507b: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/maestro.svg');}","hash":"c788b0b5-33dd-451f-9b1b-505d0c46507b","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/maestro.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.jcb","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.jcb{--wpr-bg-87fdad85-43e2-4bde-9ebb-f6c702f9c4c5: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/jcb.svg');}","hash":"87fdad85-43e2-4bde-9ebb-f6c702f9c4c5","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/jcb.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.amex","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.amex{--wpr-bg-994b5cae-5fc2-4fca-8069-838680da336b: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/amex.svg');}","hash":"994b5cae-5fc2-4fca-8069-838680da336b","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/amex.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.discover","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.discover{--wpr-bg-46b897d1-3ba3-429f-8020-2af7a440f91e: url('https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/discover.svg');}","hash":"46b897d1-3ba3-429f-8020-2af7a440f91e","url":"https:\/\/elementor.ir\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/discover.svg"},{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-27fbbd21-38ad-4f57-8a32-3af13ce540c5: url('https:\/\/elementor.ir\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"27fbbd21-38ad-4f57-8a32-3af13ce540c5","url":"https:\/\/elementor.ir\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"}]; const rocket_excluded_pairs = [];</script></head>
<body>
    <div class="calculator">
        <div class="display">
            <div class="display-text neon-effect" id="display">0</div>
        </div>
        <div class="buttons">
            <button class="button operator" onclick="clearDisplay()">C</button>
            <button class="button operator" onclick="toggleSign()">±</button>
            <button class="button operator" onclick="calculatePercentage()">%</button>
            <button class="button operator" onclick="appendOperator('÷')">÷</button>
            
            <button class="button" onclick="appendNumber(7)">7</button>
            <button class="button" onclick="appendNumber(8)">8</button>
            <button class="button" onclick="appendNumber(9)">9</button>
            <button class="button operator" onclick="appendOperator('×')">×</button>
            
            <button class="button" onclick="appendNumber(4)">4</button>
            <button class="button" onclick="appendNumber(5)">5</button>
            <button class="button" onclick="appendNumber(6)">6</button>
            <button class="button operator" onclick="appendOperator('-')">-</button>
            
            <button class="button" onclick="appendNumber(1)">1</button>
            <button class="button" onclick="appendNumber(2)">2</button>
            <button class="button" onclick="appendNumber(3)">3</button>
            <button class="button operator" onclick="appendOperator('+')">+</button>
            
            <button class="button zero" onclick="appendNumber(0)">0</button>
            <button class="button" onclick="appendDecimal()">.</button>
            <button class="button equal" onclick="calculateResult()">=</button>
        </div>
        
        <!-- Attribution inside calculator below buttons -->
        <div class="attribution">
            <a href="https://elementor.ir" target="_blank">طراحی شده توسط Elementor.ir</a>
        </div>
    </div>

    <script>
        let currentInput = '';
        let previousInput = '';
        let operator = null;

        function updateDisplay() {
            const display = document.getElementById('display');
            display.textContent = currentInput || '0';
            
            if (currentInput && operator === null) {
                display.classList.add('neon-effect');
            } else {
                display.classList.remove('neon-effect');
            }
        }

        function clearDisplay() {
            currentInput = '';
            previousInput = '';
            operator = null;
            updateDisplay();
        }

        function appendNumber(number) {
            if (currentInput.includes('.') && number === '.') return;
            currentInput += number.toString();
            updateDisplay();
        }

        function appendDecimal() {
            if (!currentInput.includes('.')) {
                currentInput += '.';
                updateDisplay();
            }
        }

        function toggleSign() {
            currentInput = (-parseFloat(currentInput)).toString();
            updateDisplay();
        }

        function calculatePercentage() {
            currentInput = (parseFloat(currentInput) / 100).toString();
            updateDisplay();
        }

        function appendOperator(op) {
            if (currentInput === '') return;
            if (previousInput !== '') calculateResult();
            operator = op;
            previousInput = currentInput;
            currentInput = '';
        }

        function calculateResult() {
            let result;
            const prev = parseFloat(previousInput);
            const current = parseFloat(currentInput);
            
            if (isNaN(prev) || isNaN(current)) return;

            switch (operator) {
                case '+':
                    result = prev + current;
                    break;
                case '-':
                    result = prev - current;
                    break;
                case '×':
                    result = prev * current;
                    break;
                case '÷':
                    result = prev / current;
                    break;
                default:
                    return;
            }

            currentInput = result.toString();
            operator = null;
            previousInput = '';
            updateDisplay();
        }

        updateDisplay();
    </script>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
دمو ماشین حساب

دیدگاهتان را بنویسید