Setup

Before starting this lab, ensure that you have:

• Accept the Github Classroom assignment and clone this repo that contains stencil code for lab3.
• Go to Google Jamboard

Introduction

Chef Skinner is a short, grumpy man who is shown to hate rats very much is planning to overthrow Gusteau's Restaurant, and has convinced most that he is the better candidate for the role because of his honesty. However, Gusteau has noticed that Skinner may have lied during a campaign speech! During his speech, Skinner said that: "Any three side lengths can form a triangle ..." Now Gusteau has asked you to help him defeat Skinner by uncovering the truth about triangles!

Part 1: Design & Sketch

In order to help Gusteau defeat Skinner and show that he is lying, we need you to write a webpage that displays all sorts of facts about triangles! The webpage should be able to take in 3 non-negative numbers for the side lengths of a triangle, and then display some relevant information (see Requirements).

• Create a Google Jamboard and share it with your team.
• If you would like to opt out of using Jamboard, you can draw on a piece of paper and upload a photo of the result (although collaboration may be more difficult with this method).
• Design the front page with the input form, submit-button and where to display the result!
• Export your Jamboard sketch as a PDF and upload it to Gradescope using this link.
  • One member from the group should submit the design and ensure that your group members are included in the Gradescope submission. Do this by clicking "View and edit group" and select your group members.

Part 2: Functionality

We want you to use HTML and CSS to design and style this webpage and client-side JS to dynamically update your webpage with the triangle facts. Make sure to perform error checking with JS so that Skinner doesn't do anything devious with your webpage! For example, if Skinner has non-numeric inputs, you should give an appropriate error (that is different from the not-a-triangle error when inputs are valid but do not form a triangle).

In case it's been some time since you've worked with triangles, the following resources may be useful for a quick refresher:

• Classification of Triangles
• The Law of Cosines
• Heron's Formula
• Radians to degrees
• JavaScript Math functions

Requirements

Fill in the index.html file and the style.css file so it has 3 input fields for numbers and a submit button. On submit use JS, triangle.js to display (on the same page) the following about the 3 side lengths:

• Whether the 3 side lengths form an equilateral, isosceles, or scalene triangle, or if the side lengths do not form a triangle
• The 3 angles of the triangle
• The perimeter of the triangle
• The area of the triangle
• If the triangle is acute, right or obtuse
• All display values should be rounded to the nearest tenth Take a look at toPrecision()

To be clear, if the side lengths do not form a triangle, only display that the sides are not a triangle (do not display the area, perimeter, etc.).

Handin Instructions

Hand in your code for this lab via Gradescope. Please create a zip file of the stencil code root directory and hand in this zip file in your handin. Only one team member should upload their local version of the code and then assign group members after submission.