Posted inprograming

Building a Web Knitting Calculator – 1 The Bones

Project Navigation

HTML – The Bones (this post)
JavaScript – Doing Stuff
CSS – The Looks

We have built a simple fabric calculator in Excel, now we will build a similar calculator  utilizing HTML, JavaScript/jQuery and CSS to calculate the yarn needed for a blanket that can be used on the web. To see the finished product, you can head over here the growing collection of calculators here.

Similar to the excel calculator we will specify the user inputs and define the outputs for our calculator.

The inputs will be:

  • Blanket size
  • Yarn weight

And the output to the user will be:

  • Number of stiches needed to cast on
  • Recommended needle size
  • Total estimated yarn needed in yards
  • Finished blanket dimensions

With the project defined lets get started. HTML is the scaffolding of the project that everything else is build on and interacts with, this post will cover setting up the HTML structure.

I am using the I.D.E brackets for this project, this is open source and you can download it here. You can also use Visual Studio Code if you prefer which is Microsoft’s free I.D.E. and similar to Visual Studio.

Start with a new html project, ensure that you save the document as ‘.html’. In brackets, go to the file menu, select new and from the left menu right click on the untitled new file and select ‘Save As’.

Set up your empty file within the code editor as follows, I have also pointed out where the ending tags are within this image. We mainly be working within the body tag. With bigger projects it is very easy to leave off an ending tag, to help with this try to ensure proper tab formatting for each layer of encapsulating tag, not only will your code look cleaner and easier to read but must IDE’s will have connecting lines to help you figure out if there is a missing opening/ending tag.

  1. DocType – this declares the type of file as html
  2. HTML Tag – the html tag encapsulates the entirety of the script for the page.
  3. Head Tag – later this is where we will link external the external CSS and JavaScript sheet.
  4. Title Tag – If this is a standalone html page this is where you can put the title of the tab within the browser/the title of the page itself. As a good practice always title html pages appropriately.

For HTML the tags “ <!– –>” are notations and will not be displayed on the webpage.

  • Body Tag – Within the body tags is where the main page items will go to be displayed for the user.

Within the body tags start off with a main div to wrap the calculator and the two divs to section out our the input and output.

  1. Outside Div – wraps entire calculator code, this will be used more for the styling of the calculator using the class and ID attributes.

Something to note, id’s must be unique where as classes can be shared, this allows for different targeting and defining of elements within the HTML structure.

  • Label – Give the calculator a name
  • Input Div – this div will encapsulate the input drop down boxes
  • Output Div – this div will encapsulate the output to the user

 Within the input div build out the drop-down selectors for the two inputs, and add a submit button.

  1. Label – add a label that will inform/prompt the user for input
  2. Select – HTML uses a combination of Select/Option tags for dropdown lists, the onclick event is a trigger that will call a function built out later in the JavaScript.
  3. Option – Option’s within a select tag are the items within the dropdown list container that the user can select, the value attribute is what will be passed to a function requesting what was selected.
  4. Button – Allow the user to submit their choices and view the results, the onclick attribute again will call a JavaScript function to be written later.

Lastly inside the output div,  build  the divs that will be styled by CSS and updated by the JavaScript functions to display the outputs to the user. This will get a little deep as we will be essentially building a grid for the output cards, keep in mind formatting for cleaner and easier review.

  1. Row Div – there will only be one row, this div wraps all of the columns of the outputs.
  2. Column Div – each output will have its own column; these will all share a class to be styled later.
  3. Output Div – this will hold the induvial outputs and will also share a class, label each output between the div tags.
  4. Label – each label will have its own ID but will be left empty as place holders to be updated via the JavaScript function.

Now the HMTL for the most part is done, and if you’ve followed along with the classes and ID’s you will have a good jump start on the styling and JavaScript. For now this is what the project looks like this





Cast On Stitches
Recommended Needles
Est. Yardage
Finished Dimensions

This is very basic and doesn’t actually do anything when input is selected and submitted. Next time we will cover the JavaScript which will handle the ‘doing’ of the calculator.