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. Be able to store the conversion so that I can compare it next time.īy the end of today’s tutorial, the page will eventually look like this:.To convert that value into stones and pounds, displaying the result, and.To allow me type in my weight in kilograms.What would be my incredibly demanding requirements, though? No, I’d rather I had my own one, but even better, it could remember what my weight was the last time I used it. That is pretty slow and even if I bookmarked the page, I would still have to deal with all the ads etc. I prefer to see my weight as stones and pounds, so each week, I DuckDuckGo a search, find a calculator site, visit it, deal with their massive page loads, and eventually get the conversion done. My weighing scales - the ones I use to weigh my hefty frame - tell me my weight in kilograms.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |