Final answer:
For calculating and displaying the average grade of three courses with conditional coloring, HTML, CSS, and JavaScript are used. The average is shown in green if it's below 80, and in red if it's 80 or above. The implementation requires user input collection, arithmetic operations, conditional logic, and DOM manipulation.
Step-by-step explanation:
To calculate the average grade of three courses and display the result with conditional coloring based on the average score, you'd typically use programming logic along with HTML and CSS for the web display. In this scenario, the user would enter their grades for course 1, 2, and 3. The total of these grades is calculated first, after which the average grade is determined by dividing the total by the number of courses, which is three. You then display the average in an HTML element with the id='avg'. If the average is below 80, you would display the average in green; otherwise, you display it in red color. This requires conditional logic that can be implemented in JavaScript and styled with CSS.
In a simplified form, the JavaScript code would be:
var grade1 = prompt('Enter grade for course 1:');
var grade2 = prompt('Enter grade for course 2:');
var grade3 = prompt('Enter grade for course 3:');
var total = parseInt(grade1) + parseInt(grade2) + parseInt(grade3);
var average = total / 3;
var color = average < 80 ? 'green' : 'red';
document.getElementById('avg').style.color = color;
document.getElementById('avg').innerHTML = average;
In this code, prompt() is used to collect user inputs, the total and average are calculated, and the ternary operator (?) is used for conditional assignment of the color based on the average grade.