Popup Calculator

// Create a div element to hold the calculator
var calcDiv = document.createElement("div");
calcDiv.id = "calcDiv";
calcDiv.style.position = "fixed";
calcDiv.style.bottom = "0";
calcDiv.style.right = "0";
calcDiv.style.width = "300px";
calcDiv.style.height = "400px";
calcDiv.style.backgroundColor = "#088DA5";
calcDiv.style.border = "1px solid black";
calcDiv.style.zIndex = "9999";

// Create a button to close and open the calculator
var calcBtn = document.createElement("button");
calcBtn.id = "calcBtn";
calcBtn.innerHTML = "Lommeregner";
calcBtn.style.position = "absolute";
calcBtn.style.top = "-40px";
calcBtn.style.left = "0";
calcBtn.style.width = "200px";
calcBtn.style.height = "40px";

// Add an event listener to toggle the visibility of the calculator
calcBtn.addEventListener("click", function() {
  if (calcDiv.style.height == "400px") {
    calcDiv.style.height = "20px"; // Change the height of the div element to hide the calculator
  } else {
    calcDiv.style.height = "400px"; // Change the height of the div element to show the calculator
  }
});

// Append the button to the div element
calcDiv.appendChild(calcBtn);

// Create an input element to display the result
var calcResult = document.createElement("input");
calcResult.id = "calcResult";
calcResult.type = "text";
calcResult.value = "0";
calcResult.readOnly = true;
calcResult.style.width = "290px";
calcResult.style.height = "40px";
calcResult.style.fontSize = "24px";
calcResult.style.textAlign = "right";

// Append the input element to the div element
calcDiv.appendChild(calcResult);

// Create an array of buttons for the calculator
var calcButtons = [
  {value: "7", type: "number"},
  {value: "8", type: "number"},
  {value: "9", type: "number"},
  {value: "/", type: "operator"},
  {value: "4", type: "number"},
  {value: "5", type: "number"},
  {value: "6", type: "number"},
  {value: "*", type: "operator"},
  {value: "1", type: "number"},
  {value: "2", type: "number"},
  {value: "3", type: "number"},
  {value: "-", type: "operator"},
  {value: ".", type: "decimal"},
  {value: "0", type: "number"},
  {value: "=", type: "equal"},
  {value: "+", type: "operator"}
];

// Create a variable to store the current expression
var calcExpression = "";

// Create a function to handle the button click
function calcButtonClick(event) {
  // Get the value of the clicked button
  var buttonValue = event.target.value;

  // Check the type of the button
  if (buttonValue == "=") {
    // Evaluate the expression and display the result
    try {
      var result = eval(calcExpression);
      calcResult.value = result;
      calcExpression = result.toString();
    } catch (error) {
      // Display an error message if the expression is invalid
      calcResult.value = error.message;
      calcExpression = "";
    }
  } else if (buttonValue == ".") {
    // Append a decimal point only if there is no decimal point in the last number
    var lastNumber = calcExpression.split(/[\+\-\*\/]/).pop();
    if (lastNumber.indexOf(".") == -1) {
      calcExpression += buttonValue;
      calcResult.value = calcExpression;
    }
  } else {
    // Append the button value to the expression and display it
    calcExpression += buttonValue;
    calcResult.value = calcExpression;
  }
}

// Loop through the array of buttons and create them
for (var i=0; i<calcButtons.length; i++) {
  // Create a button element
  var calcButton = document.createElement("button");
  calcButton.value = calcButtons[i].value;
  calcButton.innerHTML = calcButtons[i].value;
  calcButton.style.width = (290/4) + 'px';
  calcButton.style.height = (360/4) + 'px';
  calcButton.style.fontSize = '24px';

  // Add an event listener to handle the button click
  calcButton.addEventListener("click", calcButtonClick);

  // Append the button element to the div element
  calcDiv.appendChild(calcButton);
}

// Append the div element to the body of the document
document.body.appendChild(calcDiv);