Skip to main content

✏️ Practice: Triangle Tracker

Goal: Practice bringing together everything we've learned in this section by creating a project that includes custom functions, branching, forms, and event listeners.

Warm Up​

  • What is block scoping? Which variable initializers allows us to scope variables to a block?
  • Pausing on exceptions and setting breakpoints are both powerful tools from the browser DevTools debugger. When would we choose to set breakpoints to debug our code instead of the pausing on exceptions tool?

Code​

Everyone should complete the "Triangle Tracker" project first. Once you've completed it and have more time in class, build the "Online Marketplace" project.

Triangle Tracker​

Make a web page that allows the user to input the lengths of the sides of a triangle, and returns whether these sides form an equilateral, isosceles, or scalene triangle, or if the sides cannot make a triangle at all. Here are the definitions of each possibility:

  • Equilateral: all sides are equal.
  • Isosceles: exactly 2 sides are equal.
  • Scalene: no sides are equal.
  • NOT a triangle: the sum of the lengths of any two sides of a triangle is less than or equal to the length of the third side.

In your code, make sure to use the following:

  • pausing on exceptions and breakpoints to debug
  • event listeners with function declarations

Once your application is functioning correctly, try to refactor your code as much as possible to make your code easy to understand and read, and so that your UI and business logic is separated.

Optionally, add CSS to your Triangle Tracker. If you haven't already, try using Bootstrap!

Online Marketplace​

Create a website that sells a specific product. Create a form that allows buyers to select a product to purchase. If your online marketplace sells jewelry, include form fields denoting whether they're ordering a bracelet, necklace, or earrings. Make sure to take in the buyer's shipping and payment information in this form.

When the buyer submits the form, use branching to add a discount to the order based on what the user has selected to purchase. You can make this as complicated or as simple as you like.

Then, display a receipt with all of the order information back to the user, including the discounted price.

As you code, make sure to use the debugging tools you have learned about in this course section.

Once your application is functioning correctly, try to refactor your code as much as possible to make your code easy to understand and read, and so that your UI and business logic is separated.

Add CSS to your online store to make it look more professional or inviting. Or add a stylistic theme that matches whatever your store is selling.