Member Avatar for bwin

Hi all! So I have created this for my first portion of my Beginning CIS class project, calculating the final grade based on scores. For the next step, the user must be able to enter in their own number of projects they have completed, and from that, be able to put individual scores in that number of projects they entered. (For example, if they say they did 5 projects, they then individually write the number grade of each project). Then, the final letter grade is computed based on all the information.

I'm totally stuck and don't know where to begin to add that in. Could anyone help me out? Here is my code for the first portion, without the dynamic input text add-in:

<html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Grade Calculator</title>
            </head>
    <body>
        <h1>Grade Calculator</h1>
        <p>Enter only whole numbers.</p>
        <form name="Grade Calculator" id="form">
            <p>
                <label for="homework">Homework:</label>
                <input type="text" id="homework" value="" name="Homework" size="3"
                maxlength="3">
            </p>
            <p>
                <label for="projects">Projects:</label>
                <input type="text" id="projects" value="" name="Projects" size="3"
                maxlength="3">
            </p>
            <p>
                <label for="midterm">Midterm:</label>
                <input type="text" id="midterm" value="" name="Midterm"
                        size="3" maxlength="3">
            </p>
            <p>
                <label for="final">Final:</label>
                <input type="text" id="final" value="" name="Final"
                        size="3" maxlength="3">
            </p>
                      <p class="h-line"></p>
            <p>
                <label for="final-grade">Final Grade (Letter Grade):</label>
                <input type="text" name="Final Grade" id="final-grade" value="" 
                        size="7" readonly="readonly" tabindex="-1">
            </p>
            <p>
                <input type="button" value="Calculate" onclick="calcGrade();">
                <input type="reset" value="Reset">
            </p>
        </form>
    <script type="text/javascript">
        function calcGrade() {
            var form = document.getElementById("form");
            var finalGrade = document.getElementById("final-grade");
            var input;
            var i = 4;
            var grade = [];


            while (i--) {
                input = form.elements[i].value;
                if (parseInt(input, 10)) {
                    input = parseInt(input, 10);
                    form.elements[i].value = input;
                    if (input <= 100 && input >= 0) {
                        grade[i] = input;
                    } else {
                        if (input > 100) {
                            grade[i] = 100;
                            form.elements[i].value = "100";
                        } else {
                            if (input < 0) {
                                grade[i] = 0;
                                form.elements[i].value = "0";
                            }
                        }
                    }
                } else {
                    grade[i] = 0;
                    form.elements[i].value = "0";
                }    
            }


            grade[4] = Math.round((grade[0] * 0.2) + (grade[1] * 0.25) + 
                    (grade[2] * 0.2) + (grade[3] * 0.35));

            if (grade[4] < 60) {
                finalGrade.value = (grade[4] + " (F)");
                return;
            }
            if (grade[4] >= 60 && grade[4] < 70) {
                finalGrade.value = (grade[4] + " (D)");
                return;
            }
            if (grade[4] >= 70 && grade[4] < 80) {
                finalGrade.value = (grade[4] + " (C)");
                return;
            }
            if (grade[4] >= 80 && grade[4] < 90) {
                finalGrade.value = (grade[4] + " (B)");
                return;
            }
            if (grade[4] >= 90) {
                finalGrade.value = (grade[4] + " (A)");
            }  
        }
    </script>
    </body>
</html>


    <meta charset="utf-8">
    <title>Grade Calculator</title>
        </head>
<body>
    <h1>Grade Calculator</h1>
    <p>Enter only whole numbers.</p>
    <form name="Grade Calculator" id="form">
        <p>
            <label for="homework">Homework:</label>
            <input type="text" id="homework" value="" name="Homework" size="3"
            maxlength="3">
        </p>
        <p>
            <label for="projects">Projects:</label>
            <input type="text" id="projects" value="" name="Projects" size="3"
            maxlength="3">
        </p>
        <p>
            <label for="midterm">Midterm:</label>
            <input type="text" id="midterm" value="" name="Midterm"
                    size="3" maxlength="3">
        </p>
        <p>
            <label for="final">Final:</label>
            <input type="text" id="final" value="" name="Final"
                    size="3" maxlength="3">
        </p>
                  <p class="h-line"></p>
        <p>
            <label for="final-grade">Final Grade (Letter Grade):</label>
            <input type="text" name="Final Grade" id="final-grade" value="" 
                    size="7" readonly="readonly" tabindex="-1">
        </p>
        <p>
            <input type="button" value="Calculate" onclick="calcGrade();">
            <input type="reset" value="Reset">
        </p>
    </form>
