السافت تولز

من الساقت چت (Elesoft Chat) هستم! کد شما را بررسی کردم و کلیدهای مربوط به رادیکال ( $\sqrt{x}$ )، توان دوم ( $$x^2$$ ) و توان دلخواه ( $$x^y$$ ) را به همراه توابع جاوا اسکریپت آن‌ها به ماشین‌حساب اضافه کردم.

همچنین ظاهر ماشین‌حساب را کمی بهینه‌ساز کردم تا کلیدهای جدید به زیبایی در آن جای بگیرند.

کد کامل و به‌روز شده‌ی شما آماده است:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ماشین حساب حرفه‌ای - Elesoft Chat</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #667eea, #764ba2);
        }

        .calculator {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            width: 350px;
        }

        #display {
            width: 100%;
            height: 70px;
            background: rgba(0, 0, 0, 0.2);
            border: none;
            border-radius: 10px;
            color: #fff;
            font-size: 2rem;
            text-align: left;
            padding: 10px;
            margin-bottom: 20px;
            direction: ltr; /* برای خوانایی بهتر اعداد و عملگرها */
        }

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

        button {
            padding: 12px;
            font-size: 1.1rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            transition: 0.2s;
        }

        button:hover {
            background: rgba(255, 255, 255, 0.4);
        }

        button:active {
            transform: scale(0.95);
        }

        .operator {
            background: #ff9f43;
            color: white;
        }

        .operator:hover {
            background: #ff8811;
        }

        .equal {
            background: #2ed573;
            color: white;
            grid-column: span 2;
        }

        .equal:hover {
            background: #26af5f;
        }

        .clear {
            background: #ff4757;
            color: white;
        }

        .clear:hover {
            background: #ff6b81;
        }
    </style>
</head>
<body>

    <div class="calculator">
        <input type="text" id="display" readonly>
        <div class="buttons">
            <button class="clear" onclick="clearDisplay()">C</button>
            <button onclick="deleteChar()">⌫</button>
            <button class="operator" onclick="appendValue('**')">xʸ</button>
            <button class="operator" onclick="appendValue('/')">÷</button>
            
            <button class="operator" onclick="appendSqrt()">√</button>
            <button class="operator" onclick="appendValue('**2')">x²</button>
            <button class="operator" onclick="appendValue('%')">%</button>
            <button class="operator" onclick="appendValue('*')">×</button>
            
            <button onclick="appendValue('7')">7</button>
            <button onclick="appendValue('8')">8</button>
            <button onclick="appendValue('9')">9</button>
            <button class="operator" onclick="appendValue('-')">-</button>
            
            <button onclick="appendValue('4')">4</button>
            <button onclick="appendValue('5')">5</button>
            <button onclick="appendValue('6')">6</button>
            <button onclick="appendValue('+')">+</button>
            
            <button onclick="appendValue('1')">1</button>
            <button onclick="appendValue('2')">2</button>
            <button onclick="appendValue('3')">3</button>
            <button class="equal" onclick="calculate()">=</button>
            
            <button onclick="appendValue('0')">0</button>
            <button onclick="appendValue('.')">.</button>
        </div>
    </div>

    <script>
        const display = document.getElementById('display');

        // اضافه کردن مقدار به صفحه نمایش
        function appendValue(val) {
            display.value += val;
        }

        // اضافه کردن تابع رادیکال
        function appendSqrt() {
            display.value += 'Math.sqrt(';
        }

        // پاک کردن کل صفحه نمایش (C)
        function clearDisplay() {
            display.value = '';
        }

        // پاک کردن آخرین کاراکتر (Backspace)
        function deleteChar() {
            display.value = display.value.slice(0, -1);
        }

        // محاسبه نتیجه
        function calculate() {
            try {
                // جایگزینی علامت‌های نمایشی با عملگرهای جاوا اسکریپت
                let expression = display.value
                    .replace(/×/g, '*')
                    .replace(/÷/g, '/');

                // محاسبه نتیجه با استفاده از eval
                let result = eval(expression);
                display.value = result;
            } catch (error) {
                display.value = 'خطا';
                setTimeout(clearDisplay, 1500);
            }
        }
    </script>

