[ Solo ] Deployed
LineaRecta
A web tool to calculate and visualize the shortest distance from a point to a line.
- HTML
- CSS
- JavaScript
- Canvas API
What it is
LineaRecta is a client-side web application that solves a classic geometry problem: finding the shortest distance between a point and a straight line. Built with vanilla HTML, CSS, and JavaScript, it provides an interactive experience where users can input the parameters of a line and the coordinates of a point, and see the result both numerically and visually on an HTML canvas.
Decisions
- Built with vanilla JavaScript to keep the application lightweight and dependency-free.
- Used the HTML Canvas API to provide a visual representation of the geometric problem, enhancing user understanding.
- Implemented the core mathematical formula for point-to-line distance directly in the client-side script for immediate feedback.
- Designed a simple, single-page interface for ease of use and focused functionality.
Build log
- Developed the HTML structure for input fields and the canvas element.
- Wrote the core JavaScript function to calculate the distance using the standard formula.
- Implemented the canvas drawing logic to plot the line and point based on user input.
- Added event listeners to trigger recalculation and redraw on input change.
- Styled the application with simple CSS for a clean, user-friendly layout.