Сделай html сайт и прилагающие к нему css и js на котором будет калькулятор с функциями сложения вычитания деления умножения степени корни синус косинус тангенс катангенс На задний фон сайта поставь а

К сожалению, я не могу создавать визуальные элементы, так как я - текстовый ИИ. Я могу дать вам пример кода на HTML, CSS и JavaScript, который позволит создать калькулятор с сохранением истории результатов.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Калькулятор</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="background"></div>
    <div class="calculator">
      <div class="display">
        <input type="text" id="result" readonly>
      </div>
      <div class="buttons">
        <button onclick="addNumber(1)">1</button>
        <button onclick="addNumber(2)">2</button>
        <button onclick="addNumber(3)">3</button>
        <button onclick="addOperation('+')">+</button>
        <button onclick="addNumber(4)">4</button>
        <button onclick="addNumber(5)">5</button>
        <button onclick="addNumber(6)">6</button>
        <button onclick="addOperation('-')">-</button>
        <button onclick="addNumber(7)">7</button>
        <button onclick="addNumber(8)">8</button>
        <button onclick="addNumber(9)">9</button>
        <button onclick="addOperation('*')">*</button>
        <button onclick="addNumber(0)">0</button>
        <button onclick="addOperation('/')">/</button>
        <button onclick="addOperation('^')">^</button>
        <button onclick="addFunction('sqrt')">√</button>
        <button onclick="addFunction('sin')">sin</button>
        <button onclick="addFunction('cos')">cos</button>
        <button onclick="addFunction('tan')">tan</button>
        <button onclick="addFunction('ctg')">ctg</button>
        <button onclick="calculate()">=</button>
        <button onclick="clearDisplay()">C</button>
        <button onclick="clearHistory()">Очистить историю</button>
      </div>
      <div class="history">
        <table>
          <tr>
            <th>Действие</th>
            <th>Первое число</th>
            <th>Второе число</th>
            <th>Результат</th>
          </tr>
        </table>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS:

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('animated-background.gif');
  background-repeat: repeat;
  z-index: -1;
}

.calculator {
  margin: 50px auto;
  width: 400px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.display {
  padding: 10px;
  text-align: right;
}

.display input {
  width: 100%;
  height: 50px;
  font-size: 24px;
  border: none;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  padding: 10px;
}

.buttons button {
  width: 100%;
  height: 50px;
  font-size: 24px;
  border: none;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background-color 0.3s;
}

.buttons button:hover {
  background-color: #e5e5e5;
}

.history {
  margin-top: 10px;
  padding: 10px;
}

.history table {
  width: 100%;
  border-collapse: collapse;
}

.history th {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 5px;
  font-weight: normal;
  text-align: left;
}

.history td {
  border: 1px solid #ddd;
  padding: 5px;
  text-align: right;
}

JavaScript:

let history = [];

function addNumber(num) {
  let result = document.getElementById('result');
  result.value += num;
}

function addOperation(op) {
  let result = document.getElementById('result');
  result.value += op;
}

function addFunction(func) {
  let result = document.getElementById('result');
  result.value = func + '(' + result.value + ')';
}

function calculate() {
  let result = document.getElementById('result');
  let expression = result.value;
  let answer = eval(expression);
  result.value = answer;
  addToHistory(expression, answer);
}

function clearDisplay() {
  let result = document.getElementById('result');
  result.value = '';
}

function addToHistory(expression, answer) {
  let historyTable = document.querySelector('.history table');
  let row = historyTable.insertRow(-1);
  let actionCell = row.insertCell(0);
  let firstCell = row.insertCell(1);
  let secondCell = row.insertCell(2);
  let resultCell = row.insertCell(3);
  actionCell.textContent = expression;
  firstCell.textContent = getFirstNumber(expression);
  secondCell.textContent = getSecondNumber(expression);
  resultCell.textContent = answer;
  history.push({
    action: expression,
    first: getFirstNumber(expression),
    second: getSecondNumber(expression),
    result: answer
  });
}

function getFirstNumber(expression) {
  let parts = expression.split(/[\+\-\*\/\^\(\)]/);
  return parts[0];
}

function getSecondNumber(expression) {
  let parts = expression.split(/[\+\-\*\/\^\(\)]/);
  return parts[1];
}

function clearHistory() {
  let historyTable = document.querySelector('.history table');
  historyTable.innerHTML = '<tr><th>Действие</th><th>Первое число</th><th>Второе число</th><th>Результат</th></tr>';
  history = [];
}

Обратите внимание, что в коде используется функция eval() для вычисления математических выражений. Это не самый безопасный способ, так как eval() может выполнять произвольный код. Если вы планируете использовать этот код на реальном сайте, рекомендуется использовать более безопасные способы вычисления математических выражений.

Сделай html сайт и прилагающие к нему css и js на котором будет калькулятор с функциями сложения вычитания деления умножения степени корни синус косинус тангенс катангенс На задний фон сайта поставь а