![]() Most machines, for example, can be sold for scrap if necessary. The asset may be either sold or scrapped to achieve the salvage value. ![]() Salvage value is a measure of the remaining value of an asset after that asset has reached the end of its useful life. Here is the entire code that would go into the script.js file: document.Estimate salvage value. We will not go into tiny details of JavaScript since you’ll find many useful resources online. To link this new file to our main HTML file, we will add the following line right before the closing tag: We will create a new JavaScript file script.js and place it in a new js folder inside our project directory. If you notice in our HTML code, we had an id element for each of the input fields, the Calculate button, and the H3 tag we created for our result. What we would like to do, is once the calculate button is clicked, we will grab the width and height entered by the user, calculate the BMI, and display it in the room we created, underneath the Calculate button. This is where JavaScript comes in, to glue everything together. You will see that everything resizes nicely if you change the dimensions of your browser:Įverything looks so alive, yet so dead! If you push the button, nothing will happen. Īnd it looks almost like what we had at the start: Here is our HTML after all these additions. ![]() Also, we need to make room for where the BMI result will appear. This is what we will type in our CSS file:Īlso if you want to be even fancier, you could add an image above the input fields. What we would like to do is add a background color other than white. ![]() We can actually create our own CSS file (style.css) and add it to our HTML page the same way as before. Applying a responsive layoutīy using templates from Bootstrap’s forms section on their website, we are able to create the following block: Īnd with Bootstrap’s magic, this is how it will look like: To beautify things, we will be using the Bootstrap CSS framework, that already has many ready-made styles which we can use.ĭownload Bootstrap from, and add the CSS files to your project structure, and add the following line right before the closing tag: Īs a reference, you will be able to see many different Bootstrap styles you can apply to your project, from this page. We have mainly used their forms styling, to have a neat responsive look for our input elements. But before that, let’s try to make things look prettier through CSS. Especially with the design standards for modern-day websites and services, you want to be offering something encouraging.Īt the moment, nothing will happen when clicking on the Calculate button, as we still need to add some JavaScript to our code. We can carry on using only this HTML, without any additional CSS, but it won’t be very friendly to the user. Not very fancy, as we’re not using any CSS yet. This will show the input elements that the user can type in his weight and height, and a button reading “ Calculate“. We will do that using simple HTML input elements, and a submit button, inside a blank HTML file named index.html. These two values need to be fetched from the user. The formula depends on two input items: weight and height. If you’d like to have the source files for this widget to follow along, you can download it from here. The resulting units are kg/m 2. To give you an idea, here is a screenshot of what the final widget will look like. The formula is simple: the person’s weight divided by the person’s height squared. Following our previous post introducing the Book Widgets, in this post, we will be actually developing a BMI calculator widget to use in an interactive ebook about health and fitness.īMI (Body Mass Index) is a metric used to calculate the amount of tissue mass in a human body and based on that value, categorize the person as underweight, normal weight, overweight, or obese. If you want to have the utmost flexibility creating interactive ebooks, then it’s best to learn how to develop a book widget yourself. Book widgets may shape the future of interactive ebook technology.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |