PHP Developers Network
http://forums.devnetwork.net/

Make a WP page with JavaScript
http://forums.devnetwork.net/viewtopic.php?f=13&t=145036
Page 1 of 1

Author:  Vegan [ Tue Dec 19, 2017 1:14 pm ]
Post subject:  Make a WP page with JavaScript

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:
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:
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?

Author:  requinix [ Tue Dec 19, 2017 9:48 pm ]
Post subject:  Re: Make a WP page with JavaScript

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.

Author:  Vegan [ Wed Dec 20, 2017 2:19 pm ]
Post subject:  Re: Make a WP page with JavaScript

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:
<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:
<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

Author:  requinix [ Thu Dec 21, 2017 2:01 am ]
Post subject:  Re: Make a WP page with JavaScript

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.

Author:  Vegan [ Thu Dec 21, 2017 4:41 pm ]
Post subject:  Re: Make a WP page with JavaScript

requinix wrote:
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

Author:  Vegan [ Thu Dec 21, 2017 5:31 pm ]
Post subject:  Re: Make a WP page with JavaScript

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

Code:
<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>

Author:  requinix [ Thu Dec 21, 2017 11:32 pm ]
Post subject:  Re: Make a WP page with JavaScript

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:
<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?

Author:  Vegan [ Fri Dec 22, 2017 4:41 pm ]
Post subject:  Re: Make a WP page with JavaScript

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

Page 1 of 1 All times are UTC - 5 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/