index.html

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Horror CGPA Cal-C</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="styles.css">
        <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    </head>
    <body id="body">

        <section class="header">
            <img src="pencil_paper_img.png" alt="pencil-paper">
            <h1>-- Horror CGPA Calcultor --</h1>
            <img src="calculator_img.png" alt="calc">
        </section >

        <section id="intro">
            <p style="letter-spacing: 1.5px;">- - This CGPA Cal-C was Developed by<span id="spanName">Horror-Harry</span>- -</p>
        </section>


        <section id="init-section">
            <h2>Enter Number of Semesters</h2>
            <select id="init">
                <option value="0" disabled selected hidden>Number of Semesters</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>

            <button id="enter-btn" onclick="addBox()">ENTER</button>
        </section>

        <section id="note" hidden>
            <h2>- - NOTE - -</h2>
            <p>Set the required No. of Subjects first and then click PROCEED</p>
        </section>

        <section id="result1" >
            <p style="letter-spacing: 1.5px;">- - This CGPA Cal-C was Developed by<span id="spanName">Horror-Harry</span>- -</p>
        </section>
        
        <script src="script.js"></script>
        
    </body>
</html>