A small React + TypeScript project that lets the user input three points, then displays the corresponding triangle on an 800×800 canvas with its angles marked and labeled.
You can also check the imgs/ folder for screenshots of the app in action.
*The CSS file is the built-in one from the initial setup, and I didn’t actually use it in the implementation.
1. Method for drawing the triangle and why I chose it
I used an SVG <polygon> plus simple <circle> markers for the vertices. SVG was chosen because it’s straightforward, easy to scale, and works well within React without external graphics libraries.
2. How the angle values were calculated
I computed side lengths using the distance formula, then applied the Law of Cosines to derive each interior angle in degrees.
3. What was challenging
The main challenges were time pressure, setting up a project from scratch quickly, and recalling geometry formulas while coding. Balancing implementation speed with accuracy was tricky.
4. Unsolved parts or gaps
I met the functional requirements, but I didn’t have time to polish the UI design. Another gap was my limited recall of geometry details, which slowed me down a bit.
5. External help used
Yes. I used AI to help scaffold the initial project structure and consulted the internet for geometry formulas and references on rendering the triangle in SVG.
# Install dependencies
npm install
# Start development server
npm run dev
# Open in browser (http://localhost:5173)