Skip to main content

How To Make Casio Calculator using HTML, CSS Javascript with all Functional features

Image
By Sky Code82

Creating a Casio FX-991CW calculator using HTML, CSS, and JavaScript is an engaging project for learning web development. This guide will help you create a functional calculator that can perform basic arithmetic, trigonometric functions, and square root calculations.

Step 1: HTML Structure

First, set up the HTML structure for the calculator. Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Casio FX-991CW Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="calculator-screen" id="main-screen" value="" disabled />
        <input type="text" class="calculator-screen" id="sub-screen" value="" disabled />
        <div class="calculator-keys">
            <!-- First row -->
            <button type="button" class="mode" value="MODE">MODE</button>
            <button type="button" class="shift" value="SHIFT">SHIFT</button>
            <button type="button" class="alpha" value="ALPHA">ALPHA</button>
            <button type="button" class="setup" value="SETUP">SETUP</button>

            <!-- Second row -->
            <button type="button" class="function" value="hyp">hyp</button>
            <button type="button" class="function" value="sin">sin</button>
            <button type="button" class="function" value="cos">cos</button>
            <button type="button" class="function" value="tan">tan</button>

            <!-- Third row -->
            <button type="button" class="operator" value="^">x^y</button>
            <button type="button" class="function" value="log">log</button>
            <button type="button" class="function" value="ln">ln</button>
            <button type="button" class="operator" value="sqrt">&radic;</button>

            <!-- Fourth row -->
            <button type="button" value="7">7</button>
            <button type="button" value="8">8</button>
            <button type="button" value="9">9</button>
            <button type="button" class="operator" value="/">/</button>

            <!-- Fifth row -->
            <button type="button" value="4">4</button>
            <button type="button" value="5">5</button>
            <button type="button" value="6">6</button>
            <button type="button" class="operator" value="*">*</button>

            <!-- Sixth row -->
            <button type="button" value="1">1</button>
            <button type="button" value="2">2</button>
            <button type="button" value="3">3</button>
            <button type="button" class="operator" value="-">-</button>

            <!-- Seventh row -->
            <button type="button" value="0">0</button>
            <button type="button" class="decimal" value=".">.</button>
            <button type="button" class="all-clear" value="all-clear">AC</button>
            <button type="button" class="operator" value="+">+</button>

            <!-- Eighth row -->
            <button type="button" class="equal-sign operator" value="=">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 2: CSS Styling

Next, style the calculator with CSS to make it visually appealing:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #8eb2fa;
    margin: 0;
}

.calculator {
    border-radius: 10px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    background-color: #ffffff;
    width: 400px;
}

.calculator-screen {
    width: 94%;
    height: 40px;
    border: none;
    background-color: #252525;
    color: #ffffff;
    text-align: right;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 1.5rem;
    border-radius: 5px;
    margin-bottom: 10px;
}

#main-screen {
    height: 60px;
    font-size: 2rem;
}

#sub-screen {
    height: 30px;
    font-size: 1rem;
    background-color: #555;
}

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

button {
    height: 50px;
    border-radius: 5px;
    border: none;
    background-color: #f3f4f6;
    font-size: 1rem;
    transition: all 0.3s ease;
}

button:hover {
    background-color: #e2e3e5;
}

.operator {
    background-color: #ff9500;
    color: white;
}

.operator:hover {
    background-color: #e08e00;
}

.all-clear {
    background-color: #ff3b30;
    color: white;
}

.all-clear:hover {
    background-color: #d9362c;
}

.equal-sign {
    background-color: #34c759;
    color: white;
}

.equal-sign:hover {
    background-color: #2ea349;
}

Step 3: JavaScript Functionality

Finally, add JavaScript to handle calculations. Here’s an example to handle basic functions and trigonometric operations:

const calculator = {
    displayValue: "0",
    firstOperand: null,
    waitingForSecondOperand: false,
    operator: null,
};

function inputDigit(digit) {
    const { displayValue, waitingForSecondOperand } = calculator;

    if (waitingForSecondOperand === true) {
        calculator.displayValue = digit;
        calculator.waitingForSecondOperand = false;
    } else {
        calculator.displayValue = displayValue === "0" ? digit : displayValue + digit;
    }
}

function inputDecimal(dot) {
    if (calculator.waitingForSecondOperand === true) {
        calculator.displayValue = "0.";
        calculator.waitingForSecondOperand = false;
        return;
    }

    if (!calculator.displayValue.includes(dot)) {
        calculator.displayValue += dot;
    }
}

