trjhtr

This code works fine and outputs the expected result. It is a small part of a larger program I'm working on to calculate personal inflation. I feel there is a better or more elegant way do this. I am trying to improve my programming logic skills so I hope its ok to ask for this kind of help.

I'm taking two arrays, both with 12 decimal numbers, dividing them by each other which will return an answer that is either above or below 1. I'm updating the above and below variables accordingly as counters. Then the conditional statements at the bottom are deciding which variable (above, below, avg) to be set to true. Based on which is true an arrow will be displayed as up, down or straight.

let personalCPI = [99.8, 100.8, 101.9, 
 102.1, 102.1, 101.9, 
 101.7, 102.5, 102.5, 
 102.6, 102.1, 102.2];

const nationalCPI = [99.5, 100.4, 101.4, 
 101.4, 101.4, 101.2, 
 101.1, 101.7, 101.6, 
 101.5, 101.1, 101.2]; 


let index;
let avg;
let above = 0;
let below = 0;

for (let i = 0; i < personalCPI.length; i++) 
 index = personalCPI[i] / nationalCPI[i];
 if (index > 1) 
 above += 1;
 else if (index < 1) 
 below += 1;
 


if (above > below) 
 above = true;
 below = false;
 else if (above >= 5 && above < 7 || below >= 5 && below < 7) 
 avg = true;
 above = false;
 below = false;
 else 
 below = true;
 above = false;


console.log(above);
console.log(below);
console.log(avg);

if (avg) 
 $("#inflation").attr("title", "Inflation is affecting you close to the 
 National Average");
 $("#inflation").html('<i class="fas fa-arrows-alt-h fa-2x"></i>');
 else if (below) 
 $("#inflation").attr("title", "Inflation is affecting you below the 
 National Average");
 $("#inflation").html('<i class="fas fa-arrow-down fa-2x"></i>');
 else if (above) 
 $("#inflation").attr("title", "Inflation is affecting you above the 
 National Average");
 $("#inflation").html('<i class="fas fa-arrow-up fa-2x"></i>');