Rust Crafting Calculator! - Check out

This website has been built to hopefully make it easier to plan your crafting in rust!

Website -

There is still many features which i would like to add. I would also like to hear your opinions and what you guys think.

(i am aware of another website which is similar, but that website is outdated.)

I’d rather have something where you drag and drop pieces onto a grid and it calculates it for you. These calculators or rather lame cause it just focuses on building straight up.

This is something which id like to consider, will have a look at some options and see what i can come up with.

i’d rather use a kind of calculator that counts all the resources required to make an amount of a specific item

for example a c4, it would display all the resources required to make the c4, and im not talking about 1 flare and 15 explosives

Yea i understand what you mean.
ive been trying to work on something like this for a bit, and it would be displayed in a tier sort of way e.g

- Metal Fragments
- Gun Powder
- Low Grade Fuel
- Sulfur
- Gun Powder

What you think?

Yep, 10/10, Would use

Im sure you know what you’re doing and all. This was a homework project. Your more than welcome to modify. I got a lot of help from a couple of dudes on forum. Also I didn’t do this from scratch just modified from a simple addition only calc from a school file.


    <div id="calculator">
        <!-- Screen and clear key -->

        <div class="top">
            <span class="clear">C</span>

            <div class="screen"></div>

        <div class="keys">
            <!-- operators and other keys -->
            <span>You</span> <span>Could</span> <span>Make</span> <span class="operator">A</span>
            <span>way</span> <span>cooler</span> <span>Calc</span> <span class="operator">-</span>
            <span>with</span> <span>this code</span> <span>3</span> <span class="operator">÷</span>
            <span>0</span> <span>.</span> <span class="eval">=</span> <span class=

/* Basic reset */
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
/* Better text styling */
        font: bold 14px Arial, sans-serif;

