Explanation of the Scientific Calculator Code

HTML Structure

The structure of the calculator is built using HTML, with CSS for styling and JavaScript for functionality.

1. HTML Document Structure

  • The HTML document starts with the <!DOCTYPE html> declaration to ensure the document is interpreted as an HTML5 document.
  • The <head> section contains metadata, including the character set and the title of the page.
  • The <style> block within the <head> section defines the CSS for the calculator, which determines how the calculator looks (colors, button layout, etc.).
  • The main content of the page is placed within the <body> tag, which contains the calculator and buttons.

2. Calculator Layout

  • A div element with the class calculator wraps the entire calculator.
  • Inside the calculator, there is an input field with the class display. This field is where the result and ongoing calculations are displayed and is set to disabled so users can only view it.
  • The buttons are grouped into div elements with the class row, aligning them in rows.

3. Button Elements

  • Each button is represented by a button HTML tag. The onclick attribute calls a specific JavaScript function (explained below) when the button is clicked.
  • Buttons are categorized into different types by applying CSS classes:
    • button-clear: The “Clear” button (C) which clears the input.
    • button-operator: Operator buttons (+, -, *, /) for basic arithmetic operations.
    • button-equal: The equal sign (=), which calculates the final result.
    • Normal number buttons (0-9) and special buttons for scientific operations like sin, cos, tan, and sqrt (square root).

CSS Styles

The CSS block defines the layout, dimensions, colors, and hover effects for the calculator. Here’s a breakdown of key styles:

  • Calculator Background:
    • .calculator: The background is a dark color (#222) with rounded corners and padding for a clean look.
  • Display Styles:
    • .display: The display area has a black background and white text, aligned to the right for better visibility.
  • Button Styles:
    • .button: All buttons have a dark background (#333), white text, and rounded corners.
    • Hover Effects: When buttons are hovered over, their background color lightens, e.g., .button:hover makes the button slightly lighter (#555).
  • Special Buttons:
    • .button-operator: Orange for operators.
    • .button-clear: Red for the clear button.
    • .button-equal: Green for the equal button.

JavaScript Functionality

JavaScript adds interactivity to the calculator. There are three primary functions:

1. appendToDisplay(value)

  • This function is called when a number, operator, or function button is clicked.
  • It takes a value (the button’s content) and appends it to the current text in the display.
  • Example: 
    document.getElementById("display").value += value;

2. clearDisplay()

  • This function is invoked when the “Clear” button (C) is clicked.
  • It clears the display by setting its value to an empty string.
  • Example: 
    document.getElementById("display").value = '';

3. calculate()

  • This function is called when the equal (=) button is pressed.
  • It retrieves the current expression from the display, evaluates it using JavaScript’s eval() function, and then displays the result.
  • If an error occurs during evaluation (e.g., a malformed expression), it catches the error and displays “Error”.
  • Example: 
    try {
    let result = eval(display);
    document.getElementById("display").value = result;
} catch (error) {
    document.getElementById("display").value = 'Error';
}

How the Scientific Functions Work

  • The sin, cos, tan, and sqrt functions are JavaScript’s built-in Math functions.
  • For example, when you click the sin button, Math.sin( is appended to the display. The user can then enter an angle, and when they press =, the Math.sin() function is evaluated.

Conclusion

This code provides a fully functional scientific calculator with basic arithmetic operations and common trigonometric functions. You can modify the layout, style, or functions to add more advanced features like logarithms or additional scientific constants.