Comparison operators are used to compare two values.
They always return either True or False, which are called Boolean values.
Think of them like questions you ask your program:
“Is this equal?”, “Is this bigger?”, “Is this not the same?”
Operator | Symbol | What It Means | Example |
|---|---|---|---|
Equal to |
| Checks if two values are equal |
|
Not equal to |
| Checks if two values are not equal |
|
Greater than |
| Checks if left side is bigger |
|
Less than |
| Checks if left side is smaller |
|
Greater or equal to |
| Left side is bigger or equal |
|
Less or equal to |
| Left side is smaller or equal |
|
== Equal To
x = 5
x == 5 # Output: True!= Not Equal To
x = 5
x != 3 # Output: True> Greater Than
x = 8
x > 5 # Output: True< Less Than
x = 3
x < 5 # Output: True>= Greater Than or Equal To
x = 5
x >= 5 # Output: True<= Less Than or Equal To
x = 4
x <= 5 # Output: True<div class="infographic-pycompare">
<style>
.infographic-pycompare {
--ink: #1a1a1a;
--ink-soft: #5c5c5c;
--paper: #ffffff;
--paper-alt: #f0ece4;
--accent: #2563eb;
--accent-soft:#e3ebfd;
--line: #ddd6c9;
--true-c: #1f9d55;
--true-soft: #e3f6ea;
--false-c: #c0392b;
--false-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: 640px;
margin: 0 auto;
font-family: var(--body-font);
color: var(--ink);
background: var(--paper);
}
.infographic-pycompare[data-theme="dark"] {
--ink: #e8e6e1;
--ink-soft: #9a968c;
--paper: #121212;
--paper-alt: #1e1e26;
--accent: #5b8def;
--accent-soft:#202942;
--line: #2c313d;
--true-c: #6fdc8c;
--true-soft: #1c3324;
--false-c: #e57373;
--false-soft: #3a2222;
}
.infographic-pycompare *, .infographic-pycompare *::before, .infographic-pycompare *::after { box-sizing: border-box; }
.infographic-pycompare .cp-wrap { padding: 0 clamp(1rem, 4vw, 2rem) 1.5rem; }
.infographic-pycompare 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-pycompare .cp-sub { text-align: center; color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 1.4rem; }
/* balance scale illustration */
.infographic-pycompare .cp-scale-box { display: flex; justify-content: center; margin-bottom: 1rem; }
.infographic-pycompare .cp-scale-box svg { width: 260px; height: 150px; }
.infographic-pycompare .beam { transition: transform 0.35s cubic-bezier(.34,1.4,.64,1); transform-origin: 130px 46px; }
.infographic-pycompare .pan-left, .infographic-pycompare .pan-right { transition: transform 0.35s cubic-bezier(.34,1.4,.64,1); }
.infographic-pycompare .scale-line { stroke: var(--ink-soft); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.infographic-pycompare .scale-pan { stroke: var(--accent); stroke-width: 2.5; fill: var(--accent-soft); }
.infographic-pycompare .scale-base { fill: var(--ink-soft); }
.infographic-pycompare .scale-label { font-family: var(--mono-font); font-size: 15px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.infographic-pycompare .cp-inputs { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-bottom: 1.1rem; }
.infographic-pycompare .cp-input-slot { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.infographic-pycompare .cp-input {
width: 84px; font-family: var(--mono-font); font-size: 1.1rem; text-align: center;
padding: 0.42rem 0.3rem; border: 1.5px solid var(--line); background: var(--paper-alt); color: var(--ink);
border-radius: 5px;
}
.infographic-pycompare .cp-input:focus { outline: none; border-color: var(--accent); }
.infographic-pycompare .cp-input-label { font-size: 0.72rem; color: var(--ink-soft); font-weight: 600; font-family: var(--mono-font); }
.infographic-pycompare .cp-btn-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; margin-bottom: 1.2rem; }
@media (max-width: 480px) { .infographic-pycompare .cp-btn-row { grid-template-columns: repeat(3, 1fr); } }
.infographic-pycompare .cp-btn {
font: inherit; font-family: var(--mono-font); font-size: 1rem; 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-pycompare .cp-btn.is-selected { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.infographic-pycompare .cp-equation {
text-align: center; font-family: var(--mono-font); font-size: 1.15rem; font-weight: 700; margin-bottom: 0.9rem;
}
.infographic-pycompare .cp-result-row { display: flex; justify-content: center; margin-bottom: 0.3rem; }
.infographic-pycompare .cp-result-badge {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: var(--display-font); font-size: 1.6rem; font-weight: 600;
padding: 0.5rem 1.3rem; border-radius: 999px; border: 2px solid transparent;
transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
}
.infographic-pycompare .cp-result-badge.is-true { background: var(--true-soft); color: var(--true-c); border-color: var(--true-c); }
.infographic-pycompare .cp-result-badge.is-false { background: var(--false-soft); color: var(--false-c); border-color: var(--false-c); }
.infographic-pycompare .cp-result-badge .badge-icon { width: 24px; height: 24px; }
.infographic-pycompare .cp-result-badge.is-pulsing { animation: cp-pop 0.3s ease; }
@keyframes cp-pop { 0% { transform: scale(1); } 45% { transform: scale(1.1); } 100% { transform: scale(1); } }
.infographic-pycompare .cp-caption { text-align: center; font-size: 0.82rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
.infographic-pycompare *, .infographic-pycompare *::before, .infographic-pycompare *::after {
animation-duration: 0.001ms !important; transition-duration: 0.001ms !important;
}
}
</style>
<div class="cp-wrap">
<h1>Comparison Operators</h1>
<p class="cp-sub">Edit x and y. The scale — and the answer — update live.</p>
<div class="cp-scale-box">
<svg viewBox="0 0 260 150" xmlns="http://www.w3.org/2000/svg">
<rect class="scale-base" x="122" y="122" width="16" height="18" rx="2"/>
<polygon class="scale-base" points="105,140 155,140 148,150 112,150"/>
<line class="scale-line" x1="130" y1="46" x2="130" y2="124"/>
<g class="beam" id="cpBeam">
<line class="scale-line" x1="30" y1="46" x2="230" y2="46"/>
<circle cx="130" cy="46" r="5" fill="var(--ink-soft)"/>
<g class="pan-left" id="cpPanLeft">
<line class="scale-line" x1="30" y1="46" x2="30" y2="78"/>
<path class="scale-pan" d="M8,78 Q30,98 52,78 Z"/>
<text class="scale-label" x="30" y="72" id="cpLabelX">5</text>
</g>
<g class="pan-right" id="cpPanRight">
<line class="scale-line" x1="230" y1="46" x2="230" y2="78"/>
<path class="scale-pan" d="M208,78 Q230,98 252,78 Z"/>
<text class="scale-label" x="230" y="72" id="cpLabelY">5</text>
</g>
</g>
</svg>
</div>
<div class="cp-inputs">
<div class="cp-input-slot">
<input class="cp-input" id="cpX" type="text" value="5" inputmode="decimal" />
<span class="cp-input-label">x</span>
</div>
<div class="cp-input-slot">
<input class="cp-input" id="cpY" type="text" value="5" inputmode="decimal" />
<span class="cp-input-label">y</span>
</div>
</div>
<div class="cp-btn-row">
<button class="cp-btn is-selected" data-op="eq">==</button>
<button class="cp-btn" data-op="neq">!=</button>
<button class="cp-btn" data-op="gt">></button>
<button class="cp-btn" data-op="lt"><</button>
<button class="cp-btn" data-op="gte">>=</button>
<button class="cp-btn" data-op="lte"><=</button>
</div>
<div class="cp-equation" id="cpEquation">x == y</div>
<div class="cp-result-row">
<div class="cp-result-badge is-true" id="cpBadge">
<svg class="badge-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" id="cpIcon"><polyline points="4,13 9,18 20,6"/></svg>
<span id="cpResultText">True</span>
</div>
</div>
<p class="cp-caption" id="cpCaption">5 is equal to 5.</p>
</div>
<script>
(function () {
var root = document.currentScript.closest('.infographic-pycompare')
|| document.querySelector('.infographic-pycompare');
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 xInput = root.querySelector('#cpX');
var yInput = root.querySelector('#cpY');
var btns = root.querySelectorAll('.cp-btn');
var equationEl = root.querySelector('#cpEquation');
var badge = root.querySelector('#cpBadge');
var resultText = root.querySelector('#cpResultText');
var icon = root.querySelector('#cpIcon');
var caption = root.querySelector('#cpCaption');
var beam = root.querySelector('#cpBeam');
var labelX = root.querySelector('#cpLabelX');
var labelY = root.querySelector('#cpLabelY');
var currentOp = 'eq';
var syms = { eq: '==', neq: '!=', gt: '>', lt: '<', gte: '>=', lte: '<=' };
var checkIcon = '<polyline points="4,13 9,18 20,6"/>';
var crossIcon = '<line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/>';
function compareOp(op, x, y) {
switch (op) {
case 'eq': return x === y;
case 'neq': return x !== y;
case 'gt': return x > y;
case 'lt': return x < y;
case 'gte': return x >= y;
case 'lte': return x <= y;
}
}
function recompute() {
var rawX = xInput.value.trim();
var rawY = yInput.value.trim();
var x = parseFloat(rawX);
var y = parseFloat(rawY);
labelX.textContent = rawX;
labelY.textContent = rawY;
if (isNaN(x) || isNaN(y)) {
equationEl.textContent = 'x ' + syms[currentOp] + ' y';
resultText.textContent = '—';
caption.textContent = 'Enter two numbers.';
beam.style.transform = 'rotate(0deg)';
return;
}
var diff = x - y;
var angle = Math.max(-14, Math.min(14, diff * 3));
beam.style.transform = 'rotate(' + angle + 'deg)';
equationEl.textContent = rawX + ' ' + syms[currentOp] + ' ' + rawY;
var result = compareOp(currentOp, x, y);
badge.classList.remove('is-true', 'is-false');
badge.classList.add(result ? 'is-true' : 'is-false');
resultText.textContent = result ? 'True' : 'False';
icon.innerHTML = result ? checkIcon : crossIcon;
badge.classList.remove('is-pulsing');
void badge.offsetWidth;
badge.classList.add('is-pulsing');
var captions = {
eq: { t: rawX + ' is equal to ' + rawY + '.', f: rawX + ' is not equal to ' + rawY + '.' },
neq: { t: rawX + ' is not equal to ' + rawY + '.', f: rawX + ' is equal to ' + rawY + '.' },
gt: { t: rawX + ' is greater than ' + rawY + '.', f: rawX + ' is not greater than ' + rawY + '.' },
lt: { t: rawX + ' is less than ' + rawY + '.', f: rawX + ' is not less than ' + rawY + '.' },
gte: { t: rawX + ' is at least ' + rawY + '.', f: rawX + ' is less than ' + rawY + '.' },
lte: { t: rawX + ' is at most ' + rawY + '.', f: rawX + ' is greater than ' + rawY + '.' }
};
caption.textContent = result ? captions[currentOp].t : captions[currentOp].f;
}
btns.forEach(function (btn) {
btn.addEventListener('click', function () {
btns.forEach(function (b) { b.classList.toggle('is-selected', b === btn); });
currentOp = btn.dataset.op;
recompute();
});
});
xInput.addEventListener('input', recompute);
yInput.addEventListener('input', recompute);
recompute();
})();
</script>
</div>