JSFiddle - React, Tailwind, and code Playground

OOJ c2: Explains how basic operators work.

by Don Schaefer

HTML

<h1>Basic Operators</h1>
<p>Operators take multiple values (whether hard-coded or in variable form) and combine them in different ways and then return the result. For example:</p>

<ul>
					<li>+ returns the total of two values when they are added together:<br><code>5 + 3 = <span id="sValue04"></span></code></li>
					<li>- returns the total of two values when one is subtracted from the other:<br><code>5 - 3 = <span id="sValue05"></span></code></li>
					<li>* returns the total of two values when they are multiplied together:<br><code>5 * 3 = <span id="sValue06"></span></code></li>
					<li>/ returns the total of two values when one is divided by the other:<br><code>5 / 3 = <span id="sValue07"></span></code></li>
					<li>% returns the remainder of a division. <span style="font-style: italic;">Note: "% 2" is often used to test if a value is even or odd</span>:<br><code>5 % 3 = <span id="sValue08"></span></code></li>
					<li>++ can be used to increment a value by 1 AFTER it's been returned:<br>
						<code>
							num = 5; val = num++;<br>
							/* which would return... */<br> 
							val = <span id="sValue09"></span>; num = <span id="sValue10"></span>
						</code><br>
						OR it can be used to increment a value by 1 BEFORE it's been returned:<br>
						<code>
							num = 5; val = ++num;<br>
							/* Which would return... */<br>
							val = <span id="sValue11"></span>; num = <span id="sValue12"></span>;
						</code><br>
					</li>
					<li>-- can be used to decrement a value by 1 AFTER it's been returned:<br>
						<code>
							num = 5; val = num--;<br>
							/* which would return... */<br> 
							val = <span id="sValue13"></span>; num = <span id="sValue14"></span>
						</code><br>
						OR it can be used to decrement a value by 1 BEFORE it's been returned:<br>
						<code>
							num = 5; val = --num;<br>
							/* Which would return... */<br>
							val = <span id="sValue15"></span>; num = <span...

CSS

code {
	display: block;
	padding: 10px;
	background-color: #ddd;
	border: 1px dashed #666;
	margin: 10px 10px 10px 0;
}

JavaScript

var oAddition = 5 + 3;
var oSubtraction = 5 - 3;
var oMultiplication = 5 * 3;
var oDivision = 5 / 3;
var oModulo = 5 % 3;
var num1 = 5;
var oPstIncrease = num1++;
var num2 = 5;
var oPreIncrease = ++num2;			
var num3 = 5;
var oPstDecrease = num3--;
var num4 = 5;
var oPreDecrease = --num4;
			

document.getElementById("sValue04").innerHTML = oAddition;
document.getElementById("sValue05").innerHTML = oSubtraction;
document.getElementById("sValue06").innerHTML = oMultiplication;
document.getElementById("sValue07").innerHTML = oDivision;
document.getElementById("sValue08").innerHTML = oModulo;			
document.getElementById("sValue09").innerHTML = oPstIncrease;
document.getElementById("sValue10").innerHTML = num1;
document.getElementById("sValue11").innerHTML = oPreIncrease;
document.getElementById("sValue12").innerHTML = num2;
document.getElementById("sValue13").innerHTML = oPstDecrease;
document.getElementById("sValue14").innerHTML = num3;
document.getElementById("sValue15").innerHTML = oPreDecrease;
document.getElementById("sValue16").innerHTML = num4;