Help with my first JS app

Help with my first JS app
0.0 0

#1

Hi everyone!

Been thinking for a while what my first project should be and finally decided.
I want to recreate the Converter of Google for different scenarios(mass, energy, length etc) Like this

I was able to create the UI and everything but after I started to write the js code I thought its right till I faced a problem that I didn’t know what will be the logic…

Far as I understand there needs to be 5 event handlers for the options above, both input/output and their options under.

The question is how should I approach the layout of the code?

Repo: https://github.com/dbsimeonov/javascript-apps
Its not much I know.


#2

Paste your github repo or codepen so we can see the UI! Other than that, I’d say dive right in. Most things are crap the first go round (or maybe that;s just me… haha!) so plan to iterate it several more times.


#3

Just attached it to the post above (y)


#4

W3Schools has a few examples that should help…
https://www.w3schools.com/howto/howto_js_weight_converter.asp


#5

I can do that, the problem is I’m unsecure how to handle all of the EventHandlers if the user changes units/options. With the Converters I found tutorials have only 1 output/input


#6

I would start simple and converter for a single type (mass, weight, distance etc) and then expand functionality.

You shouldn’t need 5 event listeners.

  1. on the button that fires your conversion logic; this should capture the input type, output type and input amount, does the appropriate conversion and then populates the answer to the output field

  2. on input type field that determines output options

… That should probably do it. Although, I didn’t spend a lot of time on the logic so I could be missing something.

Hope that helps :slight_smile:


#7

something like a Main select menu…

<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select type:</option>
    <option value="1">weight</option>
    <option value="2">mass</option>
    <option value="3">length</option>
</select>
</div>

then get the value from the choice that was made
and store all the options for those choices in arrays in your JS or Jquery
and populate the conversion select boxes based on what was chosen?