Incorporating .HTML , .CSS, and .JS into widget to create working calculator

Hello,

I am trying to create a calculator on my website. I purchased the .html, .css, and .js files for the calculator that I want to put on my website, but now I am utterly confused as to how to incorporate more than simply the .html file onto my website to create a fully functioning calculator.

I can give you a link to my website so you can get a better idea of what I am trying to achieve if that helps. Anyone willing to guide me through this process, and/or refer me to a good tutorial to figure out how to make my calculator function? I am so confused right now and would appreciate any help that you can offer. THANK YOU IN ADVANCE!

Welcome to TalkGraphics - Check back because one of the members will certainly have an answer or suggestion.

Quote:

---

Originally Posted by gwpriester

Welcome to TalkGraphics - Check back because one of the members will certainly have an answer or suggestion.

---

Thank you- I appreciate it!

Acorn or Egg will know better, but I think you need to copy sections of the HTML and paste them into a placeholder (see Help > Placeholder Objects) and then place the CSS and JS files into the main folder index_html_files folder. Acorn? Egg?

Sorry that you paid for a calculator in the first place.

The .html file will probably end up as a DIV tag with an ID that is added as Body code to a shape (rectangle) Placeholder.
The .css and .js would go into the Page Head code. These would require wrapping tags of <style>...</style> for the CSS and <script>...</script> for the JavaScript.

Look at Egg's example in this: https://www.talkgraphics.com/showthr...55-calculator; it's not what it done but where things go.

Acorn

Glad you found that Acorn, I'd forgotten all about that ;)

Quote:

---

Originally Posted by Acorn

Sorry that you paid for a calculator in the first place.

The .html file will probably end up as a DIV tag with an ID that is added as Body code to a shape (rectangle) Placeholder.
The .css and .js would go into the Page Head code. These would require wrapping tags of <style>...</style> for the CSS and <script>...</script> for the JavaScript.

Look at Egg's example in this: https://www.talkgraphics.com/showthr...55-calculator; it's not what it done but where things go.

Acorn

---

Thank you, Acorn! That example actually helps me a lot. Forgive my ignorance, but I have one last problem: I am unable to open the JavaScript file to read (& then copy and paste) the coding inside it. Are there any free programs that I can download to read .js files that you would recommend?

You're the best- I really appreciate your help (:

Quote:

---

Originally Posted by Egg Bramhill

Glad you found that Acorn, I'd forgotten all about that ;)

---

Glad Acorn found it too! Thank you, Egg. In regards to my latest reply to Acorn, do you have any suggestions for what to use to read a .js file? Again, please forgive me as a newbie to all this!

Quote:

---

Originally Posted by graphics097

Glad Acorn found it too! Thank you, Egg. In regards to my latest reply to Acorn, do you have any suggestions for what to use to read a .js file? Again, please forgive me as a newbie to all this!

---

Window's Notepad is all you need. Open it and drag and drop the file onto the pane.

It should be readable. If so, note any copyright statements.
If not, it may be minified. You might then use https://unminify.com/ to unminify it.

Acorn

Quote:

---

Originally Posted by Acorn

Window's Notepad is all you need. Open it and drag and drop the file onto the pane.

It should be readable. If so, note any copyright statements.
If not, it may be minified. You might then use https://unminify.com/ to unminify it.

Acorn

---

I wish I could've paid you two, instead. Your help has been invaluable, and I can't express how appreciative I am! I did what you both advised, and the calculator is *almost* working... Except it won't do the final calculation. May be due to my own error or the coding they gave me--which one it is I am not sure. Attachment 122759

Nevermind… Definitely my error! Now just have to figure out how to delete the "Calories Burned (English)" option as its not accurate whatsoever... But now I'm rambling! Thank you for your help again, Egg and Acorn (:

There are few areas that can be tweaked.

Your Height is missing its units of feet and inches.

REE?

Your responsive view has its fields dimensioned too wide and the Placeholder is not deep enough.

Entering a weight in lbs and then switching to kgs does not truncate the result so you get a very long, unprofessional, value.

I don't know why "wt1=wt/2.2"; is less accurate than the value used in "var r2 = (10 * wt*2.2046) + (6.25 * ht) - (5 * a)-161;".

Have you sorted out filling your r2 field (Calories/day)?

Acorn

PM
graphics097, for what it's worth, as a user of such a calculator, I would prefer it to be interactive.

Attachment 122765 is a widget of sorts that uses Range Sliders as a proof of concept.
It does not fully work in the Xara Preview so open into your preferred browser.

It does not do the full calculation (Gender and calories) but it automatically handles metric and imperial measurements.

It needs CSS styling.

The HTML is readable and I hope understandable.

It would be a useful project for any TGer to complete.

Acorn

I like Acorns range sliders.

I did a search on Stack Overflow and came up with a very simple form. Weight & Height only.

I have added the final calculation, probably for a Male.
The OP needs to advise.

I have added slider CSS to the page and layout CSS to the Placeholder.

Attachment 122774

Acorn

Like that Acorn, but should the result be a bmi or calories or boyh?

I like this one as a good example. It tends more towards the British values (I've no idea my height in inches [but I can work this out] but I've no idea of my weight in Pounds, only in Stones & Pounds)

EXAMPLE

Quote:

---

Originally Posted by Egg Bramhill

Like that Acorn, but should the result be a bmi or calories or boyh?
I like this one as a good example. It tends more towards the British values (I've no idea my height in inches [but I can work this out] but I've no idea of my weight in Pounds, only in Stones & Pounds)
EXAMPLE

---