/* Finally adding some IE9 fallbacks for gradients to finish things up */
/* A nice BG gradient */
html {
        height: 100%;
        background: #FFF;
        background: radial-gradient(circle,#fff20%,#ccc);
        background-size: cover;

/* Using box shadows to create 3D effects */
#calculator {
        width: 325px;
        height: auto;
        margin: 100px auto;
        padding: 20px 20px 9px;
        background: #9dd2ea;
        background: linear-gradient(#9dd2ea,#8bceec);
        border-radius: 3px;
        box-shadow: 0 4px #009de4, 0 10px 15px rgba(0,0,0,0.2);

/* Top portion */
.top span.clear {
        float: left;

/* Inset shadow on the screen to create indent */
.top .screen {
        height: 40px;
        width: 212px;
        float: right;
        padding: 0 10px;
        background: rgba(0,0,0,0.2);
        border-radius: 3px;
        box-shadow: inset 0 4px rgba(0,0,0,0.2);
/* Typography */
        font-size: 17px;
        line-height: 40px;
        color: #FFF;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        text-align: right;
        letter-spacing: 1px;

/* Clear floats */
.keys,.top {
        overflow: hidden;

/* Applying same to the keys */
.keys span,.top span.clear {
        float: left;
        position: relative;
        top: 0;
        cursor: pointer;
        width: 66px;
        height: 36px;
        background: #FFF;
        border-radius: 3px;
        box-shadow: 0 4px rgba(0,0,0,0.2);
        margin: 0 7px 11px 0;
        color: #888;
        line-height: 36px;
        text-align: center;
/* prevent selection of text inside keys */
        user-select: none;
/* Smoothing out hover and active states using css3 transitions */
        transition: all .2s ease;

/* Remove right margins from operator keys */
/* style different type of keys (operators/evaluate/clear) differently */
.keys span.operator {
        background: #FFF0F5;
        margin-right: 0;

.keys span.eval {
        background: #f1ff92;
        box-shadow: 0 4px #9da853;
        color: #888e5f;

.top span.clear {
        background: #ff9fa8;
        box-shadow: 0 4px #ff7c87;
        color: #FFF;

/* Some hover effects */
.keys span:hover {
        background: #9c89f6;
        box-shadow: 0 4px #6b54d3;
        color: #FFF;

.keys span.eval:hover {
        background: #abb850;
        box-shadow: 0 4px #717a33;
        color: #fff;

.top span.clear:hover {
        background: #f68991;
        box-shadow: 0 4px #d3545d;
        color: #FFF;

/* Simulating "pressed" effect on active state of the keys by removing the box-shadow and moving the keys down a bit */
.keys span:active {
        box-shadow: 0 0 #6b54d3;
        top: 4px;

.keys span.eval:active {
        box-shadow: 0 0 #717a33;
        top: 4px;

.top span.clear:active {
        top: 4px;
        box-shadow: 0 0 #d3545d;

// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;
// Add onclick event to all the keys and perform operations
for (var i = 0; i < keys.length; i++) {
        keys*.onclick = function(e) {
                // Get the input and button values
                var input = document.querySelector('.screen');
                var inputVal = input.innerHTML;
                var btnVal = this.innerHTML;
                // Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
                // If clear key is pressed, erase everything
                if (btnVal == 'C') {
                        input.innerHTML = '';
                        decimalAdded = false;
                // If eval key is pressed, calculate and display the result
                else if (btnVal == '=') {
                        var equation = inputVal;
                        var lastChar = equation[equation.length - 1];
                        // Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
                        equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
                        // Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
                        if (operators.indexOf(lastChar) > -1 || lastChar == '.') equation = equation.replace(/.$/, '');
                        if (equation) input.innerHTML = eval(equation);
                        decimalAdded = false;
                // Basic functionality of the calculator is complete. But there are some problems like 
                // 1. No two operators should be added consecutively.
                // 2. The equation shouldn't start from an operator except minus
                // 3. not more than 1 decimal should be there in a number
                // We'll fix these issues using some simple checks
                // indexOf works only in IE9+
                else if (operators.indexOf(btnVal) > -1) {
                        // Operator is clicked
                        // Get the last character from the equation
                        var lastChar = inputVal[inputVal.length - 1];
                        // Only add operator if input is not empty and there is no operator at the last
                        if (inputVal != '' && operators.indexOf(lastChar) == -1) input.innerHTML += btnVal;
                        // Allow minus if the string is empty
                        else if (inputVal == '' && btnVal == '-') input.innerHTML += btnVal;
                        // Replace the last operator (if exists) with the newly pressed operator
                        if (operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
                                // Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator
                                input.innerHTML = inputVal.replace(/.$/, btnVal);
                        decimalAdded = false;
                // Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed.
                else if (btnVal == '.') {
                        if (!decimalAdded) {
                                input.innerHTML += btnVal;
                                decimalAdded = true;
                // if any other key is pressed, just append it
                else {
                        input.innerHTML += btnVal;
                // prevent page jumps

Will have a look once im out of work, and see what i can do with it :stuck_out_tongue:

I posted the html,CSS and JS ignore the “<b>HTML</b>” I’m an idiot and tried to bold code.

Hahaha just home and np thanks for the heads up :stuck_out_tongue:

You could do something like this:
{“item”:{“item name”:“c4”,“req”:{“item”:“number of the item required.”,“item2”:“number of the item required.”,“item3”:“number of the item required.”}}}

and then store items one by one along with the items required to craft it, those items would then contain how many items are required to craft them in turn.
You could totally make a calc for all of rust.

I’d like to see a visual calculator where you drag and drop pieces to make a simulation of your base or whatever and then it calculates the total raw materials. That would be cool.

Crafting Calculator? Can’t you just use a normal calculator? I don’t get this. You all have taken math, right?

Sort of a base builder thing but then it’d show you on the side the raw materials, that would be great. I’ll check it out and try to make one then send it to OP to put it on his site if he likes it. Chances are it won’t work out since I’m not that amazing.

@edit what i can do, is you put in how big your house will be, how many floors, how many doors etc and it will calculate the total amount of wood needed

Im going to try work on something like a base builder, but for the other resources that require multiple materials i think this would be neat enough, what you think?

oh hey,
had the same idea last night:

the text is german but you just have to select your item and type a number in the textfield
it’s a wip, though…