Maybe an Odd request, I need a "calculator" but don't know what it is called

I need something that might exist in pre-built code somewhere. I need a calculator of sorts for my website. I would like a clean looking “block” instead of a big ugly chart.

Lets say I need to convey to my buyers how much stuff they need to put together a certain length of rail run. The wood and brackets fall every 4ft.

I want the calculator to have a blank for how much run they need in 1ft increments.

So they say I need 20ft of railing run and it spits out that they need 5 brackets and 4 pieces of wood for example.

I think a calculator looks better than a table or chart. Does something like this exist that I can use for my needs?

That seems to be fairly specialized - I’m not sure you would find anything out there that does exactly what you want, but depending on your coding experience, you could take one and edit it to suit your needs. Or you could build it from scratch - it doesn’t seem to be very complicated. If you don’t feel up to the task, it would be a great learning experience to take a stab at it, and then ask here whenever you get stuck.

In terns of the appearance, you can always adjust the CSS afterwards. That doesn’t really affect the functionality of the calculator.

By the way, what did you find when you Googled for some calculator code?

I went to codepen looking around. I have been unable to find anything as of yet. I am looking for something like you see on here:

The goal is a bit different but the idea is the same. Just with less criteria.

Are they called calculators or builders?

I am a coding newbie. I push myself to learn more so I ask a lot of questions. Pre-built websites just do not work haha you end up having to code at some point.

Hi there cowsgonemadd3,

The wood and brackets fall every 4ft.

say I need 20ft of railing run and it spits out that
they need 5 brackets and 4 pieces of wood

Surely you would need 6 brackets and 5 pieces of wood?

Here is an example using my assumption…

<html lang="en">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
#container {
    text-align: center;
#items {
    padding: 2em;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-color: #fff;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
    text-align: left;
#items fieldset {
    margin: 0.25em 0;
    border: 0;
#items label {
    width: 10em;
#items select {
    width: 5em;
    text-align: center;
#items input[type=text] {
    width: 4.5em;
    text-align: center;

<div id="container"> 
<form id="items" action="#">
  <label for="rail">Length of rail:</label>
   <select id="rail">
    <option value="0">select</option>
    <option value="4">4ft</option>
    <option value="8">8ft</option>
    <option value="12">12ft</option>
    <option value="16">16ft</option>
    <option value="20">20ft</option>
    <option value="24">24ft</option>
    <option value="28">28ft</option>
    <option value="32">32ft</option>
    <option value="36">36ft</option>
    <option value="40">40ft</option>
    <option value="44">44ft</option>
    <option value="48">48ft</option>
    <option value="52">52ft</option>
    <option value="56">56ft</option>
    <option value="60">60ft</option>
    <option value="64">64ft</option>
    <option value="68">68ft</option>
    <option value="72">72ft</option>
    <option value="76">76ft</option>
    <option value="80">80ft</option>
    <option value="84">84ft</option>
    <option value="88">88ft</option>
    <option value="92">92ft</option>
    <option value="96">96ft</option>
    <option value="100">100ft</option>
    <option value="104">104ft</option>
    <option value="108">108ft</option>
    <option value="112">112ft</option>
    <option value="116">116ft</option>
    <option value="120">120ft</option>
    <option value="124">124ft</option>
    <option value="128">128ft</option>
    <option value="132">132ft</option>
    <option value="136">136ft</option>
    <option value="140">140ft</option>
  <label for="wood">Wood required:</label>
   <input id="wood" type="text" readonly>
  <label for="brackets">Brackets required:</label>
   <input id="brackets" type="text" readonly>
  <input id="calc" type="button" value="Calculate">
  <input type="reset" value="Reset">

