Project $1-$ JS Fundamentals

Objectives

$$ Event Handling

$$ DHTML

$$ Modern JS Functions

$$ Variables and Constants

Project Requirements

Create a website that allows a Wisconsin user to enter a gross salary amount into form, press a

submission button, and returns to the screen the estimated $2024$ taxes for a $$single filer$$ based on the

amount entered.

Project Coding Standards Highlights

$$ Assignment folder structure

o Include subdirectories for CSS and Javascript files

$$ Avoid internal code within HTML

$$ Should not contain Javascript execution $($Javascript should execute automatically$)$

$$ CSS should be external not inline or internal

$$ Consistent code formatting

o Be sure to use modern Javascript syntax

$$ Include $$use strict$$ to catch common coding mistakes and promote better coding practices

$$ Avoid use of var and older syntax

o Line length

$$ Try to avoid lines longer than $80$ characters

$$ Indent appropriately code split across multiple lines

o Comments and documentation

$$ Use single or multi$-$line comments where appropriate

$$ Include clear comments explaining functions, classes, complex logic, etc.

o Naming conventions

$$ Meaningful and descriptive names

$$ Follow conventions like camelCase for variables

o Indentation

$$ Using tools like ESLint and$/$or Prettier assists in format automation

o Declarations and scoping

$$ Variables & constants

$$ Limit over usage of global

$$ Consider encapsulating code in functions or modules

$$ Statement structure

$$ Use semicolon to terminate a simple statement

$$ Simple statements should be on own line

$$ Compound statements should be indented, have opening and closing braces on

appropriate lines

$$ Use whitespace for readability, sectioning your code, after commas and most operators

$$ Number definitions and calculations

$$ All calculations must be done with Number data types

$$ No springs are allowed when doing mathematical operations

$$ Decimals must be represented by a leading zero if the value is less than $1$

$$ Calculations must be assigned to a variation

$$ No hard coded numbers allowed in calculations

$$ If included, return statement must not include parentheses around the return value as well

as coded as a single line

$$ Testing and quality assurance

o Be sure to walk thru your code using a debugger to verify that your code is working as expected

o Be sure to test your code using multiple test data scenarios

HTML page

$$ HTML

o The gross salary amount should allow only numeric entry and whole numbers and

validated using a pattern html attribute $-$ no additional validation is necessary

Figure $1$ Example Starting Form

o After the user clicks on a button to submit the request, the application will display the

user's estimated taxes to the page including:

$$ Federal taxes $$ see below for calculations

$$ Wisconsin state taxes $$ see below for calculations

$$ FICA Medicare tax $+$ FICA social security tax $$ see below for calculations

$$ Total Taxes

$$ Total Taxes $=$ Federal tax $+$ Wisconsin state tax $+$ FICA Medicare tax $+$

FICA social security tax

$$ Net Pay

$$ Net Pay $=$ Gross Salary Amount $-($federal tax $+$ state tax $+$ FICA social

security tax $+$ FICA Medicare tax$)$

$$ After the running the application,

$$ Clear out the Gross Salary field so the user does not have to delete it to

enter a different number

$$ User should be able to input a new gross salary and run the application

again by entering a new gross salary amount and clicking on the submit

button. Any previous calculations should be removed from the screen

and only new calculations based on the new gross salary.

Figure $2-$ Data presented after $45000$ entered as Gross Pay and "Calculate Taxes" button clicked

$$ CSS

o You have creative freedom to style the HTML however you wish. You may use a

framework such as Bootstrap and$/$or any custom external CSS styling for your page.

Remember, it is poor practice to use inline or internal CSS$.$

Federal tax calculation

$$ The chart below shows federal tax brackets for $2024.$ Each row in the chart shows a different tax

bracket. The user will be taxed according to the chart. The taxable income that reaches the

various tax bracket thresholds will be tax at the threshold amount. Only the income above a

certain threshold will be taxed at the higher rate.

o Example, a user making $$45,000/$ year would be taxed as follows:

$$ First $$11,600$ of income would be taxed at $10\%($$$11,600$ taxed for $$1,160\mathrm{.}00)$

$$ Next, the income past the $$11,600$ threshold up to the $$47,150$ threshold would

be taxed at $12\%($$$35,550$ taxed for $$4,266\mathrm{.}00)$

$$ To calculate the federal tax, you would need the sum of the above $2$ calculations

$($$$1,160\mathrm{.}00+$ $$4,266\mathrm{.}00=$ $$5,426\mathrm{.}00)$

$2024$ Single Tax Bracket

Taxable Income Tax Due

$$0-$ $$11,60010\%$ of taxable income

$$11,601-$