I have this code that the truth is repeated, it only changes the names since they do the same but the difference is that I send to call different data and I would like to reduce that code
const times = truck["Fase 1"];
const [h, m, s] = times.split(":");
const minutes = parseInt(h) * 60 + parseInt(m) + s / 60;
const time = minutes;
const color = time <= 18 ? "#0CC234" : time < 30 ? "#FACE5A" : "#FF0101";
const Fase2 = truck["Fase 2"];
console.log({ Fase2 });
const [hs, ms, ss] = Fase2.split(":");
const minutesF2 = parseInt(hs) * 60 + parseInt(ms) + ss / 60;
const time2 = minutesF2;
const colors = time2 <= 18 ? "#0CC234" : time2 < 30 ? "#FACE5A" : "#FF0101";
I feel that the code repeats itself a lot and that it can be reduced, but I don't know how
You can move the repeated part to the function:
const truck = {
'Fase 1': '11:22:33',
'Fase 2': '11:22:33',
};
function getColor (fase) {
const [h, m, s] = truck[fase].split(':');
const timeInMinutes = parseInt(h) * 60 + parseInt(m) + s / 60;
const color = timeInMinutes <= 18 ? "#0CC234" : timeInMinutes < 30 ? "#FACE5A" : "#FF0101";
return color;
}
console.log(getColor('Fase 1'));
console.log(getColor('Fase 2'));Split out shared data into their own functions: getTime, getMinutes, and getColor. You can then access them for each truck.
function getTime(time) {
return time.split(":");
}
function getMinutes([h, m, s]) {
// I had to adjust this calculation so that
// it returns a number that correlates to the
// conditions in `getColors`
return Math.round((parseInt(h) * 60 + parseInt(m) + parseInt(s)) / 60);
}
function getColor(minutes) {
if (minutes <= 18) return '#0CC234';
if (minutes <= 30) return '#FACE5A';
return '#FF0101';
}
const time = getTime('3:45:12');
const minutes = getMinutes(time);
const color = getColor(minutes);
console.log(color)
const time2 = getTime('34:12:00');
const minutes2 = getMinutes(time2);
const color2 = getColor(minutes);
console.log(color2);You could also use a class:
class Truck {
constructor(name, time) {
this.name = name;
this.time = this.getTimes(time);
this.minutes = this.getMinutes(this.time);
console.log(this.minutes)
this.color = this.getColor(this.minutes);
}
getTimes(time) {
return time.split(":");
}
getMinutes([h, m, s]) {
return Math.round((parseInt(h) * 60 + parseInt(m) + parseInt(s)) / 60);
}
getColor() {
if (this.minutes <= 18) return '#0CC234';
if (this.minutes <= 30) return '#FACE5A';
return '#FF0101';
}
}
const fase1 = new Truck('Fase1', '12:2:12');
console.log(fase1.name);
console.log(fase1.time);
console.log(fase1.minutes);
console.log(fase1.color);There is a few unneeded variables.
const [h, m, s] = truck["Fase 1"].split(":");
const minutes = parseInt(h) * 60 + parseInt(m) + s / 60;
const color = minutes <= 18 ? "#0CC234" : minutes < 30 ? "#FACE5A" : "#FF0101";
const [hs, ms, ss] = truck["Fase 2"].split(":");
const minutesF2 = parseInt(hs) * 60 + parseInt(ms) + ss / 60;
const colors = minutesF2 <= 18 ? "#0CC234" : minutesF2 < 30 ? "#FACE5A" : "#FF0101";