1210 chars43 lines
The PlanetSelect.svelte
component display a form that allows the user to select a planet from a menu of all planets in the solar system and enter their weight in kg. Upon submitting the form, the component calculates the actual weight in newtons according to the selected planet's gravity and display the result on the page.
The planet's data is stored in an array of objects, each object contains the planet name and weight relative to earth's gravity. The selected planet and user input weight is stored in reactive variables using the let
keyword and the bind
directive for two-way binding.
The calculateWeight
function is called when the user submits the form. It multiplies the user input weight with the selected planet's weight relative to earth and the gravitational acceleration constant of 9.8 m/s² to get the actual weight in newtons, which is stored in the result
variable.
The result
variable is conditionally rendered using the if
block to display the result message when the result
value is greater than 0.
This way, the user can quickly check their weight on other planets by selecting from the drop-down menu and entering their weight on earth, which makes it easy to perform the necessary calculations.
gistlibby LogSnag