Question

In: Computer Science

How to create a JS application using the code below that displays the lists of grades...

How to create a JS application using the code below that displays the lists of grades in their corresponding letter grade textbox and each grade being sorted from lowest to highest.

<!DOCTYPE>
<html>
<head>
<title>EXAM01_03</title>
<style type="text/css">
form{color:black;background-color:lightgray;border:6px solid black;border-width:4px;width:450px;margin:1px;padding:1px;}
#ans1,#ans2,#ans3,#ans4,#ans5,#numbers{background-color:white;border:4px solid black;}
input[type="button"]{color:black;background-color:red;border:4px solid black;}
input[type="text"]{margin:2px;}
div.title{color:white;background-color:black;float: left; width: 450px; text-align:center;}
</style>
</head>
<body>
   <form>
   <div class="title"><label>EXAM01_03</label></div>
   <p style="clear:both;" />
   <div style="float:left;width:150px;"><label>Enter Grade List:</label></div><div style="float:left;"><input type="text" id="numbers" /></div>
   <p style="clear:both;" />
   <div style="float:left;width:150px;"><label>A:</label></div><div style="float:left;"><input type="text" id="ans1" /></div>
   <p style="clear:both;" />
   <div style="float:left;width:150px;"><label>B:</label></div><div style="float:left;"><input type="text" id="ans2" /></div>
   <p style="clear:both;" />
   <div style="float:left;width:150px;"><label>C:</label></div><div style="float:left;"><input type="text" id="ans3" /></div>
   <p style="clear:both;" />
   <div style="float:left;width:150px;"><label>D:</label></div><div style="float:left;"><input type="text" id="ans4" /></div>
   <p style="clear:both;" />
   <div style="float:left;width:150px;"><label>F:</label></div><div style="float:left;"><input type="text" id="ans5" /></div>
   <p style="clear:both;" />
   <div style="text-align:center;">
   <input type="button" value="Enter" />
   <input type="button" value="Clear"    />
   </div>
   </form>
</body>
</html>

Solutions

Expert Solution

Below is the complete code. The inserted code has been highlighted in bold. It is well explained inside the code using comments.

