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

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

understanding

• querySelectorAll

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

understanding

• Typecasting

ex-04: display the output

challenge

• Display the output in the DOM

problem 2: triangle quiz

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°

Answer: 90°

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

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

understanding

• How FormData works

ex-09: display the output

challenge

• Display the output in the DOM

Bonus (Optional)

• Template literals

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.

understanding

• Math.sqrt()

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

Homework

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.