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! While you're at it, check out some resources Treehouse students have shared here.
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
Cameron Maciel
1,433 PointsCreating a calculation button with different products and prices
file:///Users/cameronmaciel/Desktop/Screen%20Shot%202015-05-03%20at%207.36.19%20PM.png
here is a link to screen shot i took of another website, i want to create it simliar to this, notice how the first step is the garment, since each garment has a different price quoting everyshirt will be different, and having the different number of colors on the front and on the back will also be different from just a front print, hope this make sense
Marcus Parsons
15,719 PointsCameron,
Do you have some base code you're starting from? And by base code, I mean code that you've developed, not the code from this site.
Cameron Maciel
1,433 PointsNo i dont have any code of my own, because mysite i have now is made with wix moderndesigns4you.com is mysite
but i have been learning html for about a year now and just need to create this code needs for my customers to calculate the cost of what they printed
Marcus Parsons
15,719 PointsWe're not here to create solutions for you out of thin air for free. We are here to help you with already existing code that has problems. There might be somebody who wants to spend hours of their time doing free work, but that is not me and not a lot of others either. I also must mention that if someone puts that they offer web design on their site but can't even program a simple price calculator, that's far from good. Good luck.
Cameron Maciel
1,433 Pointsim not asking for someone to do it for me, i'm asking for help in the direction to learn how to do this.
Cameron Maciel
1,433 PointsAnd also, i must mention that there is a difference between design and development. yes or no?
Marcus Parsons
15,719 PointsThere really is very little difference as designers should have a good grasp on front end technologies. With the way you worded what you wanted, it seemed as though you wanted a solution handed to you. I misunderstood what you were asking for.
Nevertheless, you have a couple options here. The simplest would be to integrate with PayPal's API and let their system do most of the heavy lifting. Their system will take care of everything from handling transactions to keeping track of orders, and their system is easy to use. In one of the tracks on here, there is a section for dealing with integrating with PayPal: http://teamtreehouse.com/library/build-a-simple-php-application
If you didn't want to use PayPal, you should study JavaScript, a backend language such as PHP, a database querying language such as MySQL, and preventative measures to stop session hijacking, MySQL Injection, etc. Treehouse can help you quite a bit when it comes to learning most of what you need.
Cameron Maciel
1,433 PointsAwesome thank you, i will look into this.
Thank you for your time
Marcus Parsons
15,719 PointsYou're welcome. Just keep in mind that PayPal's service does not come free. But, their fees are nominal and fairly priced. Any merchant you do business with is going to require fees to handle transactions; PayPal just seems to help out everyone more than other merchants. :P
Cameron Maciel
1,433 PointsWhich is understandable, im 17 years old and building a business... i have the money to hire developers to make this for me, but i much rather learn it myself. As i believe i have time to learn anything. Im a very fast learner and can't wait to finish learning this new php course.
I again thank you for pushing me into the right direction
1 Answer
Marcus Parsons
15,719 PointsI can set this as an answer:
There really is very little difference as designers should have a good grasp on front end technologies. With the way you worded what you wanted, it seemed as though you wanted a solution handed to you. I misunderstood what you were asking for.
Nevertheless, you have a couple options here. The simplest would be to integrate with PayPal's API and let their system do most of the heavy lifting. Their system will take care of everything from handling transactions to keeping track of orders, and their system is easy to use. In one of the tracks on here, there is a section for dealing with integrating with PayPal: http://teamtreehouse.com/library/build-a-simple-php-application
If you didn't want to use PayPal, you should study JavaScript, a backend language such as PHP, a database querying language such as MySQL, and preventative measures to stop session hijacking, MySQL Injection, etc. Treehouse can help you quite a bit when it comes to learning most of what you need.
Marcus Parsons
15,719 PointsBy the way, it is awesome that you're 17 and starting up a business. I meant it when I said good luck, so good luck to you in your future endeavors!
Cameron Maciel
1,433 PointsHey marcus can you take look at this, and help me figure out how i can make it to where if the the number of shirt range is between 12-30 and number of colors front is 1 its $5.50, but if the number of colors is 2 then the Price is $8.18. and also instead of having the back color also be multiplied by the number shirts twice, to where the adding a back color also will only charge $1.10 per color,
<!DOCTYPE html PUBLIC "> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Calc</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> ```<script type="text/javascript"> <!-- $(document).ready(function() { $('#calculateTotal').click(function() {
var shirtsPrice = 10.50, perColorPrice = 5.99;
var inputNum_of_Shirts = $('#shirts').val();
var inputNum_of_FColor = $('#colorsOnFront').val();
var inputNum_of_BColor = $('#colorsOnBack').val();
var totalCost = (inputNum_of_Shirts*parseFloat(shirtsPrice))
+(parseFloat(perColorPrice)*inputNum_of_FColor)
+(parseFloat(perColorPrice)* inputNum_of_BColor );
var perShirtCost = (parseFloat(shirtsPrice))
+(parseFloat(perColorPrice)*inputNum_of_FColor)
+(parseFloat(perColorPrice)*inputNum_of_BColor);
$('#total').html(formatCurrency(totalCost));
$('#perShirt').html(formatCurrency(perShirtCost));
$('#result').css('display', 'block');
});
}); // This Function I have searched from Web function formatCurrency(strValue) { strValue = strValue.toString().replace(/\$|\,/g,''); dblValue = parseFloat(strValue); blnSign = (dblValue == (dblValue = Math.abs(dblValue))); dblValue = Math.floor(dblValue*100+0.50000000001); intCents = dblValue%100; strCents = intCents.toString(); dblValue = Math.floor(dblValue/100).toString(); if(intCents<10) strCents = "0" + strCents; for (var i = 0; i < Math.floor((dblValue.length-(1+i))/3); i++) dblValue = dblValue.substring(0,dblValue.length-(4*i+3))+','+ dblValue.substring(dblValue.length-(4*i+3)); return (((blnSign)?'':'-') + '$' + dblValue + '.' + strCents); } --> </script>``` </head> <body> <form id="calc" name="calc"> <p> <input id="shirts" name="shirts" type="text"> <label for="shirts">Number of Shirts</label> </p> <p> <input id="colorsOnFront" name="colorsOnFront" type="text"> <label for="colorsOnFront">Number of Colors on Front</label> </p> <p> <input id="colorsOnBack" name="colorsOnBack" type="text"> <label for="colorsOnBack">Number of Colors on Back</label> </p> <p><input name="calculateTotal" id="calculateTotal" type="button" value="Calculate Total" /></p> <div id="result" style="display:none;"><strong>Total:</strong> <span id="total"></span> <strong>Per Shirt:</strong> <span id="perShirt"></span></div> </div> </form> </body> </html>
Marcus Parsons
15,719 PointsIs there JavaScript attached to this code? It didn't come out correctly. Be sure to wrap all code with 3 backticks at beginning and end with the backticks on their own separate lines. Put the language you're using out beside the first set of backticks, though, so that it renders properly.
Cameron Maciel
1,433 PointsHere we go i add that for you, but you still can't see any of the code
Marcus Parsons
15,719 PointsYou didn't wrap it correctly.
Cameron Maciel
1,433 PointsCameron Maciel
1,433 Pointshttp://www.squarecatskates.com/Screen-Print-Price-Calculator_ep_43-1.html
here is the website i got it from