Untitled

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>NUBS FOR LIFE</title>
        <style>
            #outputArea {
                padding: .25em;
                border: solid black 2px;
                margin: 3em;

                height: 20em;
                width: 20em;

                overflow-y: scroll;

                font-family: consolas, 'courier new', monospace;
                font-size: 1em;
                color: rgb(50, 50, 250);

                background-color: rgb(225,225,225) ;
            }
        </style>

    </head>

    <body>
        <div id="outputArea">
        <p> Radius:
        <label id="RadiusOutput"></label>
        , ratio:
        <label id="RatioOutput"></label> </p>
        </div>

        <script>
            // PASTE YOUR CODE HERE

            var radius=1, area, circum, ratio=0;;
            var radiusRef = document.getElementById("RadiusOutput");
            var ratioRef = document.getElementById("RatioOutput");
            var radiusOutput = "", ratioOutput = "";

            var newRatioLabel = document.createElement("Label");


            while (ratio<30)
                {
                circum = 2 * Math.PI  * radius;
                area = Math.PI * (radius * radius);
				ratio = area/circum;
                radiusOutput = radius;
                ratioOutput = ratio + "<br/>"

                // NEED TO DYNAMICALLY ADD TWO NEW LABELS HERE SO THAT MY RADIUS AND RATIO WILL BE PRINTED ON THE FOLLOWING LINE AS PER 		        LOOP
                var newLabel = document.createElement("label");
                newLabel.appendChild("")


                radius = radius + 1;
                }

            radiusRef.innerHTML = radiusOutput;
            ratioRfef.innerHTML = ratioOutput;


        </script>
    </body>
</html>