These are used to perform basic math operations like adding, subtracting, multiplying, dividing, and more. Think of them like the symbols you use in regular math — but in a way Python understands!
Operator | Symbol | Example | What It Does |
|---|---|---|---|
Addition |
|
| Adds two numbers |
Subtraction |
|
| Subtracts second number from the first |
Multiplication |
|
| Multiplies two numbers |
Division |
|
| Divides and gives result with decimals (float) |
Floor Division |
|
| Divides and gives the whole number only (ignores decimal part) |
Modulus |
|
| Gives the remainder after division |
Exponentiation |
|
| Raises one number to the power of another (like |
💡 Example:
➕ Addition (+)
a = 10
b = 5
result = a + b
print(result) # Output: 15👉 Adds 10 and 5.
➖ Subtraction (-)
a = 10
b = 5
result = a - b
print(result) # Output: 5👉 Subtracts 5 from 10.
✖️ Multiplication (*)
a = 4
b = 6
result = a * b
print(result) # Output: 24👉 Multiplies 4 and 6.
➗ Division (/)
a = 15
b = 2
result = a / b
print(result) # Output: 7.5👉 Divides 15 by 2 and gives decimal result.
🔢 Floor Division (//)
a = 15
b = 2
result = a // b
print(result) # Output: 7👉 Divides 15 by 2 and gives only the whole number part.
🔁 Modulus (%)
a = 15
b = 4
result = a % b
print(result) # Output: 3👉 15 divided by 4 leaves a remainder of 3.
⏫ Exponentiation (*)
a = 2
b = 3
result = a ** b
print(result) # Output: 8👉 2 raised to the power of 3 (2 × 2 × 2).
<div class="infographic-pyops">
<style>
.infographic-pyops {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
--error: #c0392b;
--error-soft: #fbe9e7;
--mono-font: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
--display-font: 'Fraunces', Georgia, serif;
--body-font: 'Inter', system-ui, sans-serif;
box-sizing: border-box;
max-width: 720px;
margin: 0 auto;
font-family: var(--body-font);
color: var(--ink);
background: var(--paper);
}
.infographic-pyops[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
--error: #e57373;
--error-soft: #3a2222;
}
.infographic-pyops *, .infographic-pyops *::before, .infographic-pyops *::after { box-sizing: border-box; }
.infographic-pyops .op-wrap { padding: 0 clamp(1rem, 4vw, 2rem) 1.5rem; }
.infographic-pyops h1 {
font-family: var(--display-font); font-weight: 600;
font-size: clamp(1.6rem, 5vw, 2.2rem); text-align: center; margin: 1.5rem 0 0.25rem; letter-spacing: -0.01em;
}
.infographic-pyops .op-sub { text-align: center; color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 1.5rem; }
.infographic-pyops .op-inputs { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-bottom: 1.2rem; }
.infographic-pyops .op-input-slot { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.infographic-pyops .op-input {
width: 84px; font-family: var(--mono-font); font-size: 1.15rem; text-align: center;
padding: 0.45rem 0.3rem; border: 1.5px solid var(--line); background: var(--paper-alt); color: var(--ink);
border-radius: 5px;
}
.infographic-pyops .op-input:focus { outline: none; border-color: var(--accent); }
.infographic-pyops .op-input-label { font-size: 0.7rem; color: var(--ink-soft); font-weight: 600; }
.infographic-pyops .op-btn-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; margin-bottom: 1.3rem; }
.infographic-pyops .op-btn {
font: inherit; font-family: var(--mono-font); font-size: 1.05rem; font-weight: 700;
background: var(--paper-alt); border: 1.5px solid var(--line); color: var(--ink-soft);
padding: 0.5rem 0.2rem; cursor: pointer; border-radius: 5px; text-align: center;
}
.infographic-pyops .op-btn.is-selected { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
@media (max-width: 560px) {
.infographic-pyops .op-btn-row { grid-template-columns: repeat(4, 1fr); }
}
.infographic-pyops .op-equation {
text-align: center; font-family: var(--mono-font); font-size: 1.5rem; font-weight: 700;
margin-bottom: 0.35rem; min-height: 2.2rem; transition: color 0.2s;
}
.infographic-pyops .op-equation .eq-result { color: var(--accent); }
.infographic-pyops .op-equation.is-error .eq-result { color: var(--error); font-size: 1rem; }
.infographic-pyops .op-type-chip {
display: block; text-align: center; font-family: var(--mono-font); font-size: 0.7rem; font-weight: 700;
color: var(--accent); margin-bottom: 0.5rem;
}
.infographic-pyops .op-caption { text-align: center; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 1rem; }
/* block visualization for floor-div / modulus */
.infographic-pyops .op-blocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem; max-width: 420px; margin: 0 auto 0.4rem; }
.infographic-pyops .op-block-group { display: flex; gap: 0.15rem; padding: 0.2rem; border: 1px dashed var(--line); border-radius: 4px; }
.infographic-pyops .op-block { width: 12px; height: 12px; border-radius: 2px; background: var(--accent); }
.infographic-pyops .op-block.remainder { background: var(--ink-soft); opacity: 0.5; }
.infographic-pyops .op-blocks-caption { text-align: center; font-size: 0.75rem; color: var(--ink-soft); margin-bottom: 1rem; }
@media (prefers-reduced-motion: reduce) {
.infographic-pyops *, .infographic-pyops *::before, .infographic-pyops *::after {
animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
}
}
</style>
<div class="op-wrap">
<h1>Arithmetic Operators Playground</h1>
<p class="op-sub">Pick two numbers. Tap an operator.</p>
<div class="op-inputs">
<div class="op-input-slot">
<input class="op-input" id="opA" type="text" value="15" inputmode="decimal" />
<span class="op-input-label">a</span>
</div>
<div class="op-input-slot">
<input class="op-input" id="opB" type="text" value="2" inputmode="decimal" />
<span class="op-input-label">b</span>
</div>
</div>
<div class="op-btn-row">
<button class="op-btn" data-op="add">+</button>
<button class="op-btn" data-op="sub">−</button>
<button class="op-btn" data-op="mul">×</button>
<button class="op-btn is-selected" data-op="div">/</button>
<button class="op-btn" data-op="floordiv">//</button>
<button class="op-btn" data-op="mod">%</button>
<button class="op-btn" data-op="pow">**</button>
</div>
<div class="op-equation" id="opEquation">15 / 2 = <span class="eq-result">7.5</span></div>
<span class="op-type-chip" id="opTypeChip">float</span>
<p class="op-caption" id="opCaption">Divides 15 by 2 and gives a decimal result.</p>
<div id="opBlocksWrap" style="display:none;">
<div class="op-blocks" id="opBlocks"></div>
<p class="op-blocks-caption" id="opBlocksCaption"></p>
</div>
</div>
<script>
(function () {
var root = document.currentScript.closest('.infographic-pyops')
|| document.querySelector('.infographic-pyops');
var bodyAttr = document.body.getAttribute('data-darkmode');
var dark;
if (bodyAttr === 'true') { dark = true; }
else if (bodyAttr === 'false') { dark = false; }
else {
var match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
dark = match ? match[1] === 'true' : false;
}
if (dark) root.setAttribute('data-theme', 'dark');
var opA = root.querySelector('#opA');
var opB = root.querySelector('#opB');
var btns = root.querySelectorAll('.op-btn');
var equationEl = root.querySelector('#opEquation');
var typeChip = root.querySelector('#opTypeChip');
var captionEl = root.querySelector('#opCaption');
var blocksWrap = root.querySelector('#opBlocksWrap');
var blocksEl = root.querySelector('#opBlocks');
var blocksCaptionEl = root.querySelector('#opBlocksCaption');
var currentOp = 'div';
var symbols = { add: '+', sub: '−', mul: '×', div: '/', floordiv: '//', mod: '%', pow: '**' };
var captions = {
add: 'Adds the two numbers.',
sub: 'Subtracts b from a.',
mul: 'Multiplies the two numbers.',
div: 'Divides a by b and gives a decimal result.',
floordiv: 'Divides a by b, keeping only the whole number.',
mod: 'The remainder left over after dividing a by b.',
pow: 'Raises a to the power of b.'
};
function isFloatLiteral(raw) { return /\./.test(raw); }
function formatNum(n, isFloat) {
if (isFloat) {
var s = String(n);
if (!/\./.test(s)) s += '.0';
return s;
}
return String(Math.trunc(n));
}
function pyFloorDiv(a, b) { return Math.floor(a / b); }
function pyMod(a, b) { return a - Math.floor(a / b) * b; }
function compute(op, a, b) {
switch (op) {
case 'add': return { ok: true, value: a + b };
case 'sub': return { ok: true, value: a - b };
case 'mul': return { ok: true, value: a * b };
case 'div':
if (b === 0) return { ok: false, msg: 'ZeroDivisionError: division by zero' };
return { ok: true, value: a / b, forceFloat: true };
case 'floordiv':
if (b === 0) return { ok: false, msg: 'ZeroDivisionError: division by zero' };
return { ok: true, value: pyFloorDiv(a, b) };
case 'mod':
if (b === 0) return { ok: false, msg: 'ZeroDivisionError: modulo by zero' };
return { ok: true, value: pyMod(a, b) };
case 'pow':
var v = Math.pow(a, b);
return { ok: true, value: v, forceFloat: b < 0 };
}
}
function renderBlocks(op, a, b) {
if ((op !== 'floordiv' && op !== 'mod') || b <= 0 || a < 0 || !Number.isInteger(a) || !Number.isInteger(b) || a > 40) {
blocksWrap.style.display = 'none';
return;
}
blocksWrap.style.display = 'block';
blocksEl.innerHTML = '';
var groups = Math.floor(a / b);
var remainder = a - groups * b;
for (var g = 0; g < groups; g++) {
var groupEl = document.createElement('div');
groupEl.className = 'op-block-group';
for (var i = 0; i < b; i++) {
var block = document.createElement('div');
block.className = 'op-block';
groupEl.appendChild(block);
}
blocksEl.appendChild(groupEl);
}
if (remainder > 0) {
var remGroup = document.createElement('div');
remGroup.className = 'op-block-group';
for (var r = 0; r < remainder; r++) {
var rBlock = document.createElement('div');
rBlock.className = 'op-block remainder';
remGroup.appendChild(rBlock);
}
blocksEl.appendChild(remGroup);
}
blocksCaptionEl.textContent = groups + ' full group' + (groups === 1 ? '' : 's') + ' of ' + b +
(remainder > 0 ? ', ' + remainder + ' left over' : ', nothing left over');
}
function recompute() {
var rawA = opA.value.trim();
var rawB = opB.value.trim();
var a = parseFloat(rawA);
var b = parseFloat(rawB);
if (isNaN(a) || isNaN(b)) {
equationEl.textContent = 'Enter two numbers';
equationEl.classList.remove('is-error');
typeChip.textContent = '';
captionEl.textContent = '';
blocksWrap.style.display = 'none';
return;
}
var aFloat = isFloatLiteral(rawA);
var bFloat = isFloatLiteral(rawB);
var res = compute(currentOp, a, b);
var sym = symbols[currentOp];
if (!res.ok) {
equationEl.innerHTML = rawA + ' ' + sym + ' ' + rawB + ' = <span class="eq-result">' + res.msg + '</span>';
equationEl.classList.add('is-error');
typeChip.textContent = '';
captionEl.textContent = captions[currentOp];
blocksWrap.style.display = 'none';
return;
}
equationEl.classList.remove('is-error');
var resultIsFloat = res.forceFloat || aFloat || bFloat;
var display = formatNum(res.value, resultIsFloat);
equationEl.innerHTML = rawA + ' ' + sym + ' ' + rawB + ' = <span class="eq-result">' + display + '</span>';
typeChip.textContent = resultIsFloat ? 'float' : 'int';
captionEl.textContent = captions[currentOp];
renderBlocks(currentOp, a, b);
}
btns.forEach(function (btn) {
btn.addEventListener('click', function () {
btns.forEach(function (b) { b.classList.toggle('is-selected', b === btn); });
currentOp = btn.dataset.op;
recompute();
});
});
opA.addEventListener('input', recompute);
opB.addEventListener('input', recompute);
recompute();
})();
</script>
</div>