Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Cameron Maciel
Cameron Maciel
1,433 Points
Posted by Cameron Maciel
Cameron Maciel
1,433 Points

Anyone know how i could make this more simplier 

            var inputNum_of_Shirts = $('#shirts').val();
            var inputNum_of_FColor = $('#colorsOnFront').val();
            var inputNum_of_BColor = $('#colorsOnBack').val();


            if (inputNum_of_Shirts <=30 && inputNum_of_FColor == 1 ){
                var shirtsPrice = 3;
                var OneColorPrice= 5.50;
                var totalCost = (inputNum_of_Shirts*parseFloat(shirtsPrice))
                +(parseFloat(OneColorPrice)*inputNum_of_Shirts);
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(OneColorPrice)*inputNum_of_FColor)
                +(parseFloat(OneColorPrice)*inputNum_of_BColor);
        }
            if (inputNum_of_Shirts <=30 && inputNum_of_FColor == 2 ){
                var shirtsPrice = 3;
                var TwoColorPrice= 8.18;
                var totalCost = (inputNum_of_Shirts*parseFloat(TwoColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(TwoColorPrice));

        }
            if (inputNum_of_Shirts >30 <=49 && inputNum_of_FColor == 1 ){
                var shirtsPrice = 3;
                var One2ColorPrice= 4.48;
                var totalCost = (inputNum_of_Shirts*parseFloat(One2ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(One2ColorPrice));

        }
        if (inputNum_of_Shirts >30 <=49 && inputNum_of_FColor == 2 ){
                var shirtsPrice = 3;
                var Two2ColorPrice= 5.33;
                var totalCost = (inputNum_of_Shirts*parseFloat(Two2ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(Two2ColorPrice));

        }

        if (inputNum_of_Shirts >30 <=49 && inputNum_of_FColor == 3 ){
                var shirtsPrice = 3;
                var Three2ColorPrice= 6.18;
                var totalCost = (inputNum_of_Shirts*parseFloat(Three2ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(Three2ColorPrice));

        }
        if (inputNum_of_Shirts >49 <=99 && inputNum_of_FColor == 1 ){
                var shirtsPrice = 3;
                var One3ColorPrice= 3.05;
                var totalCost = (inputNum_of_Shirts*parseFloat(One3ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(One3ColorPrice));

        }
        if (inputNum_of_Shirts >49 <=99 && inputNum_of_FColor == 2 ){
                var shirtsPrice = 3;
                var Two3ColorPrice= 3.43;
                var totalCost = (inputNum_of_Shirts*parseFloat(Two3ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(Two3ColorPrice));

        }
        if (inputNum_of_Shirts >49 <=99 && inputNum_of_FColor == 3 ){
                var shirtsPrice = 3;
                var Three3ColorPrice= 3.90;
                var totalCost = (inputNum_of_Shirts*parseFloat(Three3ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(Three3ColorPrice));

        }
            if (inputNum_of_Shirts >49 <=99 && inputNum_of_FColor == 4 ){
                var shirtsPrice = 3;
                var Four3ColorPrice= 4.23;
                var totalCost = (inputNum_of_Shirts*parseFloat(Four3ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(Four3ColorPrice));

        }
            if (inputNum_of_Shirts >99 <=199 && inputNum_of_FColor == 1 ){
                var shirtsPrice = 3;
                var One4ColorPrice= 2.15;
                var totalCost = (inputNum_of_Shirts*parseFloat(One4ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(One4ColorPrice));

        }
            if (inputNum_of_Shirts >99 <=199 && inputNum_of_FColor == 2 ){
                var shirtsPrice = 3;
                var Two4ColorPrice= 2.43;
                var totalCost = (inputNum_of_Shirts*parseFloat(Two4ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(Two4ColorPrice));

        }
            if (inputNum_of_Shirts >99 <=199 && inputNum_of_FColor == 3 ){
                var shirtsPrice = 3;
                var Three4ColorPrice= 2.78;
                var totalCost = (inputNum_of_Shirts*parseFloat(Three4ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(Three4ColorPrice));

        }
            if (inputNum_of_Shirts >99 <=199 && inputNum_of_FColor == 4 ){
                var shirtsPrice = 3;
                var Four4ColorPrice= 3.13;
                var totalCost = (inputNum_of_Shirts*parseFloat(Four4ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(Four4ColorPrice));

        }

            if (inputNum_of_Shirts >199 <=499 && inputNum_of_FColor == 1 ){
                var shirtsPrice = 3;
                var One5ColorPrice= 1.68;
                var totalCost = (inputNum_of_Shirts*parseFloat(One5ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(One5ColorPrice));

        }
            if (inputNum_of_Shirts >199 <=499 && inputNum_of_FColor == 2 ){
                var shirtsPrice = 3;
                var Two5ColorPrice= 1.93;
                var totalCost = (inputNum_of_Shirts*parseFloat(Two5ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(Two5ColorPrice));

        }
            if (inputNum_of_Shirts >199 <=499 && inputNum_of_FColor == 3 ){
                var shirtsPrice = 3;
                var Three5ColorPrice= 2.18;
                var totalCost = (inputNum_of_Shirts*parseFloat(Three5ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(Three5ColorPrice));

        }
            if (inputNum_of_Shirts >199 <=499 && inputNum_of_FColor == 4 ){
                var shirtsPrice = 3;
                var Four5ColorPrice= 2.43;
                var totalCost = (inputNum_of_Shirts*parseFloat(Four5ColorPrice))
                +(inputNum_of_Shirts*parseFloat(shirtsPrice));
                var perShirtCost = (parseFloat(shirtsPrice))
                +(parseFloat(Four5ColorPrice));

        }

4 Answers

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

Hi Cameron, looks like Gilbert already answered but heres another method...

This sounded like fun, so I had a crack at it. I have put your pricing structure into an Array and the Costing into a Function so it can be reused.

var pricing = {
    base : 3,
    structure : [
        { min:0,   max:30,  cost:[0, 5.50, 8.18] },
        { min:30,  max:49,  cost:[0, 4.48, 5.33, 6.18] },
        { min:49,  max:99,  cost:[0, 3.05, 3.43, 3.90, 4.23] },
        { min:99,  max:199, cost:[0, 2.15, 2.43, 2.78, 3.13] },
        { min:199, max:499, cost:[0, 1.68, 1.93, 2.18, 2.43] }
    ]
};

// Get Price
// -- Receives an object with parameters
// @ shirts
// @ front
// @ back
function getPrice(request) {
    for (var i=0; i<pricing.structure.length; i++) {
        // Target the object > this just helps define what we're looking at
        var priceRange = pricing.structure[i];
        // Are shirts within range
        if (request.shirts > priceRange.min && request.shirts <= priceRange.max) {
            // Get the front and back prices
            var frontPrice = pricing.structure[i].cost[request.front];
            var backPrice = pricing.structure[i].cost[request.back];
            // Find single shirt cost
            var perShirt = pricing.base + frontPrice + backPrice;
            // Total cost
            var totalCost = parseFloat(perShirt * request.shirts).toFixed(2);
            console.log("Shirts:"+request.shirts+" | Front:"+request.front+" | Back:"+request.back +" == $"+totalCost);
            return totalCost;
        }
    }
}

// Tests
getPrice({ shirts:inputNum_of_Shirts, front:inputNum_of_FColor, back:inputNum_of_BColor });
getPrice({ shirts:1, front:1, back:0 });
getPrice({ shirts:1, front:0, back:2 });
getPrice({ shirts:1, front:1, back:2 });
getPrice({ shirts:15, front:2, back:1 });
getPrice({ shirts:37, front:1, back:2 });
getPrice({ shirts:37, front:2, back:3 });
getPrice({ shirts:60, front:2, back:1 });
getPrice({ shirts:300, front:1, back:1 });
Cameron Maciel
Cameron Maciel
1,433 Points
Cameron Maciel
Cameron Maciel
1,433 Points

Wow thank you so much. That's amazing

Damien Watson
Damien Watson
27,419 Points
Damien Watson
Damien Watson
27,419 Points

No probems, thanks for the challenge ;)

Just realised I have defined 'priceRange' but didn't use it in getting the 'front' and 'back' prices. The below does the same thing, but a little cleaner:

// replace
            // Get the front and back prices
            var frontPrice = pricing.structure[i].cost[request.front];
            var backPrice = pricing.structure[i].cost[request.back];
// with :
            // Get the front and back prices
            var frontPrice = priceRange.cost[request.front];
            var backPrice = priceRange.cost[request.back];
Gilbert Kennen
Gilbert Kennen
10,661 Points
Gilbert Kennen
Gilbert Kennen
10,661 Points

There are a few weird things in this code.

First, you are calling parseFloat a bunch of times on numbers you have entered. The parseFloat function is for extracting floats from strings.

Second, don't get in the habit of storing money as floats. Floats have precision problems which crop up unexpectedly and are extremely difficult to discover. In JavaScript your option is to use an integer (e.g. 550 to represent 5.50) and then fix it when you display the value.

Third, in any given scope you should only declare a variable with var once. These if statements are all in the same scope and declare a bunch of variables with the same name. Yes, I can tell that they are mutually exclusive, but you really should extract the var declaration outside.

Finally, the calculations here all seem odd, particularly the perShirtCost calculations. I would expect the totalCost to be equal to the perShirtCost * inputNum_of_Shirts, but I know so little about the context.

Here is a quick re-write of the code into something which is a bit more sane.

var inputNum_of_Shirts = parseInt( $('#shirts').val() );
var inputNum_of_FColor = parseInt( $('#colorsOnFront').val() );
var inputNum_of_BColor = parseInt( $('#colorsOnBack').val() );
var shirtPrice = 3;
var perShirtCost;
var totalCost;


/*
find the tier of the size of the order starting with 0 for <= 30
if the size is too large, this function currently will return undefined,
so it would be a good idea to check for that in a live application
*/
function orderSizeTier(orderSize) {
  var tiers = [0, 30, 49, 99, 199, 499];
  for (var i = 1; i < tiers.length; i++) {
    if (orderSize > tiers[i-1] && orderSize <= tiers[i]) {
      return (i - 1);
    }
    return undefined;
  }
}

/*
2d array of type [orderSizeTier(size)][fColorNumber - 1]
if the order doesn't have a listed price you will get undefined which should
also be accounted for
*/
var printPrices =
      [
        [550, 818],           // <= 30
        [448, 533, 618],      // <= 49
        [305, 343, 390, 423], // <= 99
        [215, 243, 278, 313], // <= 199
        [168, 193, 218, 243], // <= 499
      ];

var printPrice =
      printPrices[orderSizeTier(inputNum_of_Shirts)][inputNum_of_FColor - 1];

perShirtCost = shirtPrice + ( printPrice * inputNum_of_FColor );

if (inputNum_of_Shirts <= 30) {
  perShirtCost += ( printPrice * inputNum_of_BColor );
}

totalCost = inputNum_of_Shirts * ( printPrice + shirtPrice );

The big thing which simplifies things here is storing the printPrice information in a structured data table. To make that work I needed to normalize the pricing tiers.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,243 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,243 Points

You want start by putting all this repeated code in a loop, the most common is a for loop to save you many lines of code. :-)

Cameron Maciel
Cameron Maciel
1,433 Points
Cameron Maciel
Cameron Maciel
1,433 Points

how do loops work, are they like a var

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,243 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,243 Points

Hi Cameron

I don't have the exact answer to this question but for loop is a structured piece of code that automates repetitive tasks

It has 3 parts

the expression The count And the exit condition

for(count=0;count< 40;count++){

}