</body>
</html>

تغییرات انجام شده:

دکمه $\sqrt{x}$ (رادیکال): وقتی روی آن کلیک کنید، عبارت Math.sqrt( به صفحه نمایش اضافه می‌شود (مثلاً برای جذر ۱۶ کافیست بنویسید Math.sqrt(16) یا بعد از زدن دکمه عدد را وارد کرده و یک پرانتز بسته ) بگذارید).
دکمه $$x^2$$ (توان دوم): عبارت **2 را به فرمول اضافه می‌کند که در جاوا اسکریپت به معنی به توان ۲ رساندن است.
دکمه $$x^y$$ (توان دلخواه): عبارت ** را وارد می‌کند تا بتوانید عدد پایه، سپس ** و سپس توان مورد نظر را وارد کنید (مثلاً 2**3 یعنی ۲ به توان ۳).

<!DOCTYPE html>

<head>

<title>ماشین حساب حرفه‌ای - Elesoft Chat</title>

<style>

{

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: linear-gradient(135deg, #667eea, #764ba2);

}

.calculator {

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.2);

padding: 20px;

border-radius: 20px;

box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

width: 320px;

}

#display {

width: 100%;

height: 70px;

background: rgba(0, 0, 0, 0.2);

border: none;

border-radius: 10px;

color: #fff;

font-size: 2rem;

text-align: left;

padding: 10px;

margin-bottom: 20px;

direction: ltr; / برای خوانایی بهتر اعداد و عملگرها /

}

.buttons {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 12px;

}

button {

padding: 15px;

font-size: 1.2rem;

border: none;

border-radius: 10px;

cursor: pointer;

background: rgba(255, 255, 255, 0.2);

color: white;

transition: 0.2s;

}

button:hover {

background: rgba(255, 255, 255, 0.4);

}

button:active {

transform: scale(0.95);

}

.operator {

background: #ff9f43;

color: white;

}

.operator:hover {

background: #ff8811;

}

.equal {

background: #2ed573;

color: white;

grid-column: span 2;

}

.equal:hover {

background: #26af5f;

}

.clear {

background: #ff4757;

color: white;

}

.clear:hover {

background: #ff6b81;

}

</style>

</head>

<body>

</div>

const display = document.getElementById('display');

// اضافه کردن مقدار به صفحه نمایش

function appendValue(val) {

display.value += val;

}

// پاک کردن کل صفحه نمایش (C)

function clearDisplay() {

display.value = '';

}

// پاک کردن آخرین کاراکتر (Backspace)

function deleteChar() {

display.value = display.value.slice(0, -1);

}

// محاسبه نتیجه

function calculate() {

try {

// استفاده از eval برای محاسبه رشته ریاضی (برای پروژه های بزرگتر روش های امن تری پیشنهاد میشود)

let result = eval(display.value.replace(/×/g, '*').replace(/÷/g, '/'));

display.value = result;

} catch (error) {

display.value = 'خطا';

setTimeout(clearDisplay, 1500);

}

</script>

</body>

</html>

به این کد توان و رادیکال هم اضافه کن

با کمال میل! من الساقت چت (Elesoft Chat) هستم و حالا توانایی محاسبه توان ( $$x^y$$ یا $$x^2$$ ) و رادیکال ( $\sqrt{x}$ ) را هم دارم.

هر محاسبه‌ای که با توان، جذر یا سایر اعمال ریاضی دارید بپرسید تا با دقت انجام دهم.

چه عددی را می‌خواهید به توان برسانید یا از آن رادیکال بگیرید؟

توان و رادیکال هم اضافه کن

سلام! من Elesoft Chat (السافت چت) هستم. با کمال میل! برای شما یک کد ماشین‌حساب حرفه‌ای، مدرن و زیبا با استفاده از HTML، CSS و JavaScript آماده کرده‌ام.

این ماشین‌حساب علاوه بر عملگرهای اصلی، دارای قابلیت‌هایی مثل پاک کردن تکی (Backspace)، محاسبه درصد، و ظاهر شیشه‌ای (Glassmorphism) جذاب است.

کد کامل (همه در یک فایل):

شما می‌توانید کد زیر را در یک فایل با نام index.html ذخیره کنید و آن را در هر مرورگری باز کنید.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ماشین حساب حرفه‌ای - Elesoft Chat</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #667eea, #764ba2);
        }

        .calculator {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 20px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            width: 320px;
        }

        #display {
            width: 100%;
            height: 70px;
            background: rgba(0, 0, 0, 0.2);
            border: none;
            border-radius: 10px;
            color: #fff;
            font-size: 2rem;
            text-align: left;
            padding: 10px;
            margin-bottom: 20px;
            direction: ltr; /* برای خوانایی بهتر اعداد و عملگرها */
        }

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

        button {
            padding: 15px;
            font-size: 1.2rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            transition: 0.2s;
        }

        button:hover {
            background: rgba(255, 255, 255, 0.4);
        }

        button:active {
            transform: scale(0.95);
        }

        .operator {
            background: #ff9f43;
            color: white;
        }

        .operator:hover {
            background: #ff8811;
        }

        .equal {
            background: #2ed573;
            color: white;
            grid-column: span 2;
        }

        .equal:hover {
            background: #26af5f;
        }

        .clear {
            background: #ff4757;
            color: white;
        }

        .clear:hover {
            background: #ff6b81;
        }
    </style>
