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!!!

Is Triangle?

# ex-01: structure the html for is triangle problem

## challenge

• 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

## challenge

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

# ex-03: create a function isTriangle

## challenge

• 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

## challenge

• Display the output in the DOM

# ex-05: Structure the HTML for Triangle Quiz

## challenge

• 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

### Questions

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

# ex-06: select the elements using querySelector

## challenge

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

# ex-07: create an array of answers

## challenge

• 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

## challenge

• Display the output in the DOM

# 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

## challenge

• 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

## challenge

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

# ex-12: create a function

## challenge

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

# ex-13: display the output

## challenge

• Display the output in the DOM

# ex-14: club them together!

## challenge

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