Have project details just need direction

Hello, I have some OOP background but I'm extremely new to javascript. I would greatly appreciate a helpful nudge towards the proper topics to research on the following project.

Project details

I'm working towards building a calculator on a site that will take user input on the quantity of items a "crafter" wishes to build and will output the total amount of ingredients needed to build all of the items.

The items will be sorted into 6 catagories (varying dificulty of creation and quality of item) and the user will be able to put quantities into any combination of the 6. Example 1 cloth chest, 5 mail chest, 2 studded chest.

The more difficult items require rare items that I dont wish to be displayed unless an item requiring it is to be created. IE not a bunch of 0 ingredients.

Now then on the push I'd appreciate feedback towards what topics to research.

Will all this have to be in a form? To my knowledge forms are more for processing information on the server correct? Couldnt it all be processed client side from my script?

Design of classes

A class for each item that contains an array of class ingredient? Class ingredient would contain a name and quantity.

Such as this?

 

i suggest you get acquainted with mootools - the best and most comprehensive object orientated framework out there.

to answer your questions re: form processing:

no, they don't need to be serverside. by all means, work with numbers on the fly in a bunch of input fields.

the annoying things when doing a calc is data type casting but mootools offers a number of methods that extends and fix javascript's ways of doing this (natives are parseInt and parseFloat, for example).

have a look at http://mootools.net/docs/core/Native/Number

in essence you can have a bunch of elements the user can pick from which use element storage.

<div class="blah" data-price="45.99" />item 1</div>
<div class="blah" data-price="55.99" />item 2</div>
...
<div id="grandTotal">0.00</div>

and the js that access them through mootools would be

var GT = $("grandTotal");
$$("div.blah").addEvents({
    click: function() {
        var currentTotal = GT.get("value").toFloat(), newTotal = currentTotal + this.get("data-price").toFloat();
        GT.set("html", newTotal);
    }
});

PHP:

etc etc. basically GT can be a div as here, or an <input type="text"> whereby you'd set the value property etc.

if you are interested in creating classes in mootools, there are shitloads of tutorials. here's an example one:

var calc = new Class({
    Implements: [Options, Events],
    initialize: function(options) {
        // constructor
        this.setOptions(options);
        this.loadData();
    },
    loadData: function() {
        console.log(this.options.foobar);
        this.foo = true;
    },
    someMethod: function() {
        this.foo = !this.foo;
    }
});

var foo = new calc({
    foobar: "this is some property / option"
});

alert(foo.foo);

foo.someMethod();

alert(foo.foo);

PHP:

etc etc. here's an example mootools calculator: http://www.chrisesler.com/mootools/mootools-calculator.html (not done by me, and its mostly function based as opposed to class but thats ok too - best tools for the job!)

good luck