index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Graphing Calculator</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/7.2.0/math.min.js" integrity="sha512-4VdpCxbABk7wjJb/9z/d3EyibeHwUY0FgHbFO4EiIPVtyyV6llhENCvzRk8SH5D86+Jwm6QLagqRRnEJCd3gJg==" crossorigin="anonymous"></script>
</head>
<body>
    <h1>Graph Calculator</h1>
    <h2>Equation: <span id="equation"></span></h3>
    <div class="container">
    <div class="navbar">
        <div class="form-group">
            <label for="Algebra">Algebraic Expression:</label>
            <input id="algebra" type="text" placeholder="Type the function here">
            <small style="font-size: 11px;">For higher order equations follow the format- x*x*x + 5*x + 5</small>
            <button id="algbBtn">View Graph</button>
        </div>
        <div class="form-group">
            <label for="Trigo">Trigonometric Expression:</label>
            <input id="trigo" type="text" placeholder="Type the function here">
            <small style="font-size: 11px;">Write trigo functions as sin(2x) or cos(3x)</small>
            <button id="trigoBtn">View Graph</button>
            
        </div>
    </div>
    <canvas id="graph"></canvas>
</div>
    <script src="script.js"></script>
</body>
</html>