Calculator

This post illustrates the use of Observable for making a simple calculator that can help estimate lengths of string needed to make garment hangers.

how-to
JavaScript
Author

Nathan Craig

Published

June 28, 2023

Modified

March 21, 2024

This is my first practical application of Observable JS. I was writing up documentation for some hangers I plan on making and I wanted to easily estimate lengths of string. The hanger is a three point isosceles triangle which allows us to use some special formulas.

Hanger Construction Method

  • Cut a section of dowel appropriate for the length of the object
  • Lightly sand the dowel ends to remove any splinters
  • Screw eye hooks into the ends of the cut dowel, consider a pilot hole
  • Double two separate sections of kite line for the appropriate length for the and tie one through each eye hole.
  • Once tied, wrap dowel in ethafoam and add a layer of acid free paper
  • Carefully drape the textile on the dowel
  • Use the S Hook to hang the object on the rack

Geometry

The hanger will form an isosceles triangle with a known base, which is the length of the dowel. We can arbitrarily stipulate the height of the triangle to be anything we want, depending on how low from the rack we want the dowel to hang. The longer the sides, the lower the dowel will hang, and visa versa. Knowing the length of the dowel and our desired hanging height we can use the formula \(Side = \sqrt{Height^2 + (Base/2)^2}\) to find the length of the string. Since the strings are doubled, with a bit extra to tie them, the approximate length of each string should be \(Side * 2\).

Calculator
viewof base = Inputs.range([0,100], {value: 5, step: 1, label: "Base"})
viewof height = Inputs.range([0,100], {value: 5, step: 1, label: "Height"})

When the base is and the height is then the side should be .

part1 = Math.pow(height,2)
part2 = Math.pow((base/2), 2)

side = Math.sqrt(part1 + part2)

Citation

BibTeX citation:
@online{craig2023,
  author = {Craig, Nathan},
  title = {Calculator},
  date = {2023-06-28},
  url = {https://ncraig.netlify.app/posts/2023-06-28-observable-calculator/index.html},
  langid = {en}
}
For attribution, please cite this work as:
Craig, Nathan. 2023. “Calculator.” June 28, 2023. https://ncraig.netlify.app/posts/2023-06-28-observable-calculator/index.html.