<script type="text/javascript">
    function calcGrade() {
        var form = document.getElementById("form");
        var finalGrade = document.getElementById("final-grade");
        var input;
        var i = 4;
        var grade = [];


        while (i--) {
            input = form.elements[i].value;
            if (parseInt(input, 10)) {
                input = parseInt(input, 10);
                form.elements[i].value = input;
                if (input <= 100 && input >= 0) {
                    grade[i] = input;
                } else {
                    if (input > 100) {
                        grade[i] = 100;
                        form.elements[i].value = "100";
                    } else {
                        if (input < 0) {
                            grade[i] = 0;
                            form.elements[i].value = "0";
                        }
                    }
                }
            } else {
                grade[i] = 0;
                form.elements[i].value = "0";
            }    
        }


        grade[4] = Math.round((grade[0] * 0.2) + (grade[1] * 0.25) + 
                (grade[2] * 0.2) + (grade[3] * 0.35));

        if (grade[4] < 60) {
            finalGrade.value = (grade[4] + " (F)");
            return;
        }
        if (grade[4] >= 60 && grade[4] < 70) {
            finalGrade.value = (grade[4] + " (D)");
            return;
        }
        if (grade[4] >= 70 && grade[4] < 80) {
            finalGrade.value = (grade[4] + " (C)");
            return;
        }
        if (grade[4] >= 80 && grade[4] < 90) {
            finalGrade.value = (grade[4] + " (B)");
            return;
        }
        if (grade[4] >= 90) {
            finalGrade.value = (grade[4] + " (A)");
        }  
    }
</script>
</body>

</html>

  • 2 Contributors
  • 1 Reply
  • 2K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Troy III
Member Avatar for Troy III

That's nice
have you seen this:
http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/415888/if-statement-javascript#post1775237

    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Grade Calculator</title>
            <style type="text/css">
                body {
                    font-family: Arial, sans-serif;
                    text-align: center;
                }
                form {
                    width: 300px;
                    margin: 0 auto;
                    text-align: right;
                }
                .h-line {
                    background-color: black;
                    margin: 2px auto;
                    width: 100%;
                    height: 2px;
                }
                input {
                    text-align: right;
                }
            </style>
        </head>
        <body>
            <h1>Grade Calculator</h1>
            <p>Enter only whole numbers.</p>
            <form name="Grade Calculator" id="form">
                <p>
                    <label for="test1">Test #1 Grade:</label>
                    <input type="text" id="test1" value="" name="Test #1" size="3"
                    maxlength="3">
                </p>

                <p class="h-line"></p>
                <p>
                    <label for="final-grade">Final Grade (Letter Grade):</label>
                    <input type="text" name="Final Grade" id="final-grade" value=""
                            size="7" >
                </p>
                <p>
                    <input type="button" value="Calculate" onclick="calcGrade();">
                    <input type="reset" value="Reset">
                </p>
            </form>
        <script type="text/javascript">

            function calcGrade() {
                var form = document.getElementById("form");
                var finalGrade = document.getElementById("final-grade");
                var field = form.elements['test1'];     
        var input = field.value, grade, max = 100, min = 0;

        input = parseInt(input, 10)
            field.value = 
            grade = input > max ? grade = max : 
                input < min ? grade = min : 
                input;
            finalGrade.value =
                (grade < 60) ? "F" :
                (grade < 70) ? "D" :
                (grade < 80) ? "C" :
                (grade < 90) ? "B" :
                (grade <=100) ? "A" : "!";
        }
        </script>
        </body>
    </html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.