Project I picked up to learn html, css and js
Okay so this project has 4 main steps for its completion:
- basic unit converter with 2 set units that you cant change (ex. a converter that only goes from celsius to fahrenheit)
- unit converter with a few units you can convert between where you can choose the units to convert from a select field (ex. a converter where you can choose from celsius, fahrenheit and kelvin)
- unit converter with different modes, meaning, you can convert time units, length units, temperature units and so on
- a unit converter with different modes and one of those modes in currency, where the conversion is actually out sourced to a different data base that keeps an updated list of exchange rates
Obviously each step builds on the previous one. I started with converting temperatures because there are relatively few units to work with (just 3). Once I figured out how to set up the basic structure, how to have the input fields affect each other, and how to grab the value from the selector and I decided to make my conversion method work as follows. My thinking is very simple, instead of having a bunch (6) if statements for every kind of conversion the user might be looking for (F to C, C to F, F to K and so on) I will just convert the given value to a common unit, and then from there I will convert to whatever unit the user was looking for. Simple enough to do using two switch statements, the first one checks the input unit and for each case does the appropriate conversion to the common unit (for tempreatures I chose Celsius to be the common unit because I like it the best :) and the second checks the (desired) output unit and converts it appropriately to the final value which is then returned. This approach works super well for the temperature converter since there are few units, but obviously the switch statements get pretty lengthy the more units you have. If you have N units to convert between the two switch statements together will have 2N - 1 cases (I didnt have a default case which maybe? I should but whatever). This is technically better than N(N-1) if statements (Wow guys going from O(N^2) to O(N) so cool).
Anyways after I build a solid temperature unit converter I started working on step 3 which deffinetly took some time (couple of days) because a lot of stuff kept breaking (notably I accidentally used = in an if statement instead of == and was super confused when one of the variables kept being reassigned to a value out of nowhere, which is crazy because Java would have given me an error for that so fast and so much time would have been saved). Anyways, I am a little proud of how all the stuff is organized. I tried to reduce the code as much as I could, but you know, I am still closer to the beginner level so maybe some of it isn't as efficient as I think or as it could be. Notably, I like how I managed to change the colour of the buttons (specifically changing back the colour of the previous button). Overall, the changeMode method I think is kinda cute. I thought that the fact that java script had the option of having an array of functions was super cool and I used it to call the different conversion functions (Mode acting as an index so there is no need to check what the mode is and call the function in a switch guy). Though I wish js had an enum class like in C so that mode could have an int value, but also be more clear in what value is what. I used an array of strings to put in the options though perhaps it would have been a JSON file. Also I have been writing all the conversion functions by hand using the aforementioned method and wowza it's a lot of code that looks very redundant, but what can you do if all the conversions are unique. Honestly, I feel like this might not be the best way to achieve what I want, but I cannot think of anything better.
For step 4 I used https://www.frankfurter.app/docs/ API and that's about as much as there is to say about that.
Okay thats all for now.
Love, Tasya Zhizhina