index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .calculator {
            width: 300px;
            margin: 50px auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        input[type="text"] {
            width: calc(100% - 20px);
            margin-bottom: 10px;
            padding: 10px;
            font-size: 18px;
        }
        button {
            width: 45%;
            padding: 10px;
            font-size: 18px;
            cursor: pointer;
        }
        button:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
<div class="calculator">
    <input type="text" id="num1" placeholder="Enter number 1">
    <input type="text" id="num2" placeholder="Enter number 2">
    <button onclick="calculate('add')">Add</button>
    <button onclick="calculate('subtract')">Subtract</button>
    <button onclick="calculate('multiply')">Multiply</button>
    <button onclick="calculate('divide')">Divide</button>
    <div id="result"></div>
</div>

<!-- Include your script file -->
<script src="src/basic.js"></script>

<script>
  function calculate(operation) {
    const num1 = parseFloat(document.getElementById('num1').value);
    const num2 = parseFloat(document.getElementById('num2').value);

    let result;
    switch (operation) {
      case 'add':
        result = add(num1, num2);
        break;
      case 'subtract':
        result = subtract(num1, num2);
        break;
      case 'multiply':
        result = multiply(num1, num2);
        break;
      case 'divide':
        result = divide(num1, num2);
        break;
      default:
        result = "Invalid operation";
    }

    document.getElementById('result').innerText = "Result: " + result;
  }
</script>
</body>
</html>