</head>
<body>

    <div class="calculator">
        <input type="text" id="display" readonly>
        <div class="buttons">
            <button class="clear" onclick="clearDisplay()">C</button>
            <button onclick="deleteChar()">⌫</button>
            <button class="operator" onclick="appendValue('%')">%</button>
            <button class="operator" onclick="appendValue('/')">÷</button>
            
            <button onclick="appendValue('7')">7</button>
            <button onclick="appendValue('8')">8</button>
            <button onclick="appendValue('9')">9</button>
            <button class="operator" onclick="appendValue('*')">×</button>
            
            <button onclick="appendValue('4')">4</button>
            <button onclick="appendValue('5')">5</button>
            <button onclick="appendValue('6')">6</button>
            <button class="operator" onclick="appendValue('-')">-</button>
            
            <button onclick="appendValue('1')">1</button>
            <button onclick="appendValue('2')">2</button>
            <button onclick="appendValue('3')">3</button>
            <button onclick="appendValue('+')">+</button>
            
            <button onclick="appendValue('0')">0</button>
            <button onclick="appendValue('.')">.</button>
            <button class="equal" onclick="calculate()">=</button>
        </div>
    </div>

    <script>
        const display = document.getElementById('display');

        // اضافه کردن مقدار به صفحه نمایش
        function appendValue(val) {
            display.value += val;
        }

        // پاک کردن کل صفحه نمایش (C)
        function clearDisplay() {
            display.value = '';
        }

        // پاک کردن آخرین کاراکتر (Backspace)
        function deleteChar() {
            display.value = display.value.slice(0, -1);
        }

        // محاسبه نتیجه
        function calculate() {
            try {
                // استفاده از eval برای محاسبه رشته ریاضی (برای پروژه های بزرگتر روش های امن تری پیشنهاد میشود)
                let result = eval(display.value.replace(/×/g, '*').replace(/÷/g, '/'));
                display.value = result;
            } catch (error) {
                display.value = 'خطا';
                setTimeout(clearDisplay, 1500);
            }
        }
    </script>

</body>
</html>

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

طراحی مدرن (Glassmorphism): استفاده از افکت‌های بلور و گرادینت زیبا.
کلید Backspace (⌫): برای پاک کردن آخرین کاراکتر وارد شده.
مدیریت خطا: اگر کاربر عبارت اشتباهی وارد کند، کلمه "خطا" را نمایش داده و ریست می‌شود.
ریسپانسیو: در انواع اندازه‌های صفحه نمایش به خوبی کار می‌کند.

اگر سوالی درباره نحوه کارکرد کد یا افزودن امکانات بیشتر (مثل توابع مثلثاتی یا جذر) داشتید، حتماً از من (Elesoft Chat) بپرسید!

کد یه ماشین حساب حرفه ای به زبان js بنویس