Currently, I am working on creating a calculator using JavaScript and HTML. My goal is to add memory buttons (MS, MC, MR) before the clear button (C) on the calculator interface. Despite trying various methods, I am facing some challenges in achieving this desired arrangement.
I attempted to utilize the insertBefore() method, but I believe my approach may be incorrect. Any guidance or suggestions on how to properly insert the memory buttons before the clear button would be greatly appreciated.
Below is the section of JavaScript code where I encountered an issue:
//3.
//Changing colors of operation buttons
//Multiply Color
const colorMultiply = document.getElementById('multiply')
colorMultiply.style.backgroundColor = "green"
//Divide Color
const colorDivide = document.getElementById('divide')
colorDivide.style.backgroundColor = "red"
//Subtract Color
const colorSubtract = document.getElementById('subtract')
colorSubtract.style.backgroundColor="blue"
//Add Color
const colorAdd = document.getElementById('add')
colorAdd.style.backgroundColor="yellow"
//Changing font color of numbers to blue
const numbers = document.querySelectorAll('.number')
numbers.forEach(number => {
number.style.color ="blue";
});
//Changing color of the clear button
const clearButton = document.getElementById('clear')
clearButton.style.color = "white"
clearButton.style.backgroundColor = "black"
Here is a snippet of the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Calculator Project </title>
<script src="script.js" defer></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="calculator">
<h1> My Calculator </h1>
<form>
<input type="text" name="" id="" class="display">
</form>
<div class="buttons">
<!-- Memory buttons -->
<button id="memoryStore" type="button" class="memory-btn">MS</button>
<button id="memoryClear" type="button" class="memory-btn">MC</button>
<button id="memoryRestore" type="button" class="memory-btn">MR</button>
<!-- Other buttons -->
<button id="clear" type="button" class="btn">C</button>
<button id="add" type="button" class="btn">+</button>
<button id="subtract" type="button" class="btn">-</button>
<button id="multiply" type="button" class="btn">*</button>
<button id="divide" type="button" class="btn">/</button>
<button id="equals" type="button" class="btn">=</button>
</div>
</section>
</body>
</html>