// 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);