Creating Tax Calculation app with vanilla ES. Advise-a-noob

Creating Tax Calculation app with vanilla ES. Advise-a-noob
0.0 0


To practice JS, and engage my brain more than just reading tutorials, I’m DOING something!
Writing an ultra-simple JS app with the following user-stories:

Tax Calculation Web-app

  • Uses select / option tags to form dropdown menu (Select your state: CA, AZ, or OR)
  • Listens for dropdown selection; based on this defines (or chooses predefined) var for STATE_TAX_RATE
  • Has input field, asking what the price of the goods in question you are buying (ex: 100)
  • Function does arithmetic to get grand total of goods (grand total = goods + (goods * AZ_TAX_RATE)
  • changes html to display the result

Then I’m gonna style it, but that’s an aside.

Okay, so my issues are thusly-ness:
I have come across event-listeners, query-selectors, and other such topics that are slightly above my skill level. I am dedicating today to figuring out how this stuff works.

Here’s some examples of code that I need to be able to understand, but after thorough googling, I just really can’t understand. The neurons aren’t mylienated enough! I need all the thorough-explanation and positive social pressure I can get.

// Add event listener to table with an arrow function
var el = document.getElementById("outside");
el.addEventListener("click", () => { modifyText("four"); }, false);

What is the f**ing arrow??! I understand that the eventListener is now programmed to listen for a click, but why is there a blank parens and what does this arrow do?? This code is not related to my project but it is related to what I’ll need to know.

Someone in my local fCC group wrote this for me:

const fooBarSelect = document.getElementById('foobarbaz');

// I totally understand this part 

fooBarSelect.addEventListener('change', (event) => {

// But not this. Why does this work?

There will also be questions about how to grab input from a text form, and create a var with a float value out of that input. And then the very minor question of, how do I output html on a page again?

This is above my skill level for sure, but the type of person I am, I learn by doing. And by struggling.

If anyone can answer the above questions, or foresee any impending problems I will have writing this code, I’d appreciate the input.

Note: I need to take a walk and clear my head. I’ll be back online in a while to check this post out.


A post was merged into an existing topic: $("#target4").html("#target4"); $("#target4").text("#target4"); how to use it?