Mechanics Website

DEVLOG #4

I did not expect this starting stage to take so long.

Just a few more tweaks and fixes i made to the SUVAT calculator.
I noticed that incompatible variables can still leak through specifically when 4 variables are inputted. To fix this I got rid of the “output box” in favor of replacing the values in the input boxes themselves. The last 3 values inputted take priority and the remaining two get replaced if they aren’t correct when compared to the last 3 values.

Even though it seemed like such a simple fix, it was painstakingly difficult to implement. I spent a lot of time learning to a insane depth on how arrays and arrow functions can be used in situations like these.

Having this fully refined before starting to implement the graphics and more advanced math will help out a lot in the long run.

Hopefully this should be the last fix and I can finally start working on the good stuff now

DEVLOG #3

No major UI changes apart from using placeholders instead of labels in the input boxes to make them a bit smaller. This change will make it look a bit nicer and less clunky when I add more graphics and components.

I’ve mainly been doing backend work. I’ve learnt how to import and export functions between JavaScript files and have used that to organize things better.
I created separate files for collecting inputs, doing the necessary calculations and outputting the results. Although this hasn’t changed anything on the frontend, it will be massively helpful when I scale up and add more features.

However, these changes absolutely nuked the live update bit of the website which was something I really wanted to focus on because of how interactive it made the site feel.

I had to completely rework how that feature worked which is now a lot more complex than it was before. I also had to edit and debug a ~150 line IF Statement almost 6 separate times due to changes in how the live update worked making the calcSuvat() function be used in completely different ways.

The new file architecture will work by having two main files (main.js and input.js) and two folders (“topics” and “graphics”).

input.js will collect the inputs and configure them e.g. resolving forces and converting from radians to degrees. Afterwards, it will send the configured inputs to the files in the “topics” and “graphics” folders.

main.js will output the results given from the “topics” and “graphics” folders as the inputs are updated.

The “topics” folder will contain all the math needed to answer the questions e.g. the SUVAT calculator and then sends all the answer’s to main.js

The “graphics” folder will contain all of the graphical components that will be used to depict the diagrams of each question. These will also be updated as the inputs change and will be sent to main.js.

Next, I will either start on the making some of the graphics or add more variables to input to fully flesh out the maths portion of the projectile motion calculations.

DEVLOG #2

The website actually looks half decent now. Obviously, this will change as I add the main features but the general vibe is there.

The feeling I’m going for is a mix between the youtubers “Hyperplexed” (who makes UI improvement videos) and “3Blue1Brown” (who make insanely awesome science videos).

I would say CSS is the trickiest to work with out of the three but also the most fun. I spent a lot of time messing around with the different functions throughout making this.

At the start, my knowledge of CSS was incredibly basic to the point of non-existent. I was learning new syntax as I went which i found very enjoyable and helped me understand it way more than if i had just watched a tutorial on it.
Having a result of what I learnt boosts my motivation like crazy.

Next time ill start on modifying the current functions to allow for inputting the horizontal and vertical SUVAT components, something essential for projectile motion.

After learning basic syntax for Javascript, HTML and CSS, i’ve started the first steps towards the website. I’m starting off with the “Projectile Motion” section, where the SUVAT calculator will mainly be used. It is incredibly barebones right now, i haven’t even touched the CSS aspect of it at the moment. I’m still trying to pin down the specific design aesthetic. That’s pretty much all for today’s work, ill try to finish off the design aspects tomorrow.