ژمێرەرێکی جوان و ڕێکوپێک بۆ ماڵپەڕەکەت دابنێ
ژمێرەرێکی نوێ و جوان کە بە زمانی جاڤاسکریپت دروست کراوە، بۆ هەموو ماڵپەڕێک گونجاوەە. ئەم ژمێرەرە بە شێوەیەکی سادە و ڕازاوە دروست کراوە و لە هەموو ئامێرەکاندا (مۆبایل، تەبلێت و کامپیوتێر) بە باشی کار دەکات.
زمانەکانی بەکارهاتوو
HTML بۆ سازکردنی چوارچێوە و بنەماCSS بۆ جوانکاری و ڕازاندنەوە
JS بۆ کردەوەکان
تایبەتمەندییەکان
١. شاشەی ڕەنگی و ڕوونشاشەی ئەم ژمێرەرە بە ڕەنگی سەوزی یەشمی (وەک ژمێرەرە ڕاستەقینەکان) ڕازاوەتەوە، کە خوێندنەوەی ژمارەکان ئاسان دەکات. هەروەها تیشکێکی نەرمی هەیە کە وا دەکات حیسێبەکان ڕوونتر دیار بن.
٢. دوو دۆخ: بنەڕەتی و زانستی
دۆخی بنەڕەتی: بۆ حیسێباتی ڕۆژانە (کۆکردنەوە، لابردن، لێکدان، دابەشکردن، ڕێژە).
دۆخی زانستی: بۆ حیسێباتی پێشکەوتوو، وەک:
ساین (sin)، کۆساین (cos)، تانجێنت (tan)
لۆگاریتم (log) و لۆگاریتمی سروشتی (ln)
ڕەگی دووجا (√)
توان (x^y)
ژمارەی پای (π)
٣. بیرگە
ئەم ژمێرەرە چوار دوگمەی بیرگەی هەیە:
MC: پاککردنەوەی بیرگە
MR: خوێندنەوەی ناوەرۆکی بیرگە
M+: زیادکردن بۆ بیرگە
M-: کەمکردن لە بیرگە
٤. پاڵپشتی لە تەختەکلیل
دەتوانیت بە تەختەکلیل (keyboard)یش حیسێبەکان ئەنجام بدەیت:
ژمارەکان (٠-٩)
کردارەکان (+، -، ×، ÷)
Enter بۆ یەکسانی
Escape یان C بۆ پاککردنەوە
Backspace بۆ سڕینەوەی دوایین پیت
٥. دیزاینی شیشەیی و مۆدێرن
ڕووکاری ژمێرەرەکە بە شێوەی شیشەیی (Glassmorphism) ڕازاوەتەوە، کە وا دەکات سەرنجڕاکێش و جوان بێت.
٦. وەڵامدانەوە بە هەموو قەبارەکان
ژمێرەرەکە بە شێوەیەکی خۆکار خۆی لەگەڵ قەبارەی شاشە دەگونجێنێت، بۆیە لەسەر مۆبایل، تەبلێت و کامپیوتێر بە دروستی کار دەکات.
چۆنیەتی بەکارهێنان
کردارە سادەکان: تەنها ژمارەکان و کردارەکان بنووسە و دوگمەی = دابگرە.کردارە زانستییەکان: دوگمەی «زانستی» دابگرە بۆ کردنەوەی پەنێلی کردارە زانستییەکان.
بیرگە: بۆ هەڵگرتنی ژمارەیەک، دوگمەی M+ دابگرە. بۆ گەڕاندنەوەی، MR دابگرە.
سڕینەوە: دوگمەی C هەموو ناوەڕۆکی شاشە پاک دەکاتەوە.
تێبینییەکان
هەموو کردارەکان بە شێوەیەکی ئارام و بێ کێشە ئەنجام دەدرێن.ئەگەر هەڵەیەک ڕوویدا، شاشە وشەی «هەڵە» پێشان دەدات.
ژمارەکانی وەک π بە خۆکاری جێگۆڕین دەکرێن.
کۆتایی
ئەم ژمێرەرە بە هۆی شاشەی جوان و تایبەتمەندییە جیاوازەکانی، یەکێکە لە باشترین ئامرازەکان بۆ حیسێباتی ڕۆژانە و زانستی. هیوادارین کە سوودی لێ ببینن و بە دڵتان بێت!ئێستا تاقی بکەوە و حیسێباتی خۆت ئاسان بکە!
پرۆگرامەکان
فایلی calculator.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>ژمێرەری پرۆفێشناڵ</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="calculator">
<!-- شاشە -->
<div class="display">
<div class="history" id="history"></div>
<div class="result" id="result">0</div>
</div>
<!-- گۆڕینی دۆخ -->
<div class="modes">
<button class="mode-btn active" id="modeBasic" onclick="setMode('basic')">بنەڕەتی</button>
<button class="mode-btn" id="modeScientific" onclick="setMode('scientific')">زانستی</button>
</div>
<!-- پەنێلی بیرگە -->
<div class="memory-panel active" id="memoryPanel">
<button class="btn-memory" onclick="memoryAction('MC')">MC</button>
<button class="btn-memory" onclick="memoryAction('MR')">MR</button>
<button class="btn-memory" onclick="memoryAction('M+')">M+</button>
<button class="btn-memory" onclick="memoryAction('M-')">M-</button>
</div>
<!-- پەنێلی گشتی -->
<div class="scientific-panel" id="scientificPanel">
<button class="btn-scientific" onclick="appendValue('sin(')">sin</button>
<button class="btn-scientific" onclick="appendValue('cos(')">cos</button>
<button class="btn-scientific" onclick="appendValue('tan(')">tan</button>
<button class="btn-scientific" onclick="appendValue('√(')">√</button>
<button class="btn-scientific" onclick="appendValue('log(')">log</button>
<button class="btn-scientific" onclick="appendValue('ln(')">ln</button>
<button class="btn-scientific" onclick="appendValue('^')">x^y</button>
<button class="btn-scientific" onclick="appendValue('π')">π</button>
</div>
<!-- دوگمە سەرەکییەکان -->
<div class="buttons">
<button class="btn-clear" onclick="clearAll()">C</button>
<button class="btn-function" onclick="appendValue('(')">(</button>
<button class="btn-function" onclick="appendValue(')')">)</button>
<button class="btn-operator" onclick="appendValue('/')">÷</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button class="btn-operator" onclick="appendValue('*')">×</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button class="btn-operator" onclick="appendValue('-')">−</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button class="btn-operator" onclick="appendValue('+')">+</button>
<button class="btn-function" onclick="appendValue('%')">%</button>
<button onclick="appendValue('0')">0</button>
<button onclick="appendValue('.')">.</button>
<button class="btn-equals" onclick="calculate()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
فایلی style.css
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,sans-serif}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#1a1a1a;padding:10px}
.calculator{width:100%;max-width:320px;background:#0d0d0d;border-radius:18px;padding:14px;box-shadow:0 15px 40px rgba(0,0,0,0.8),inset 0 1px 0 rgba(255,255,255,0.05);border:1px solid #222}
.display{background:#000;border-radius:12px;padding:12px;margin-bottom:12px;min-height:90px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #0a1a0a;box-shadow:inset 0 0 20px rgba(0,255,100,0.08),inset 0 0 40px rgba(0,255,100,0.03);position:relative;overflow:hidden}
.display::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient( 0deg,rgba(0,0,0,0.15),rgba(0,0,0,0.15) 1px,transparent 1px,transparent 2px );pointer-events:none;opacity:0.5}
.history{color:#2d8a4e;font-size:12px;min-height:16px;text-align:left;direction:ltr;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 0 5px rgba(45,138,78,0.5);position:relative;z-index:1}
.result{color:#00ff88;font-size:30px;font-weight:500;text-align:left;direction:ltr;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.2;transition:font-size 0.15s ease;text-shadow:0 0 5px rgba(0,255,136,0.6),0 0 10px rgba(0,255,136,0.3),0 0 20px rgba(0,255,136,0.15);position:relative;z-index:1;letter-spacing:1px;font-family:'Courier New',monospace}
.result.error{color:#ff5252;font-size:20px;text-shadow:0 0 5px rgba(255,82,82,0.6),0 0 10px rgba(255,82,82,0.3)}
.result.small{font-size:20px}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.mode-btn{padding:6px 0;font-size:12px;border-radius:8px;background:#1a1a1a;color:#666;border:1px solid #222;cursor:pointer;transition:background 0.1s;user-select:none}
.mode-btn.active{background:#2a2a2a;color:#ff9f0a;border-color:#ff9f0a}
.mode-btn:hover{background:#222}
.buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
button{border:none;outline:none;padding:14px 0;font-size:16px;font-weight:500;border-radius:50px;cursor:pointer;color:#f0f0f0;background:#2c2c2e;transition:background 0.08s,transform 0.08s;user-select:none;-webkit-tap-highlight-color:transparent}
button:hover{background:#3a3a3c}
button:active{background:#48484a;transform:scale(0.95)}
.btn-operator{background:#ff9f0a;color:#000;font-weight:700}
.btn-operator:hover{background:#ffb340}
.btn-operator:active{background:#ffc770}
.btn-equals{background:#ff9f0a;color:#000;font-weight:700}
.btn-equals:hover{background:#ffb340}
.btn-equals:active{background:#ffc770}
.btn-clear{background:#d63031;color:#fff;font-weight:600}
.btn-clear:hover{background:#e74c3c}
.btn-clear:active{background:#ff5b5b}
.btn-memory{background:#1e3a5f;color:#74b9ff;font-size:14px;font-weight:600}
.btn-memory:hover{background:#2a4a75}
.btn-memory:active{background:#3a5a85}
.btn-scientific{background:#3d2b56;color:#b794f6;font-size:13px;font-weight:600}
.btn-scientific:hover{background:#4d3b66}
.btn-scientific:active{background:#5d4b76}
.btn-function{background:#2c2c2e;color:#a8d8ff;font-size:15px}
.scientific-panel{display:none;margin-bottom:10px}
.scientific-panel.active{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.memory-panel{display:none;margin-bottom:10px}
.memory-panel.active{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
@media (max-width:380px){.calculator{max-width:290px;padding:12px}button{padding:12px 0;font-size:15px}.result{font-size:26px}}
button.key-pressed{background:#48484a !important;transform:scale(0.95)}
فایلی script.js
const resultEl = document.getElementById('result');
const historyEl = document.getElementById('history');
let currentInput = '';
let memory = 0;
let justEvaluated = false;
let currentMode = 'basic';
/* ============================================ پێشاندان ============================================ */
function updateDisplay() {
let display = currentInput || '0';
display = display
.replace(/\*/g, ' × ')
.replace(/\//g, ' ÷ ')
.replace(/\+/g, ' + ')
.replace(/-/g, ' − ')
.replace(/\^/g, ' ^ ');
resultEl.textContent = display;
if (display.length > 14) {
resultEl.classList.add('small');
} else {
resultEl.classList.remove('small');
}
}
/* ============================================ زیادکردنی ڕێژە ============================================ */
function appendValue(value) {
if (justEvaluated && /[0-9.(]/.test(value)) {
currentInput = '';
historyEl.textContent = '';
}
justEvaluated = false;
if (value === '.') {
const lastNumber = currentInput.split(/[\+\-\*\/\(\)]/).pop();
if (lastNumber.includes('.')) return;
if (lastNumber === '') value = '0.';
}
if (/[\+\-\*\/\^]/.test(value)) {
const lastChar = currentInput.slice(-1);
if (/[\+\-\*\/\^]/.test(lastChar)) {
if (value === '-' && /[\*\/\^\(]/.test(lastChar)) {
} else {
currentInput = currentInput.slice(0, -1);
}
}
}
if (currentInput === '' && /[\*\/\)\^\%]/.test(value)) return;
if (value === '.' && currentInput.slice(-1) === '.') return;
if (value === 'π') {
currentInput += '3.141592653589793';
} else {
currentInput += value;
}
updateDisplay();
}
/* ============================================ سڕینەوە ============================================ */
function clearAll() {
currentInput = '';
justEvaluated = false;
historyEl.textContent = '';
resultEl.classList.remove('error');
updateDisplay();
}
/* ============================================ حیسێبکردن ============================================ */
function calculate() {
if (!currentInput) return;
try {
// وەرگێڕانی کردەوەکان
let expression = currentInput
.replace(/%/g, '/100')
.replace(/π/g, '3.141592653589793')
.replace(/√\(/g, 'Math.sqrt(')
.replace(/sin\(/g, 'Math.sin(')
.replace(/cos\(/g, 'Math.cos(')
.replace(/tan\(/g, 'Math.tan(')
.replace(/log\(/g, 'Math.log10(')
.replace(/ln\(/g, 'Math.log(')
.replace(/\^/g, '**');
// ڕاستیتاقیکردن
if (!/^[0-9+\-*/().\s*MathsqrincotalgπeE,]+$/.test(expression)) {
throw new Error('دەستەواژەی نادروست');
}
const result = Function('"use strict"; return (' + expression + ')')();
if (!isFinite(result)) throw new Error('ئاکامی نادروست');
const rounded = Math.round(result * 1e10) / 1e10;
historyEl.textContent = currentInput + ' =';
currentInput = rounded.toString();
justEvaluated = true;
resultEl.classList.remove('error');
resultEl.textContent = currentInput;
if (currentInput.length > 14) {
resultEl.classList.add('small');
} else {
resultEl.classList.remove('small');
}
} catch (error) {
resultEl.textContent = 'هەڵە';
resultEl.classList.add('error');
historyEl.textContent = currentInput;
currentInput = '';
justEvaluated = true;
}
}
/* ============================================ بیرگە ============================================ */
function memoryAction(action) {
const currentValue = parseFloat(currentInput) || 0;
switch (action) {
case 'MC':
memory = 0;
showToast('بیرگە سڕاوە');
break;
case 'MR':
if (memory !== 0) {
currentInput += memory.toString();
updateDisplay();
}
showToast('بیرگە: ' + memory);
break;
case 'M+':
memory += currentValue;
showToast('بیرگە: ' + memory);
break;
case 'M-':
memory -= currentValue;
showToast('بیرگە: ' + memory);
break;
}
}
/* ============================================ پێشاندانی کورتەپەیام ============================================ */
function showToast(message) {
const existing = document.querySelector('.toast');
if (existing) existing.remove();
const toast = document.createElement('div');
toast.className = 'toast';
toast.textContent = message;
toast.style.cssText = `
position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
background: #333; color: #fff; padding: 8px 16px; border-radius: 8px;
font-size: 13px; z-index: 9999; opacity: 0; transition: opacity 0.2s;
`;
document.body.appendChild(toast);
requestAnimationFrame(() => toast.style.opacity = '1');
setTimeout(() => {
toast.style.opacity = '0';
setTimeout(() => toast.remove(), 200);
}, 1200);
}
/* ============================================ گۆڕینی دۆخ ============================================ */
function setMode(mode) {
currentMode = mode;
document.getElementById('modeBasic').classList.toggle('active', mode === 'basic');
document.getElementById('modeScientific').classList.toggle('active', mode === 'scientific');
document.getElementById('scientificPanel').classList.toggle('active', mode === 'scientific');
document.getElementById('memoryPanel').classList.toggle('active', mode === 'scientific' || true);
}
/* ============================================ تەختەکلیل ============================================ */
document.addEventListener('keydown', (e) => {
const key = e.key;
if (/^[0-9]$/.test(key)) {
appendValue(key);
} else if (['+', '-', '*', '/', '.', '(', ')', '%', '^'].includes(key)) {
e.preventDefault();
appendValue(key);
} else if (key === 'Enter' || key === '=') {
e.preventDefault();
calculate();
} else if (key === 'Escape' || key.toLowerCase() === 'c') {
clearAll();
} else if (key === 'Backspace') {
e.preventDefault();
currentInput = currentInput.slice(0, -1);
updateDisplay();
}
});
/* ============================================ نوێکردنەوەی شاشە ============================================ */
updateDisplay();
بارکردنی سەرنجەکان...