<section class="conditionals">
<h2>Conditional Operators</h2>
<div class="higher">higher</div>
<div class="equal">equal</div>
<div class="lower">lower</div>
</section>
<section class="logicals">
<h2>Logical Gates</h2>
<div class="and">and</div>
<div class="or">or</div>
<div class="xor">xor</div>
<div class="nand">nand</div>
<div class="nor">nor</div>
<div class="xnor">xnor</div>
</section>
:root{
/*
any integer for conditionals,
0 or 1 for logic gates
*/
--x: 1;
--y: 1;
}
/**************************
CONDITIONALS
**************************/
.higher{
/* is x > y ??
(x-y)
If x > y will result in 1 or higher, therefore true.
If they are equal, will result in 0, therefore false.
if x < y will result in -1 or lower, therefore false
*/
--cond: calc(var(--x) - var(--y));
}
.equal{
/* is x = y ??
If they are equal, will result in 0 as they'll cancel each other.
If not, will result in a negative number, as one of the subtractions will be negative, which will cause the multiplication to go negative.
Adding 1 will result in 1 for true, 0 or bellow for false.
*/
--cond: calc(((var(--x) - var(--y)) * (var(--y) - var(--x))) + 1);
}
.lower{
/* is x < y ??
((x-y) * -1)
If X < Y will result in 1 or higher, therefore true.
If they are equal, will result in 0, therefore false.
if X > Y will result in -1 or lower, therefore false
*/
--cond: calc((var(--x) - var(--y)) * -1);
}
/**************************
LOGICAL GATES
**************************/
.and{
/* are both X and Y true?
x * y
*/
--cond: calc(var(--x) * var(--y));
}
.or{
/* either X, Y or both are possitive */
--cond: calc((var(--x) + var(--y)) - (var(--x) * var(--y)));
}
.xor{
/* either X or Y is true, but not both. */
--cond: calc((((var(--x) + var(--y)) * -1) + 2) * (var(--x) + var(--y)));
}
.nand{
/* False only if both X and Y are true, otherwise true*/
--cond: calc(((var(--x) * var(--y)) - 1) * -1);
}
.nor{
/*"true" if both inputs are "false." Otherwise, the output is "false." */
--cond: calc(((var(--x) - 1) * (var(--y) - 1)));
}
.xnor{
/*The XNOR (exclusive-NOR) gate is a combination XOR gate followed by an inverter. Its output is "true" if the inputs are the same, and"false" if the inputs are different.
*/
--cond: calc((((((var(--x) + var(--y)) * -1) + 2) * (var(--x) + var(--y))) - 1) * -1);
}
div{
background: rgba(100, 255, 100, var(--cond));
display: flex;
align-items:center;
justify-content:center;
font-size: 2rem;
border: 2px solid grey;
padding: 1em;
}
body{
font-family: sans-serif;
display:flex;
flex-direction: column;
}
section{
display:grid;
grid-template-columns: repeat(3, minmax(120px, 1fr));
}
section h2{
grid-column:1 / -1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.