Grade & Simple-Calculator/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="sty.css">

    <title>Calculator</title>
</head>

<body>
    <!-- Grade Calculator -->

    <div class="container">
        <h1 class="grade"> Grade Calculator</h1>

        <div class="calc-body">
            <div class="result">
                <h1>Result</h1>
                <div class="show">
                    <h2>Total:<span id="total"></span></h2>
                    <br>
                    <h2>Percentage:<span id="percentage"></span></h2>
                    <br>
                    <h2>Grade:<span id="grade"></span></h2>
                </div>
            </div>
            <div class="inp">
                <div class="main">
                    <input type="number" name="" id="DELD" placeholder="DELD"><br>
                    <input type="number" name="" id="OS" placeholder="OS"><br>
                    <input type="number" name="" id="DBMS" placeholder="DBMS"><br>
                    <input type="number" name="" id="AWT" placeholder="AWT"><br>
                    <input type="number" name="" id="EG" placeholder="EG"><br>
                    <button class="btn" onclick="getResult()">Calculate Result</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Simple Calculator -->

    <div class="container">
        <h1 class="simp">Normal Calculator</h1>

        <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>

</body>
<script src="home.js"></script>

</html>