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:
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.
Lab Handins on Course Website
Keep in mind that each submission for this lab will be anonymously displayed on the course website, so please keep this in mind and do not put any identifying information in your handin.