A Calculator For Advanced Requirements

Overall introduction

In terms of this blog,

1.Create a calculator with a visual interface.

2.Record necessary work content and process.

Link to the finished project code:https://github.com/0128130Raven/EE308_calc/tree/main/calc_advanced

Program Requirements

Basic requirement: Implement addition, subtraction, multiplication, division, and clear functions.
Advanced requirement: Implement functionality for exponentiation, trigonometric functions, and more.

The Link Your Class	https://bbs.csdn.net/forums/ssynkqtd-04
The Link of Requirement of This Assignment	https://bbs.csdn.net/topics/617332156
The Aim of This Assignment	an advanced calculator
MU STU ID and FZU STU ID	MU:21126747 \| FZU:832101220

I. PSP form for this work

Personal Software Process Stages	Estimated Time (minutes)	Actual Time (minutes)
Planning
? Estimate	30	15
Development
? Analysis	20	17
? Design Spec	3	3
? Design Review	10	10
? Coding Standard	2	2
? Design	10	10
? Coding	30	30
? Code Review	10	12
? Test	10	10
Reporting
? Test Report	30	30
? Size Measurement	5	5
? Postmortem & Process Improvement Plan	20	10
Sum	180	154

II. Problem-solving ideas for designation

Take program requirements into consideration and develop as fast as possible, here select web language.
(framworks to be neglected temporarily like PHP, Vue, React)

necessary for input values numbers including and operations as well as functions to be advanced (HTML)
handle with click events or keyboard pressed (JS)
display as a simple and clean interface (CSS)

III. Practical implementation and process

here, a flow chart as shown to be convenient:

IV. Code description

HTML to achieve key interface visualization

<div id="c_text">
   <input type="text" id="result" value="0" readonly="readonly" />
</div>
<div>
   <button class="button" onclick="appendToResult('(')">(</button>
   <button class="button" onclick="appendToResult(')')">)</button>
   <button class="button" onclick="appendToResult('^')">^</button>
   <button class="button" onclick="appendToResult('log(')">log</button>
   <button class="button" onclick="appendToResult('exp(')">exp</button>
   <button class="button" onclick="appendToResult('pow(')">pow</button>
   <button class="button" onclick="appendToResult('ceil(')">ceil</button>
   <button class="button" onclick="appendToResult('floor(')">floor</button>
   <button class="button" onclick="appendToResult('sin(')">sin</button>
   <button class="button" onclick="appendToResult('cos(')">cos</button>
   <button class="button" onclick="appendToResult('tan(')">tan</button>
   <button class="button" onclick="appendToResult('cot(')">cot</button>
 </div>
   <!-- Add other compound function buttons, such as sin, cos, etc -->

CSS handles interface styling and rendering

body {<!-- -->
    font-family: Arial, sans-serif;
    text-align: center;
  }

  #calculator {<!-- -->
    width: 300px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }
  #c_text {<!-- -->
    margin: auto;
  }
  #result {<!-- -->
    display: block;
    padding: 0;
    font-size: 24px;
    margin-bottom: 10px;
    text-align: right;
    
  }
  #result:focus{<!-- -->
    outline: none;
  }
  .button {<!-- -->
    width: 50px;
    height: 50px;
    margin: 5px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f5f5f5;
  }

  .button:active,.button:hover {<!-- -->
    background-color: #e0e0e0;
  }

JS handles user operations and calculations
Main program:
 1.Analytic expression
 2. Handle user keyboard input and button click
 3. Processing computation expression
 4. Automatically cleared

Analytic expression

function evaluateExpression(expression) {<!-- -->
  // Use eval to evaluate expressions, as well as more complex expression parsing libraries
  // Add custom functions, such as log, exp, pow, etc
  expression = expression.replace(/log/g, "Math.log");
  expression = expression.replace(/exp/g, "Math.exp");
  expression = expression.replace(/pow/g, "Math.pow");
  // Add other functions, such as round, floor, ceil, sqrt, and so on
  expression = expression.replace(/round/g, "Math.round");
  expression = expression.replace(/floor/g, "Math.floor");
  expression = expression.replace(/ceil/g, "Math.ceil");
  expression = expression.replace(/sqrt/g, "Math.sqrt");
  expression = expression.replace(/sqrt/g, "Math.sqrt");
  expression = expression.replace(/sin/g, "Math.sin");
  expression = expression.replace(/cos/g, "Math.cos");
  expression = expression.replace(/tan/g, "Math.tan");
  expression = expression.replace(/cot/g, "Math.cot");
  return eval(expression);
}

Handle user keyboard input and button click

// keyboard input
document.addEventListener("keydown", function (event) {<!-- -->
  if (event.key === "Enter") {<!-- -->
    calculateResult();
  } else if (event.key === "Escape") {<!-- -->
    clearResult();
  } else if (event.key === "Backspace") {<!-- -->
    result.value = result.value.slice(0, -1);
  } else if (/^[0-9 + \-*/.^()%]$/.test(event.key)) {<!-- -->
    appendToResult(event.key);
  }
});
// button click
const buttons = document.querySelectorAll(".button");
buttons.forEach((button) => {<!-- -->
  button.addEventListener("click", (event) => {<!-- -->
    event.preventDefault();
  });
});

Processing computation expression

function calculateResult() {<!-- -->
  try {<!-- -->
    const expression = result.value;
    result.value = evaluateExpression(expression);
    shouldClearResult = true;
  } catch (error) {<!-- -->
    result.value = "Error";
    shouldClearResult = true;
    setTimeout(() => {<!-- -->
      result.value = "0";
    }, 1500);
  }
}

Automatically cleared

function clearResult() {<!-- -->
  result.value = "0";
  shouldClearResult = false;
}

V. Display

VI. Summary

Completing the assignment was a valuable experience that provided insights into various aspects. Through the design process, I gained a profound appreciation for the art and challenge of programming. Designing this calculator not only enhanced my programming skills but also taught me how to translate abstract concepts into practical applications. Throughout this journey, I constantly tackled problems, refined my code, and improved my problem-solving abilities and coding proficiency.
This assignment also deepened my understanding of the significance of web languages as the bridge between people and the digital world. I am eagerly looking forward to continuing my exploration and learning of web languages in the future, engaging in more intriguing projects, and contributing to the creation of innovative web applications. I aspire to continually elevate my skills and become a proficient web developer, dedicated to providing users with superior online experiences.