Short JavaScript notes and small code examples.
Three-variable swap simulator
Cheat sheet
✍️ React simulator for swapping three variables
✍️ Link to play
✍️ SVG used for circle alignment
Lecture
In previous posts we discussed swapping values of two variables. Here we present a simulator for three variables. Three circles represent variables, and their colors represent values. Six buttons cover assignments a=b, b=a, b=t, t=b, a=t, and t=a. Press a button and the assignment happens immediately.
We used React to build the app and Vite for bundling. There were several interesting implementation details that we will describe later. First task: how do you place three circles at the vertices of an equilateral triangle?
There are several approaches:
Grid with fixed cells: plus - simple; minus - not obvious and probably approximate.
Canvas: plus - precise coordinates; minus - elements are not clickable, canvas is raster.
SVG: plus - coordinates, clickable elements, concise code.
We chose SVG. You can view the code on GitHub. That is all for today; we will explain this technology in more detail later.
#education #devJS #devTopic #junior