![]() 1Ĭonst calculateTotalPounds = ( kilos, poundsInAKilo) => kilos * poundsInAKilo Ĭonst convertKilosToStones = ( pounds, poundsInAStone) => Math. Add these in next, right underneath the other JavaScript. For these, we need three: kilos to pounds, pounds to stones and pounds left over once we’ve calculated the stones. Now we need to do the calculation functions. getElementById( "pounds") Ĭonst stoneElement = document. getElementById( "kilos") Ĭonst poundElement = document. I don’t want to keep looking these things up but with such a small page, it wouldn’t be a problem if we did. Under that, add in some constants which point to elements in our DOM. Here we have the number of pounds in a stone (14) and the more accurate number of pounds in a kilo. I’m going to start with some constants rather than plug magic numbers throughout the code. Adding in the Calculationsįor simplicity, we’ll add in the JavaScript just under the DIV in a SCRIPT tag. pounds are the remainder of totalPounds divided by 14.stones are the whole number of totalPounds divided by 14.totalPounds is equal to kilos multiplied by 2.2 (approximately).We can use some mathematical functions to do the hard work for us here but let’s illustrate it with pseudo-code, first. That remaining portion would be 8 pounds, a little over half a stone. Leaving aside how dangerously ill I would be, we can use some back-of-an-envelope maths to know that that would be 1 stone (22 - 14 = 1 stone) and some left over. If I were 10 kilos, that would be 10 * 2.2 pounds, which gives us 22 pounds. Once we have that, we can work out how many stones a person is by dividing that total number of pounds by 14, because there are 14 pounds in a stone. I know that there are about 2.2 pounds in every kilo, so if we multiply the two together, that will tell us how many pounds we have for a given number of kilos. Here’s a good point to explain what you need to do when converting between kilos and, stones and pounds.įirstly, to translate between the values, we need to first convert the kilos to pounds. ![]() Let’s handle that now once we’ve got the maths out of the way. Take a look at what the HTML looks like so far - visually, it’s pretty close, but of course, clicking d’at button doesn’t do anything. Both output tags have an ID names stones and pounds - we’ll need those soon enough. A nice touch is that you can specify what elements contributed to this result, which here, is where I use for="kilos" - the INPUT element. I used an OUTPUT tag here, which, to be honest, I hadn’t seen before, but it’s perfect for this because it refers to the result of something. Lastly, wrapped in a DIV are where the results will ultimately be placed. Lastly, I have told the browser that I’d like to allow the arrow functionality to increase or decrease in steps of 0.1, which is 100g - that should be OK.Īfter that comes our BUTTON with an ID of convert which is the thing we will press when we want the conversion to happen. Why did I pick those values? I’m not sure, but for me, I can safely say it’s the lower and upper bounds of where I want to ever be. I’ve pre-seeded it with a value of 90 (don’t ask if that is my weight - that’s not important!), specified a minimum of 30 and a maximum of 120. That’s a type of “number” which means we will get some nice arrow up/arrow down buttons, and can also use the arrow keys. For this, we have used a LABEL and said that it is “for” the INPUT field which is below it. We’ve given it a suitable H1 tag: Convert Kilos to Stones and Pounds. I’ve given it a nice title, as you can see, but what about the main input and output elements? Inside the body tag, add this section of code in we’ll explain it straight afterwards. I know - it’s stunning, but put that aside, we’ve work to do.īegin by creating a new HTML file and call it weight.html.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |