SIMPLE_CALCULATOR_based project.

#html code....

<title>Calculator</title>

Calculator

    <div class="calculator">
        <input type="text" name="screen" id="screen">
        <table>
            <tr>
                <td><button>(</button></td>
                <td><button>)</button></td>
                <td><button>C</button></td>
                <td><button>%</button></td>
            </tr>
            <tr>
                <td><button>7</button></td>
                <td><button>8</button></td>
                <td><button>9</button></td>
                <td><button>X</button></td>
            </tr>
            <tr>
                <td><button>4</button></td>
                <td><button>5</button></td>
                <td><button>6</button></td>
                <td><button>-</button></td>
            </tr>
            <tr>
                <td><button>1</button></td>
                <td><button>2</button></td>
                <td><button>3</button></td>
                <td><button>+</button></td>
            </tr>
            <tr>
                <td><button>0</button></td>
                <td><button>.</button></td>
                <td><button>/</button></td>
                <td><button>=</button></td>
            </tr>
        </table>
    </div>
</div>

<script src="index.js"></script>

//css code... .container{ text-align: center; margin-top:23px }

table{ margin: auto; }

input{ border-radius: 21px; border: 5px solid #0d0f0d; font-size:34px; height: 65px; width: 456px; }

button{ border-radius: 20px; font-size: 40px; background: rgb(136, 241, 230); width: 102px; height: 90px; margin: 6px; }

.calculator{ border: 4px solid rgb(28, 27, 27); background-color: rgb(227, 126, 158); padding: 23px; border-radius: 53px; display: inline-block;

}

h1{ font-size: 28px; font-family: 'Courier New', Courier, monospace; }

//js code let screen = document.getElementById('screen'); buttons = document.querySelectorAll('button'); let screenValue = ''; for (item of buttons) { item.addEventListener('click', (e) => { buttonText = e.target.innerText; console.log('Button text is ', buttonText); if (buttonText == 'X') { buttonText = '*'; screenValue += buttonText; screen.value = screenValue; } else if (buttonText == 'C') { screenValue = ""; screen.value = screenValue; } else if (buttonText == '=') { screen.value = eval(screenValue); } else { screenValue += buttonText; screen.value = screenValue;      }

    }) }