Need Help?

lessonEight: fun with triangles

This guide needs to be used alongside the lesson video.

problem statement

  1. Ask the user to input three angles and you say whether the angles make a triangle or not.
  2. Prepare a Quiz and enable the user to play the quiz and calculate scores based on the answers chosen by the user.
  3. Calculate hypotenuse of a triangle given the other two sides
  4. Calculate area of a triangle given the base and height of a triangle
  5. Here's the link to the actual problem statement.

how will we complete this? ūü§Ē

We will be using HTML, CSS, and Vanilla Javascript to complete this assignment, but you can also complete this using¬†REACT¬†ūüėĄ

Our end goal is to complete this assignment and build our logic.

So let's START!!!

tech stack used: Html, CSS, and Javascript

what are we going to build?

Is Triangle?

problem 1: is Triangle?

ex-01: structure the html for is triangle problem


  • Create three inputs to get the angles of a triangle from the user
  • Create a button¬†Is Triangle?¬†to check if the angles form triangle or not
  • Create a¬†h2¬†tag to show the output

ex-02: select the elements using queryselector


Use querySelectors to select the three input tags , button tag and the h1 tag


ex-03: create a function isTriangle


  • Create a function¬†isTriangle¬†which checks if the angles form a triangle or not
  • Calculate the sum of the angles using a function¬†calculateSumOfAngles
  • if¬†sumOfAngles equal 180 degrees, then the angles form a triangle, else they don't form a triangle
  • Check the results in the console


ex-04: display the output


  • Display the output in the DOM

problem 2: triangle quiz

ex-05: Structure the HTML for Triangle Quiz


  • Create a¬†form¬†that contains the¬†quiz container¬†and a¬†button¬†to submit the form
  • Make sure that the quiz container has a question and radio buttons for options
  • Create a¬†h2¬†tag to show the output


Question1:¬†What is the third angle for the triangle where angle1 = 45¬į and angle2 = 45¬į?

Options:¬†45¬į , 90¬į , 60¬į


Question2: If a triangle has an angle of 90 degrees, what is it called?

Options: obtuse , acute , right angled

Answer: right angled

ex-06: select the elements using querySelector


  • Use querySelector to select the form tag, submit button and the h2 tag

ex-07: create an array of answers


  • Create an array of answers to the questions. This array is used to compare the correct answer with the user-checked answer
const correctAnswers = ['90¬į', 'right angled'];

ex-08: create a function

  • Create a function¬†calculateScore¬†which is used to calculate the score based on the user's answers
  • Initialize variables¬†score(to keep track of user's score) and¬†index(to access the correctAnswers array)
  • Use¬†FormData¬†API to get the data from the form
const data = new FormData(quizForm);
  • Iterate through the data to calculate score,
    1. if the value in the FormData equals the correctAnswers array, increment the score
    2. Increment the index to access the next element in the correctAnswers array
  • Check the results in the console


ex-09: display the output


  • Display the output in the DOM

Bonus (Optional)

problem 3: calculate hypotenuse of a triangle

What is the hypotenuse?

In a right-angled triangle, the hypotenuse is the longest side, the side opposite the right angle.

Length of the hypotenuse c = sqrt ( a² + b² )

ex-10: structure the HTML


  • Create two inputs to get the length of two sides of a right angled triangle
  • Create a button¬†Calculate Hypotenuse¬†to check the output
  • Create an¬†h2¬†tag to show the output

ex-11: select the elements using querySelector


  • Use querySelector to select the input tags,¬†Calculate Hypotenuse¬†button and h2 tag

ex-12: create a function


  • Create a function¬†calculateHypotenuse¬†which calculates the length of the hypotenuse.


ex-13: display the output


  • Display the output in the DOM

ex-14: club them together!


  • Create a navbar and navigate through different


problem 4: calculate area of triangle

Area of Triangle A = 1/2 (base * height)

Hint: Follow the same approach as Problem 3

Bonus (Optional)

  • Create the same application using React to get a good hold in reactJS
  • Create an application by taking another shape and calculate area

assignments for markTwelve

Use this guide to build a "fun with triangles" app in VanillaJS or React and this would be your markEleven project from the mark15 checklist.

stuck? need help?

If you have doubts anywhere during levelZero, we have a 21k+ strong developer community on Discord.

Go to Discord Server and ask doubts in the general-coding channel.