📖 Introduction
JavaScript is a powerful programming language that allows us to manipulate web pages dynamically. Today, we’ll explore assignment and arithmetic operators and learn how to use them with the Document Object Model (DOM) to build four interactive calculators.
By the end of this tutorial, you will:
✅ Understand assignment operators (=, +=, -=, *=, /=, %=)
✅ Use arithmetic operators (+, -, *, /, %) to perform calculations
✅ Learn DOM manipulation methods like getElementById, innerText, and addEventListener
✅ Build four basic calculators for addition, subtraction, multiplication, and division
📌 Understanding JavaScript Assignment Operators
Assignment operators are used to assign values to variables.
Example Code:
let x = 10;
x += 5; // x = x + 5, so x is now 15
console.log(x); // Output: 15
📌 Understanding JavaScript Arithmetic Operators
Arithmetic operators perform basic mathematical operations in JavaScript.
Example Code:
let num1 = 20;
let num2 = 5;
let sum = num1 + num2;
console.log(sum); // Output: 25
📌 Using the DOM to Build Interactive Calculators
The Document Object Model (DOM) allows us to manipulate HTML elements dynamically. We’ll use:
✅ document.getElementById() – To select input fields and display results
✅ addEventListener() – To trigger calculations when buttons are clicked
✅ innerText – To update result text
🛠️ Step-by-Step: Building Four Basic Calculators
🟢 1. Addition Calculator
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<button onclick="addNumbers()">Add</button>
<p>Result: <span id="addResult">0</span></p>
<script>
function addNumbers() {
let num1 = Number(document.getElementById("num1").value);
let num2 = Number(document.getElementById("num2").value);
let sum = num1 + num2;
document.getElementById("addResult").innerText = sum;
}
</script>
🟠 2. Subtraction Calculator
<input type="number" id="num3" placeholder="Enter first number">
<input type="number" id="num4" placeholder="Enter second number">
<button onclick="subtractNumbers()">Subtract</button>
<p>Result: <span id="subResult">0</span></p>
<script>
function subtractNumbers() {
let num1 = Number(document.getElementById("num3").value);
let num2 = Number(document.getElementById("num4").value);
let difference = num1 - num2;
document.getElementById("subResult").innerText = difference;
}
</script>
🟣 3. Multiplication Calculator
<input type="number" id="num5" placeholder="Enter first number">
<input type="number" id="num6" placeholder="Enter second number">
<button onclick="multiplyNumbers()">Multiply</button>
<p>Result: <span id="mulResult">0</span></p>
<script>
function multiplyNumbers() {
let num1 = Number(document.getElementById("num5").value);
let num2 = Number(document.getElementById("num6").value);
let product = num1 * num2;
document.getElementById("mulResult").innerText = product;
}
</script>
🔵 4. Division Calculator
<input type="number" id="num7" placeholder="Enter first number">
<input type="number" id="num8" placeholder="Enter second number">
<button onclick="divideNumbers()">Divide</button>
<p>Result: <span id="divResult">0</span></p>
<script>
function divideNumbers() {
let num1 = Number(document.getElementById("num7").value);
let num2 = Number(document.getElementById("num8").value);
if (num2 === 0) {
document.getElementById("divResult").innerText = "Cannot divide by zero!";
} else {
let quotient = num1 / num2;
document.getElementById("divResult").innerText = quotient;
}
}
</script>
🎯 Conclusion
By completing this tutorial, you have learned:
✅ How to use assignment and arithmetic operators in JavaScript
✅ How to manipulate the DOM using JavaScript
✅ How to create interactive calculators for basic math operations
Now, try modifying the calculators to support multiple operations in one function! 🚀
Post a Comment