<!DOCTYPE html> <!--Visualizing the JavaScript Function Call Stack - Source: https://www.javascripttutorial.net/javascript-call-stack/ -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="javascript.js" defer></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="top-row">
        <h1>The JavaScript Call Stack</h1>
        <h2>What is it?</h2>
        <p>The JavaScript engine uses a call stack to keep track of the scripts and functions that 
        are executing.</p>
        <p>
        When a script is executed, the JavaScript enginge creates a global execution context and 
        pushes it to the stack.
        </p>
        <p>
        When a function is called, the JavaScript engine creates a function execution context
        for that function and pushes it to the stack. <br>
        If a function calls another function, the JavaScript engine creates a new function
        execution context for the function being called and pushes it to the stack.
        </p>
    </div>

    <div class="middle-row">
    </div>

    <h2>Visualizing the JavaScript Function Call Stack</h2>
    <div class="bottom-row">
        <div class="prompt-container">
            <p class="prompt-description">
                See how the call stack responds 
                when you try to calculate the 
                average of two numbers.</p>
            <p class="promt-text">Enter two numbers:</p>
            <input class="numberInputA" type="text">
            <input class="numberInputB" type="text">
            <button>Solve</button>
            <p class="output"></p>
        </div>
        <div class="stack-container">
            <div class="stack-title">Call Stack</div>
            <ul></ul>
        </div>
    </div>
</body>
</html>