<!DOCTYPE>
<html>
<head>
    <title>EXAM01_03</title>
    <style type="text/css">
        form {
            color: black;
            background-color: lightgray;
            border: 6px solid black;
            border-width: 4px;
            width: 450px;
            margin: 1px;
            padding: 1px;
        }

        #ans1, #ans2, #ans3, #ans4, #ans5, #numbers {
            background-color: white;
            border: 4px solid black;
        }

        input[type="button"] {
            color: black;
            background-color: red;
            border: 4px solid black;
        }

        input[type="text"] {
            margin: 2px;
        }

        div.title {
            color: white;
            background-color: black;
            float: left;
            width: 450px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        // declare array of each grade to store grades
        AGrades = [];
        BGrades = [];
        CGrades = [];
        DGrades = [];
        FGrades = [];

        // this function will add to the corresponding array
        function fillArrays(grade) {
            if (grade > 90)
                AGrades.push(grade);
            else if (grade > 80)
                BGrades.push(grade);
            else if (grade > 70)
                CGrades.push(grade);
            else if (grade > 60)
                DGrades.push(grade);
            else
                FGrades.push(grade);
        }

        function calculate() {
            // get grades text from the grade list
            gradesText = document.getElementById('numbers').value;

            // check if grades text is not empty
            if (gradesText.trim() == '') {
                alert('Please enter the grades in the list');
            }

            // split the grades into an array
            grades = gradesText.split(' ');

            // get the corresponding letter grades and add to the corrresponding textbox
            for (var i = 0; i < grades.length; i++) {
                // call function to add to corresponding array
                fillArrays(grades[i]);
            }
          
            // sort the arrays
            AGrades.sort();
            BGrades.sort();
            CGrades.sort();
            DGrades.sort();
            FGrades.sort();

            // fill grades the corrresponding textboxes
            document.getElementById('numbers').value = AGrades;
            document.getElementById('ans2').value = BGrades;
            document.getElementById('ans3').value = CGrades;
            document.getElementById('ans4').value = DGrades;
            document.getElementById('ans5').value = FGrades;
        }

        // this function clears the input boxes
        function clearAll() {
            document.getElementById('numbers').value = '';
            document.getElementById('ans1').value = '';
            document.getElementById('ans2').value = '';
            document.getElementById('ans3').value = '';
            document.getElementById('ans4').value = '';
            document.getElementById('ans5').value = '';
        }
    </script>
</head>
<body>
    <form>
        <div class="title"><label>EXAM01_03</label></div>
        <p style="clear:both;" />
        <div style="float:left;width:150px;"><label>Enter Grade List:</label></div><div style="float:left;"><input type="text" id="numbers" /></div>
        <p style="clear:both;" />
        <div style="float:left;width:150px;"><label>A:</label></div><div style="float:left;"><input type="text" id="ans1" /></div>
        <p style="clear:both;" />
        <div style="float:left;width:150px;"><label>B:</label></div><div style="float:left;"><input type="text" id="ans2" /></div>
        <p style="clear:both;" />
        <div style="float:left;width:150px;"><label>C:</label></div><div style="float:left;"><input type="text" id="ans3" /></div>
        <p style="clear:both;" />
        <div style="float:left;width:150px;"><label>D:</label></div><div style="float:left;"><input type="text" id="ans4" /></div>
        <p style="clear:both;" />
        <div style="float:left;width:150px;"><label>F:</label></div><div style="float:left;"><input type="text" id="ans5" /></div>
        <p style="clear:both;" />
        <div style="text-align:center;">
            <input type="button" value="Enter" onclick="calculate()" />
            <input type="button" value="Clear" onclick="clearAll()"/>
        </div>
    </form>
</body>
</html>

Below is the sample output:

This completes the requirement. Let me know if you have any questions.

Thanks!

venereology answered 5 days ago
Next > < Previous

Related Solutions

Using Java create an application that will read a tab-delimited file that displays the MLB standings...
Using Java create an application that will read a tab-delimited file that displays the MLB standings Below: League AL East Tampa Bay 37 20 NY Yankees 32 24 Toronto 29 27 Baltimore 23 33 Boston 22 34 League AL Central Minnesota 35 22 Chi White Sox 34 23 Cleveland 33 24 Kansas City 23 33 Detroit 22 32 League AL West Oakland 34 21 Houston 28 28 LA Angels 26 31 Seattle 25 31 Texas 19 37 League NL East...
Create an Java application that uses a class to convert number grades to letter grades and...
Create an Java application that uses a class to convert number grades to letter grades and another class for data validation. Specifications The Grade class should have only one Instance Variable of type int. Use a class named Grade to store the data for each grade. This class should include these three methods:   public void setNumber(int number)   public int getNumber()   public String getLetter() The Grade class should have two constructors. The first one should accept no parameters and set the...
Create a PowersTable application that displays a table of of powers. ( Java Programing )
Create a PowersTable application that displays a table of of powers. ( Java Programing )
please create a calculator using p5.js web editor. Please make sure it works with only js....
please create a calculator using p5.js web editor. Please make sure it works with only js. No added html or css; p5.js only
please create a calculator using p5.js web editor. Please make sure it works with only js....
please create a calculator using p5.js web editor. Please make sure it works with only js. No added html or css; p5.js only. PLEASE MAKE SURE IT WORKS
Create a CubesSum application that prompts the user for a non-negative integer and then displays the...
Create a CubesSum application that prompts the user for a non-negative integer and then displays the sum of the cubes of the digits.   b) Modify the application to determine what integers of two, three, and four digits are equal to the sum of the cubes of their digits.(Java Programming )
Create an application that calculates and displays the amount of a homeowner’s property tax. The tax...
Create an application that calculates and displays the amount of a homeowner’s property tax. The tax is 1.35% of the property’s assessed value, which will be entered by the user. a. Prepare a Planning Chart for the application. b. Draw a sketch of an appropriate interface. Be sure to follow the GUI design guidelines covered in the chapter. The guidelines are summarized in Figure 2-20. (If you want to include an image in the interface, you can either use your...
In C# Create a GUI application that calculates and displays the total travel expenses of a...
In C# Create a GUI application that calculates and displays the total travel expenses of a business person on a trip. Here is the information that the user must provide: Number of days on the trip Amount of airfare, if any Amount of car rental fees, if any Number of miles driven, if a private vehicle was used Amount of parking fees, if any Amount of taxi charges, if any Conference or seminar registration fees, if any Lodging charges, per...
Create a GUI application in C# that calculates and displays the total travel expenses of a...
Create a GUI application in C# that calculates and displays the total travel expenses of a business person on a trip. Here is the information that the user must provide: • Number of days on the trip • Amount of airfare, if any • Amount of car rental fees, if any • Number of miles driven, if a private vehicle was used • Amount of parking fees, if any • Amount of taxi charges, if any • Conference or seminar...
Java Please comment code Create an Interactive JavaFX Application Create an application with the following controls:...
Java Please comment code Create an Interactive JavaFX Application Create an application with the following controls: A Label control with the following text displayed: "First Number:" A Label control with the following text displayed: "Second Number:" An empty TextField control beside the First Number label. An empty TextField control beside the Second Number label. Five buttons: Button 1 labeled + Button 2 labeled - Button 3 labeled * Button 4 labeled / Button 5 labeled = An empty Label control...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT