Skip to main content

Lab 3: Javascript & DOM

due in-class Monday, Feb 8th at 10:50AM, accepting submissions until Wednesday, Feb 10th 10:00AM


Before starting this lab, ensure that you have:


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).

You will be returning to the main class session before rejoining your Breakout Room to complete the next step of the lab.

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:


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:

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.