Getting integer values and one CSS class name [closed]

Posted on

Problem

Here, my function is getting four integer values and one CSS class name. Based on their equality I’m creating few more CSS proprties. If all four elements passed are different then I’m using default CSS properties.

How can make this code elegant? I wanted to get rid of if else conditions.

Note: I tried with switch statements too but I felt it’s the same as if else loops.

twoEqualElementsCss(cssClass1, cssClass2) {
var dict = {};
dict[cssClass1] = { padding: '12, 17' };
dict[cssClass2] = { padding: '12, 17', offset: '-2' };
return dict;
}

threeEqualElementsCss(cssClass1, cssClass2, cssClass3) {
var dict = {};
dict[cssClass1] = { padding: '12, 30', offset: '1' };
dict[cssClass2] = { padding: '12, 30', offset: '-14' };
dict[cssClass3] = { padding: '12, 30', offset: '-28' };
return dict;
}


 fourEqualElementsCss(cssClass1, cssClass2, cssClass3, cssClass4) {
var dict = {};
dict[cssClass1] = { padding: '12, 30', offset: '1' };
dict[cssClass2] = { padding: '12, 30', offset: '-14' };
dict[cssClass3] = { padding: '12, 30', offset: '-28' };
dict[cssClass3] = { padding: '12, 30', offset: '-42' };
return dict;
}

  //drawSomething is called this way from other function, which pass four values(integer) and one of the elements css class
 drawSomething(23, 26, 26, 26, element2-css);
 drawSomething(23, 26, 26, 26, element3-css);
 drawSomething(23, 26, 26, 26, element4-css);
 drawSomething(23, 26, 26, 26, element1-css);

 drawSomething(element1,element2, element3, element4, cssClassName) {

let padding = '5, 3' //default value  when all four elements are different
let offset = 100 //default value when all four elements are different
var equalElementDictionary = {}

// when 4 elements are same integer value
if (element1 == element2 && element2 == element3 && element3 == element4)
{
    //Note that each element has it's own predefined css class e.g element1 has element1-css class
    equalElementDictionary = this.fourEqualElementsCss('element1-css', 'element2-css', 'element3-css', 'element4-css')
} 
else if ((element1 == element2 && element2 === element4)) { // when 3 elements are equal. 
    equalElementDictionary = this.threeEqualElementsCss('element1-css', 'element2-css', 'element4-css')
} 
else if ((element1 == element3 && element3 === element4)) {
    equalElementDictionary = this.threeEqualElementsCss('element1-css', 'element3-css', 'element4-css')
}
else if ((element2 == element3 && element3 === element4)) {
    equalElementDictionary = this.threeEqualElementsCss('element2-css', 'element3-css', 'element4-css')
} 
else if (element4 == element1) { // when 2 elements are equal. 
    equalElementDictionary = this.twoEqualElementsCss('element4-css', 'element1-css')
} 
else if (element2 == element1) {
    equalElementDictionary = this.twoEqualElementsCss('element2-css', 'element1-css')
} 
else if (element4 == element3) {
    equalElementDictionary = this.twoEqualElementsCss('element4-css', 'element3-css')
} 
else if (element4 == element2) {
    equalElementDictionary = this.twoEqualElementsCss('element4-css', 'element2-css')
}

// when dicitionary does not have cssClassName that means all four elements are different and default values are passed to testFunction
if (equalElementDictionary[cssClassName] != undefined) {
      padding = equalElementDictionary[cssClassName].padding
  if (equalElementDictionary[cssClassName].offset != undefined) {
    padding = equalElementDictionary[cssClassName].offset
  }
}

testFunction(offset, padding)
}

Solution

First off, the question. Because some functionality is missing, I can’t test my proposed solution. Try to ask self contained questions.

A possible alternative approach is to analyze the 4 integer and keep track.

function keepTrack(info, integer, cssClass){
  info[integer] = info[integer] || [];
  info[integer].push(cssClass);  
} 

info = {};
keepTrack(info, element1, 'element1-css');
keepTrack(info, element2, 'element2-css');
keepTrack(info, element3, 'element3-css');
keepTrack(info, element4, 'element4-css');

This way you have a list of items for each, you can just check how many css items there are per length and call the correct function with spread syntax.

for(integer in info){
  //You could use a switch here
  if(info[integer].length == 4)
    fourEqualElementsCss(...info[integer]);
  else if(info[integer].length == 3) 
    threeEqualElementsCss(...info[integer]);
  else if(info[integer].length == 2) 
    twoEqualElementsCss(...info[integer]);
}

Leave a Reply

Your email address will not be published. Required fields are marked *