Make a WP page with JavaScript

[Vegan]

WP allows JavaScript in the code view for a post or a page. So this makes today's idea fairly easy.

My reference

So need to input a person's weight and possibly convert to metric for calculations. I have a table already on my vegan site with every conversion I could find so that is not a problem. Weight could be pounds or even stones.

Now I need some inputs, one for the weight with a possible choice of units etc etc

Code: Select all

function HB_BMR(weight, age, height) { // kg, years, centimeters
   return 66.5 + ( 13.75 × weight  ) + ( 5.003 × height ) – ( 6.755 × age );
}

the second one is active level which can be used to estimate the number of calories a person needs.

Code: Select all

function BMR(base, active) {
    switch active {
        case 1:
             return base * 1.2;
             break;
        case 2:
             return base * 1.375;
             break;
        case 3:
             return base * 1.55;
             break;
        case 4:
             return base * 1.75;
             break;
        case 5:
             return base * 1.9;
             break;
        default:
             return base * 1.2;
             break;
    }
}

I guess I need to use a HTML form for the inputs?

[requinix]

It doesn't have to be a form, but yes that would be the way to go. Presumably you'll be putting these calculated values somewhere on the page (not necessarily into a form field) - you can either have a "calculate" button that does the math, or automatically do the math whenever the inputs change values.

[Vegan]

how can i make it dynamic? i am not very good at form design

inputs, gender, age, weight and activity level

activity level might be best as a combo box style

this is more or less best i could find with JavaScript for a form but I am not sure if I can bind an event to it

Code: Select all

<script>
//create a form
var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('action',"submit.php");

//create input element
var i = document.createElement("input");
i.type = "text";
i.name = "user_name";
i.id = "user_name1";

//create a checkbox
var c = document.createElement("input");
c.type = "checkbox";
c.id = "checkbox1";
c.name = "check1";

//create a button
var s = document.createElement("input");
s.type = "submit";
s.value = "Submit";

// add all elements to the form
f.appendChild(i);
f.appendChild(c);
f.appendChild(s);

// add the form inside the body
$("body").append(f);   //using jQuery or
document.getElementsByTagName('body')[0].appendChild(f); //pure javascript

</script>

The simple way I know is

Code: Select all

<form action="/team_name_url/" method="post">
    <label for="team_name">Enter name: </label>
    <input id="team_name" type="text" name="name_field" value="Default name for team.">
    <input type="submit" value="OK">
</form>

so suggestions? prefer something i can paste into a WP docucment

[requinix]

You can definitely attach events to it. But why are you creating the form with Javascript? Why can't you just write HTML for it? I'm sure it would be easier.

[Vegan]

You can definitely attach events to it. But why are you creating the form with Javascript? Why can't you just write HTML for it? I'm sure it would be easier.

I was thinking that JS might be easier to make the code more amenable to an adaptive design when a phone is the user

[Vegan]

right now WP adds some fluff but this is where I have it now

Code: Select all

<script><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
function BMR(base, active) {
    switch active {
        case 1:
             return base * 1.2;
             break;
        case 2:
             return base * 1.375;
             break;
        case 3:
             return base * 1.55;
             break;
        case 4:
             return base * 1.75;
             break;
        case 5:
             return base * 1.9;
             break;
        default:
             return base * 1.2;
             break;
    }
}
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>function HB_BMR(weight, age, <span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>height) { // kg, years, centimeters
   return 66.5 + ( 13.75 × weight  ) + ( 5.003 × height ) – ( 6.755 × age );
}
</script>
<div style="width: 50%;"><form>Enter your age: <input name="age" type="number" />

Enter your weight (kg): <input name="weight" type="number" />

Enter your height (cm): <input name="height" type="number" />

<input name="gender" type="radio" value="male" /> Male
<input checked="checked" name="gender" type="radio" value="female" /> Female

<select name="activity">
<option value="1">Little or no exercise</option>
<option value="2">Light exercise (1–3 days per week)</option>
<option value="3">Moderate exercise (3–5 days per week)</option>
<option value="4">Heavy exercise (6–7 days per week)</option>
<option value="5">Very heavy exercise (twice per day, extra heavy workouts)</option>
</select>

</form></div>
<script>
document.write("your basal metabolic<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span> requirements are ", baserate);
</script>

[requinix]

Javascript just adds more hurdles: either way you have to create HTML, so doing that process with Javascript is only creating more work for yourself.

The <span> stuff in the <script> is bad. You have to get rid of it somehow. Obviously. You should get rid of the others too. I don't know what you're doing that would cause WP to add them in such weird places.

And that final <script> is not what you want to do so remove it. Write normal HTML and put <span>s with a class in the place(s) you need to insert the calculated values. Something like

Code: Select all

<div style="display:none;">Your basal metabolic requirements are <span class="bmr_value"></span></div>

That DIV will be shown when the value is calculated, and the value will go into the span.bmr_value.

One question: do you want to calculate when the person enters values and selects options, or to wait until they hit a button?

[Vegan]

I was rethinking the code slightly with more focus on working with apps my MyFitnessPal which lacks the ability to accurately estimate real basal metabolic requirements

i even pondered using an embedded spreadsheet to do the work, I am very good with excel

for some reason the span is removed form the code, probably due to the parser which converts code to XHTML