function handleOperator(nextOperator) {
    const { firstOperand, displayValue, operator } = calculator;
    const inputValue = parseFloat(displayValue);

    if (operator && calculator.waitingForSecondOperand) {
        calculator.operator = nextOperator;
        return;
    }

    if (firstOperand == null && !isNaN(inputValue)) {
        calculator.firstOperand = inputValue;
    } else if (operator) {
        const result = calculate(firstOperand, inputValue, operator);

        calculator.displayValue = String(result);
        calculator.firstOperand = result;
    }

    calculator.waitingForSecondOperand = true;
    calculator.operator = nextOperator;
}

function calculate(firstOperand, secondOperand, operator) {
    if (operator === "+") {
        return firstOperand + secondOperand;
    } else if (operator === "-") {
        return firstOperand - secondOperand;
    } else if (operator === "*") {
        return firstOperand * secondOperand;
    } else if (operator === "/") {
        return firstOperand / secondOperand;
    } else if (operator === "^") {
        return Math.pow(firstOperand, secondOperand);
    } else if (operator === "sqrt") {
        return Math.sqrt(firstOperand);
    }

    return secondOperand;
}

function handleFunction(func) {
    const { displayValue } = calculator;
    const inputValue = parseFloat(displayValue);

    let result;
    if (func === "sin") {
        result = Math.sin((inputValue * Math.PI) / 180); // Convert degrees to radians
    } else if (func === "cos") {
        result = Math.cos((inputValue * Math.PI) / 180); // Convert degrees to radians
    } else if (func === "tan") {
        result = Math.tan((inputValue * Math.PI) / 180); // Convert degrees to radians
    } else if (func === "log") {
        result = Math.log10(inputValue);
    } else if (func === "ln") {
        result = Math.log(inputValue);
    }

    calculator.displayValue = result !== undefined ? String(result) : "Error";
    calculator.waitingForSecondOperand = true;
}

function resetCalculator() {
    calculator.displayValue = "0";
    calculator.firstOperand = null;
    calculator.waitingForSecondOperand = false;
    calculator.operator = null;
}

function updateDisplay() {
    const display = document.querySelector("#main-screen");
    display.value = calculator.displayValue;
}

updateDisplay();

const keys = document.querySelector(".calculator-keys");
keys.addEventListener("click", (event) => {
    const { target } = event;
    if (!target.matches("button")) {
        return;
    }

    if (target.classList.contains("operator")) {
        // Special handling for square root function
        if (target.value === "sqrt") {
            const result = calculate(parseFloat(calculator.displayValue), null, "sqrt");
            calculator.displayValue = String(result);
            calculator.waitingForSecondOperand = true;
            updateDisplay();
            return;
        }

        handleOperator(target.value);
        updateDisplay();
        return;
    }

    if (target.classList.contains("function")) {
        handleFunction(target.value);
        updateDisplay();
        return;
    }

    if (target.classList.contains("decimal")) {
        inputDecimal(target.value);
        updateDisplay();
        return;
    }

    if (target.classList.contains("all-clear")) {
        resetCalculator();
        updateDisplay();
        return;
    }

    inputDigit(target.value);
    updateDisplay();
});

This code creates a calculator that supports basic arithmetic, trigonometric functions (sine, cosine, tangent), logarithms, natural logarithms, exponentiation, and square root calculations.

Happy coding!

Comments

Post a Comment

Popular posts from this blog

Creating an Interactive Tic Tac Toe Game

By Sky Code82
In this tutorial, we'll walk through the steps to create a dynamic Tic Tac Toe game using HTML, CSS, and JavaScript. This classic game is a great way to practice your web development skills and learn more about interactive web applications. HTML Structure We'll start with the HTML structure, which includes the game board, a reset button, and a status display: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tic Tac Toe</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Tic Tac Toe</h1> <div id="board" class="board"></div> <button id="reset">Reset Game</button> <div id=...
Post a Comment
Read more

Creating a Simple Car Racing Game with HTML, CSS, Javascript

By Sky Code82
In this post, we will create a simple car racing game using HTML, CSS, and JavaScript. This game will feature a player car, an opponent car, and a score counter. The player can move their car left and right to avoid collisions with the opponent car. Let's dive into the code! HTML Structure The HTML structure consists of a game area that contains the road, player car, opponent car, and score display: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Car Racing Game</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="gameArea"> <div class="road"></div> <div class="playerCar"></div> <div class="opponentCar"></div...
Post a Comment
Read more