(function( d ) {
   'use strict';
    d.getElementById( 'items' ).reset();
    d.getElementById( 'calc' ).addEventListener( 'click',
      function() {
         var rv = parseFloat( d.getElementById( 'rail' ).value );
            if ( rv === 0) { 
                d.getElementById( 'wood' ).value = 0;
                d.getElementById( 'brackets' ).value = 0;	
            else {
                d.getElementById( 'wood' ).value = rv / 4;
                d.getElementById( 'brackets' ).value = rv / 4 + 1;	
	   }, false );
}( document ));




As @WebMachine said, you’re unlikely to find something that specifically meets your needs. This wouldn’t be hard to build in JS. I would suggest taking this opportunity to learn JS.

1 Like

So that looks pretty cool. The goal is to show the customer a breakdown like this without it looking like this:

3’ System: (1) 3’ Bar and (2) Brackets

4’ System: (1) 4’ Bar and (2) Brackets

5’ System: (1) 5’ Bar and (2) Brackets

6’ System: (1) 6’ Bar and (2) Brackets

8’ System: (1) 8’ Bar and (3) Brackets

9’ System: (2) 4.5’ Bars and (3) Brackets

10’ System: (2) 5’ Bars and (3) Brackets

12’ System: (1) 8’ Bars, (1) 4’ Barre and (4) Brackets

16’ System: (2) 8’ Bars and (5) Brackets

20’ System: (2) 8’ Bars, (1) 4’ Barre and (6) Brackets

24’ System: (3) 8’ Bars and (7) Brackets

28’ System: (3) 8’ Bars, (1) 4’ Barre and (8) Brackets

32’ System: (4) 8’ Bars and (9) Brackets

36’ System: (4) 8’ Bars, (1) 4’ Barre and (10) Brackets

40’ System: (5) 8’ Bars and (11) Brackets

So it would need to say what lengths of rail and the correct number of brackets. What you made looks beautiful. If only it could populate this data here.

Hi there cowsgonemadd3,

you appear to have moved the goalposts. :eyebrows:

What is the connection between these…

3’ System: (1) 3’ Bar and (2) Brackets
4’ System: (1) 4’ Bar and (2) Brackets
5’ System: (1) 5’ Bar and (2) Brackets
etc etc

…and this…

The wood and brackets fall every 4ft.

Perhaps you will be able to elucidate? :biggrin:


1 Like

You bring them in on the outside edges 6 inches. From then on, they are every 4ft.

I might have moved the goal post or I set it up wrong to start haha

Hi there cowsgonemadd3,

that explanation does not work for me. :unhappy:

Perhaps, taking one line…

3’ System: - What does that mean?
color=#069 3’ Bar [/color] - What does that mean?
and (2) Brackets - What does that mean?

A diagram of the components and their function could prove to be beneficial. :winky:


The picture is of a 8ft run. It comes with 3 brackets and 1 8ft bar. In the post above it is placed in brackets.

(1) 8ft bar & (3) brackets.

The 3ft system consists of a 3ft bar and 2 brackets.

Hi there cowsgonemadd3,

so what does this…

12’ System: (1) 8’ Bars, (1) 4’ Bar and (4) Brackets

…look like?

Or this …

20’ System: (2) 8’ Bars, (1) 4’ Bar and (6) Brackets

Why does the first have 4 brackets instead of five and the second 6 instead of 8?

Are the ends of the bars coupled?
How many different sized bars are available?
I need to find a pattern to the various combinations.

I can’t make a calculator without all the relevant information .:rolleyes:


Is there a way for the calculator to pull info based on data given?

4ft = a 4ft barre + 2 brackets and so on?

This is how it looks when a long run is installed.

We have sizes from 3ft to 40ft in more than I listed above. In some cases we go in 1ft increments. I think we offer 28 sizes total.

I am trying to find a way to tell you how the runs work. Basically not every 4ft on all systems. It I guess is based on our wood as well. I know for sure it is based on the chart above as to how many each run gets. If we can work out something where the calculator shows that data to the customer it would be cool.

Even if the calculator showed the data similar to how I have it. Just in the wood blank and the bracket blank.

Unless I’m missing something wouldn’t it simply be

( ceil (length_of_rail / space_between_brackets) ) + 1 = number_of_brackets_needed 
1 Like

i would probably have said round instead of ceil, but yeah.

I guess it would depend on how expensive the brackets are and how strict the regulations are. My logic was based on “slightly more safe than required” instead of “a chance of slightly less safe than required”. :wink:

I don’t know if visitors would like to see many comparisons in a table, or if they might consider a table “too much info” and prefer needing a form submit.

But it seems something like

case (frail_wood) 
  space_between_brackets = 3 
case (avg_wood) 
  space_between_brackets = 4 
case (sturdy_wood) 
  space_between_brackets = 5 

etc. could work. Similar for bracket cost if that’s a factor

case (nickel_plated) 
  cost = 2 

It’s just a matter of figuring out all the pieces and all the possible ways they can fit together.

I think if it were me, rather than a massive table I’d go with a “compare these options to these options” form.

(of course if they’re nailed into wallboard instead of anchor bolted to studs … but I digress :wink: )

1 Like

Yeah the calculator is something I thought would make it look more professional. We have used charts before and while they work it is kinda like word vomit. They really only need to see the info on the size they want.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.