3
\$\begingroup\$

My school has a special 65% formal 35% informal weighting, so I made something to find what your grade would be if you added or changed a grade. http://retep-mathwizard.github.io/gradecalc/gradecalc.html

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title> Grade Calculator</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="gradecalc.css">
    <script type="text/javascript" src="gradecalc.js"></script>
  </head>
  <body>
    <h1>Grade Calculator</h1>
    <input id="ing" placeholder="Informal grades, seperate by commas."><br>
    <input id="fog" placeholder="Formal grades, seperate by commas."><br>
    <input type="radio" name='type' onclick="changeoldgradedisplay()" id='radio_new_grade' >New<br>
    <input type="radio" name='type' onclick="changeoldgradedisplay()" id='radio_old_grade' checked>Change<br>
    <input id="old_grade_input" display='none' placeholder="old grade">
    <input id="new_grade_input" placeholder="new grade"><br>
    <input type="radio" name='gradetype' id='informal_radio'>Informal<br>
    <input type="radio" name='gradetype' id='formal_radio' checked>Formal<br>
    <button onclick="add_grades()" > Go </button>
    <p id='previous_grade'></p>
    <p id='new_grade'></p>
  </body>
</html>

CSS:

#fog, #ing {

  width: 300px;
}

JS:

function changeoldgradedisplay() {
    if (document.getElementById('radio_old_grade').checked) {
        document.getElementById('old_grade_input').style.display = 'block';
    } else {
        document.getElementById('old_grade_input').style.display = 'none';
    }
}
function get_average(items) {
    var sum = 0;
    var len = items.length;
    for (var i = 0; i < len; i++) {
        sum += parseFloat(items[i]);
    }
    return sum/len;
}

function add_grades() {
    var formal_grades = document.getElementById('fog').value.split(',');
    var informal_grades = document.getElementById('ing').value.split(',');
    var previous_grade = (get_average(formal_grades) * .65) + (get_average(informal_grades) * .35);

    document.getElementById('previous_grade').innerHTML = 'Estimate of previous grade - ' + previous_grade.toFixed(2);

    var is_formal = document.getElementById('formal_radio').checked;
    var gradelist = null;

    if (is_formal) {
        new_grade = document.getElementById("new_grade_input").value;
        if (document.getElementById('radio_old_grade').checked) {
            old_grade = document.getElementById("old_grade_input").value;
            formal_grades[formal_grades.indexOf(old_grade)] = new_grade
        } else {
            formal_grades.push(new_grade);
        }
    } else {
        new_grade = document.getElementById("new_grade_input").value;
        if (document.getElementById('radio_old_grade').checked) {
            old_grade = document.getElementById("old_grade_input").value;
            informal_grades[informal_grades.indexOf(old_grade)] = new_grade
        } else {
            informal_grades.push(new_grade);
        }
    }

    var new_grade = (get_average(formal_grades) * .65) + (get_average(informal_grades) * .35);
    document.getElementById('new_grade').innerHTML = 'Estimate of new grade - ' + new_grade.toFixed(2);
}
\$\endgroup\$
4
\$\begingroup\$

A couple of minor things:

  • fog and ing aren't very meaningful id names, they would be better as something like formal_grades and informal_grades instead.

  • This part of the code:

var is_formal = document.getElementById('formal_radio').checked;    
var gradelist = null;

if (is_formal) {
    new_grade = document.getElementById("new_grade_input").value;
    if (document.getElementById('radio_old_grade').checked) {
        old_grade = document.getElementById("old_grade_input").value;
        formal_grades[formal_grades.indexOf(old_grade)] = new_grade
    } else {
        formal_grades.push(new_grade);
    }
} else {
    new_grade = document.getElementById("new_grade_input").value;
    if (document.getElementById('radio_old_grade').checked) {
        old_grade = document.getElementById("old_grade_input").value;
        informal_grades[informal_grades.indexOf(old_grade)] = new_grade
    } else {
        informal_grades.push(new_grade);
    }
}

repeats very similar code where the only difference is which array is used. Also, gradelist isn't used anywhere. You can avoid the repetition like this:

var is_formal = document.getElementById('formal_radio').checked;
var gradelist = is_formal ? formal_grades : informal_grades;

new_grade = document.getElementById("new_grade_input").value;
if (document.getElementById('radio_old_grade').checked) {
    old_grade = document.getElementById("old_grade_input").value;
    gradelist[gradelist.indexOf(old_grade)] = new_grade
} else {
    gradelist.push(new_grade);
}

by assigning the array that needs to be used to gradelist.

This works because when you assign an array (or any object) to a variable in javascript, it assigns the reference to the array instead of copying the value. For example, if formal_grades is assigned to gradelist they will both refer to the same array.

\$\endgroup\$
  • \$\begingroup\$ fog stands for formal grades, ing stands for informal grades \$\endgroup\$ – lol Jan 19 '17 at 17:02
  • \$\begingroup\$ Also, I thought of assigning a gradelist, but later I recalculate using both lists, and I couldn't differentiate between the 2. (var new_grade = (get_average(formal_grades) * .65) + (get_average(informal_grades) * .35);) \$\endgroup\$ – lol Jan 19 '17 at 17:24
  • 1
    \$\begingroup\$ Sorry I must have missed that! I'll modify my answer. I understood why they were called fog and ing, but I would still recommend not shortening them just for clarity. \$\endgroup\$ – Bethan Jan 20 '17 at 8:57
  • \$\begingroup\$ I've added an explanation about how assigning to gradelist would work, let me know if I haven't explained it well enough \$\endgroup\$ – Bethan Jan 20 '17 at 10:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.