Building a Web Knitting Calculator – 2 Doing Stuff

Project Navigation

To continue our project in building a yarn HTML calculator this post will cover the JavaScript side of the calculator. If you are newer to programming an easy way to understand how JavaScript works within our project is that JavaScript is the part that makes our calculator ‘do things’.

For a more indepth explanation of how JavaScript works I highly recommend Codecademy https://www.codecademy.com/ course on JavaScript, or for quick reference W3Schools https://www.w3schools.com/jsref/default.asp .

This project is very simple, and kept so by controlling the users input so we will only be covering some basic concepts when it comes to JavaScript. JavaScript is actually a very thorough programming language and there are whole games built using it.

With that, lets get back to this project, we left off with the HTML form or the backbone built. First we will add into the HTML form to call the external JavaScript sheet we will create, as well as to call the a reference to the jQuery / JavaScript library that will allow the JavaScript functions to work.

Then we will also add the event listener for the user to click the submit button, this will call the function in the linked external JavaScript sheet.

And to the drop downs we will also add event listeners to reset the form to ensure old information is not presented when new selections are made, this will help to improve the user experience.

If you haven’t already done so create a new .js document, and title it “YarnCalc_JS.js” this is where the functions will be built and saved. It is possible with such a small application to simply wrap all of the functions within a <script> tag, however best practice is to separate these out into their own JavaScript document. Using an external JavaScript sheet allows for the functions to be called from a different application in the future, as well as keeping the HTML document organized and clean.

This is our first function, calcKB()  will do most of the heavy lifting.

1. Define the function calcKB(), all of the actions that need to be executed will be wrapped in this code block
2. bsize and weight – initialized with the id’s for the dropdown lists from the html page
3. SelectSize and SelectWeight – initialized with the users selected value from the dropdown lists
4. Totalinch and inchsq – empty variables for the total square inch and total inch to be calculated later
5. Declare variables for each empty label that we will output to, initializing them with the label’s ID from the html page.
6. Create a blanket object
   • The blanket object will have the properties of the actual item we are detailing with the blanket calculator, these properties can be set and reused.
   • Properties within the blanket object:
     • Size and weight – these are user inputs and set with the variables declared in step 3
     • useNeedles, yardageNeeded, dimensions, and toCastOn will all be set by calling functions
7. Update the HTML form with the output by calling the object’s properties

Notice that the functions used to set the useNeedles, yardageNeeded dimensions and toCastOn properties are all named different, this is because even though they are all very similar in how the are setup and work each function returns specific and unique information. Utilizing different functions for each one of these properties allows for more re-useability of the functions and cleaner code to read over later.

 Since the functions to set the useNeedles, yardageNeeded dimensions and toCastOn properties are all very similar we will only take a look at the getTotalsqInch function which sets the yardageNeeded property as it is doing a little bit of actual math.

1. Define the function getTotalsqInch, notice that this function will take two parameters weight and size these are passed in when the function is called.
2. Switch statement – this is like JavaScript’s select case or case expression, the first one will evaluate the value of the passed in variable weight and based on the which case is true will set the global variable inchsq.
3. Switch statement – this switch statement will evaluate the value of the passed in variable size, and set the value of the global variable totalinch.
4. Calculating the dimensions –
   • To get the total yardage needed we are using the equation
   • inches / 36  * inches of yarn per sq inch = total
   • Totalinch is the total inches of the blanket based on the size selected, and then the total inches of yarn per square inch is based on the weight of yarn selected. This is broken down into two lines for readability. The JavaScript Math.floor() function is also used to round the resulting number to a round number.
5. Return the variable tot to the variable that called the function, this in effect sets the value of the blanket objects yardageNeeded property.

To wrap up the JavaScript portion of the project now all we need to do is set up the reset function which will be triggered when the user changes the drop down lists.

This function is pretty simple and directly manipulates the DOM (or HTML page). And there we have it, the JavaScript portion of our project is completed. This is what our app looks like so far –

Next post in the project series will wrap up and style the application. If you’d like to see the finished app check it out here.