Write the Updated Javascript for this program, for context you're currently building an advanced calculator web app looks more futuristic, and make the numbers and symbols line up in a row, you're also adding advanced features like squares, square roots, cos, sin, tan, and log

Here's the Updated HTML Code:

```

Advanced Calculator


C
⌫
÷
7
8
9
x
4
5
6
-
1
2
3
+
0
.
=
√
x²
sin
cos
tan
log

```

Here's the Updated CSS

```
.calculator {
 width: 320px;
 background-color: #1d1f21;
 border-radius: 5px;
 box-shadow: 0px 0px 10px 1px rgba(255, 255, 255, 0.2);
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 10px;
 }
 
 input[type=text] {
 width: 100%;
 height: 50px;
 margin-bottom: 10px;
 padding: 10px;
 font-size: 24px;
 text-align: right;
 border-radius: 5px;
 border: none;
 background-color: #212121;
 color: #fff;
 }
 
 button {
 width: 50px;
 height: 50px;
 background-color: #272727;
 color: #fff;
 border: none;
 font-size: 24px;
 margin: 5px;
 border-radius: 5px;
 box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
 cursor: pointer;
 transition: all 0.2s ease-in-out;
 }
 
 button:hover {
 background-color: #fff;
 color: #272727;
 }
 
 button:active {
 transform: translateY(2px);
 box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
 }
 
 button.operator {
 background-color: #00ff90;
 color: #272727;
 }
 
 button.operator:hover {
 background-color: #fff;
 color: #00ff90;
 }
 
 button.operator:active {
 box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
 }
 
 .row {
 display: flex;
 justify-content: space-between;
 width: 100%;
 }
 
 .math-fn {
 background-color: #0077ff;
 color: #fff;
 }
 
 .math-fn:hover {
 background-color: #fff;
 color: #0077ff;
 }
 
 .math-fn:active {
 box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
 }
 
 .math-op {
 background-color: #ff2a68;
 color: #fff;
 }
 
 .math-op:hover {
 background-color: #fff;
 color: #ff2a68;
 }
 
 .math-op:active {
 box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
 }
 
```

Finally, here's the javascript

```
// Retrieve the screen element
const screen = document.getElementById('screen');

// Define a variable to keep track of the current calculation
let calculation = '';

// Define function to append characters to the screen
function appendToScreen(value) {
 calculation += value;
 screen.value = calculation;
}

// Define function to clear the screen
function clearScreen() {
 calculation = '';
 screen.value = '';
}

// Define function to remove last character from the screen
function backspace() {
 calculation = calculation.slice(0, -1);
 screen.value = calculation;
}

// Define function to perform the calculation and display the result
function calculate(operator) {
 // Check if there is already a calculation in progress
 if (calculation !== '') {
 // Evaluate the calculation
 const result = eval(calculation);

 // Display the result
 screen.value = result;

 // Update the calculation variable with the result
 calculation = result.toString();
 }

 // If an operator button is clicked, append the operator to the calculation
 if (operator !== '=') {
 calculation += operator;
 }
}

```
이 프로그램에 대한 업데이트된 자바스크립트를 작성하면 현재 구축 중인 고급 계산기 웹 앱이 보다 미래지향적으로 보이고 숫자와 기호가 일렬로 정렬되도록 하며 제곱, 제곱근, cos, sin, tan, log와 같은 고급 기능을 추가할 수 있습니다.업데이트된 HTML 코드는 다음과 같습니다:```고급 계산기C⌫÷789x456-123+0.=√x²sincostanlog```업데이트된 CSS는 다음과 같습니다.```.calculator { width: 320px; background-color: #1d1f21; 테두리-반경: 5px; 상자 그림자: 0px 0px 10px 1px rgba(255, 255, 255, 0.2); display: flex; flex-direction: column; 정렬 항목: 가운데; padding: 10px; }  입력[유형=텍스트] { width: 100%; 높이: 50px; 여백-하단: 10px; 패딩: 10px; 글꼴 크기: 24px; 텍스트 정렬: 오른쪽; 테두리-반경: 5px; 테두리: 없음 background-color: #212121; color: #fff; }  버튼 { width: 50px; 높이: 50px; background-color: #272727; color: #fff; 테두리: 없음 글꼴 크기: 24px; 여백: 5px; 테두리-반경: 5px; 상자 그림자: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); 커서: 포인터; 전환: 모두 0.2초 이지-인-아웃; }  button:hover { background-color: #fff; color: #272727; }  button:active { transform: translateY(2px); 상자 그림자: 0px 0px 3px 0px rgba(0, 0, 0, 0.1); }  button.operator { background-color: #00ff90; color: #272727; }  button.operator:hover { background-color: #fff; color: #00ff90; }  button.operator:active { 상자 그림자: 0px 0px 3px 0px rgba(0, 0, 0, 0.1); }  .row { display: flex; 정의 내용: 공백 사이; 너비: 100%; }  .math-fn { background-color: #0077ff; color: #fff; }  .math-fn:hover { background-color: #fff; color: #0077ff; }  .math-fn:active { 상자 그림자: 0px 0px 3px 0px rgba(0, 0, 0, 0.1); }  .math-op { background-color: #ff2a68; color: #fff; }  .math-op:hover { background-color: #fff; color: #ff2a68; }  .math-op:active { 상자 그림자: 0px 0px 3px 0px rgba(0, 0, 0, 0.1); } ```마지막으로 자바스크립트는 다음과 같습니다.```// 화면 요소 검색const screen = document.getElementById('screen');// 현재 계산을 추적할 변수를 정의합니다.let calculation = '';// 화면에 문자를 추가하는 함수를 정의합니다.함수 appendToScreen(value) { 계산 += 값 screen.value = calculation;}// 화면을 지우는 함수 정의function clearScreen() { calculation = ''; screen.value = '';}// 화면에서 마지막 문자를 제거하는 함수 정의함수 백스페이스() { 계산 = 계산.슬라이스(0, -1); screen.value = calculation;}// 계산을 수행하고 결과를 표시하는 함수를 정의합니다.함수 계산(연산자) { // 이미 진행 중인 계산이 있는지 확인합니다. if (calculation !== '') { // 계산을 평가합니다. const result = eval(calculation); // 결과 표시 screen.value = result; // 결과로 계산 변수를 업데이트합니다. calculation = result.toString(); } // 연산자 버튼이 클릭된 경우 연산자를 계산에 추가합니다. if (연산자 !== '=') { 계산 += 연산자; }}```