Sorry Egg, I am not trying to solve a BMI or Calorie calculator, I was pointing out to the OP that sliders, in such cases, are much more valuable as they afford "what if" solutions - " What if I were 5 years younger?" - Age slider - "Gosh, hardly matters!" and so on.

If I build it fully, someone will come along and ask for the third full stop to be Gothic Red.

The OP presented kg/lbs and cm/inches. It is not difficult to include st - lbs and ft - inches but in doing so I am probably validating a calculation that may or may not be right, c.f., the original code used 2.2 as a conversion from kg to lbs, which was different elsewhere.

There are 14 lbs in a stone; 8 stone in a hundredweight and 20 hundredweight in a ton. So I clock in at one hundredweight, one stone and 13 pounds.
In Germany, I used to get market vegetables in Pfund (pounds) at the time the UK was prosecuting vendors using imperial measures.
When stuck, most use on-line calculators - "139 pounds in stones and pounds" - https://stonetopounds.com/139-pounds-in-stone.

Acorn

I don't know if this will be of any help... but I too needed link to a calculator from a site... but just a simple calc...

I gave up on widgets and coded stuff. Why? Because I'm totally retarded when it comes to such things... so...

I just did my simple calculator in Excel which allows you to embed it into a site.... took the embed code it provided, put it in a 'placeholder',
played around with sizes and such... and bam!... there it is!

Got the job done... Now I'm sure If you're any good at Excel, you can create a pretty sophisticated calculator.

HERE IT IS...

cmpan1 - great idea
The table must be editable online.

Quote:

---

Originally Posted by cmpan1

I don't know if this will be of any help... but I too needed link to a calculator from a site... but just a simple calc...

I gave up on widgets and coded stuff. Why? Because I'm totally retarded when it comes to such things... so...

I just did my simple calculator in Excel which allows you to embed it into a site.... took the embed code it provided, put it in a 'placeholder',
played around with sizes and such... and bam!... there it is!

Got the job done... Now I'm sure If you're any good at Excel, you can create a pretty sophisticated calculator.

HERE IT IS...

---

It has its place but fails on handling button triggers and radio buttons. In your example, you do need to block entries into the formula fields.

It does require a properly licensed copy of Excel. The Excel code is horrendous. You need to keep a master Excel version available for changes.

Google Sheets or Google Forms might be a better start point.

Acorn

Quote:

---

Originally Posted by Acorn

It has its place but fails on handling button triggers and radio buttons. In your example, you do need to block entries into the formula fields.

It does require a properly licensed copy of Excel. The Excel code is horrendous. You need to keep a master Excel version available for changes.

Google Sheets or Google Forms might be a better start point.

Acorn

---

Acorn... it just is, what it is... and serves its simple, desired purpose.

• A free MS account (just like Google) gets one the online Excel "licensed copy" which can generate embed codes.
• Don't care much about, nor think about "The Excel code" LOL.... All parties like it... so, success! (I've been told, more than once by coders the Xara's code is horrendous) And I just laugh.
• and wouldn't I need to keep the Google Sheets or Forms available also for changes?

Like I said... it's just a simple thing that serves the purpose—without getting to deep into thought... and tearing it up for faults... (even if true) Gets the job done... (gets me paid) :D

Thanks!
Cliff

Quote:

---

Originally Posted by cmpan1

Acorn... it just is, what it is... and serves its simple, desired purpose.

• A free MS account (just like Google) gets one the online Excel "licensed copy" which can generate embed codes.
• Don't care much about, nor think about "The Excel code" LOL.... All parties like it... so, success! (I've been told, more than once by coders the Xara's code is horrendous) And I just laugh.
• and wouldn't I need to keep the Google Sheets or Forms available also for changes?

Like I said... it's just a simple thing that serves the purpose—without getting to deep into thought... and tearing it up for faults... (even if true) Gets the job done... (gets me paid) :D
Thanks!
Cliff

---

Cliff, I appreciate the rebuttal. I didn't know about the free on-line Excel. If it is on-line then you have a master copy as in Google Forms for editing/updating.
I have developed professionally with Excel and I would not use such a powerful tool in the wrong place; it is all down to a definition of "simple" - design/develop/explain/support/use/present.

As you say, in the end, it's if it is liked (and the money).

Acorn

Quote:

---

Originally Posted by Acorn

Cliff, I appreciate the rebuttal. I didn't know about the free on-line Excel. If it is on-line then you have a master copy as in Google Forms for editing/updating.
I have developed professionally with Excel and I would not use such a powerful tool in the wrong place; it is all down to a definition of "simple" - design/develop/explain/support/use/present.

As you say, in the end, it's if it is liked (and the money).

Acorn

---

Hi Acorn... for me it is all down to a definition of "simple"... because "simple" is all I could do... LOL
Sometimes it's frustrating not being a tech person because we really don't know the most efficient/better way to do something.
So we... I... live a computer life of 'work-arounds', 'shortcuts', etc.

And yes, it has it major limitations in that we... I... have a ceiling on what we can do. But at my age... I'm stuck with it...

And BTW, you...(and some of the other veterans) have been over a long period of time been SUCH A MAJOR help to me... I've been trolling your posts for a long time... LOL

Thanks Acorn!

Cliff

Cliff, keep on trolling! (My dog trills when excited)

Acorn

Quote:

---

So we... I... live a computer life of 'work-arounds', 'shortcuts', etc.

---

Ditto here Cliff.

Quote:

---

Originally Posted by Egg Bramhill

Ditto here Cliff.

---

Egg... you sir, are waaaaaayyyyyy to modest.... but thanks. :)

Cliff