habibshahid2013 / -weekend-jquery-salary-calculator

First Create repository:

• git clone URL
• open with: Code . (within terminal)
• Make a read me.md file.

#Make a to-do list before writing script

• Setup
  • index.html setup
  • stylesheet with some basic styles
  • install jquery
  • setup my own JS files
• firms with feild for:
  • product names
  • color
  • size
  • Price
• submit button.
  • grab from values
  • render a new table row
• Delete a item
• Calculate the tool in the inventory.

Example of how to make a good list:

Making HTML:

1. add HTML
2. add html script
3. add H1
4. Test in the terminal
5. Commit in Git -HUB
6. Then check it off.

Make Css Sheet:

1. Make css file.
2. Link in HTML:
3. add style to a "body" "background color.
4. Test it.
5. Check it off.

Before starting: - Draw out Visio or Paint documents.

Add All HTML:

id= type= placeholder=

 

Now Style Your Html:

1. Use chrome browser to experiment with your CSS.
2. Then Copy Css changes into VS Code.
3. Then commit changes.
4. Click Inspect:
5. ADD
   1. font size:
   2. padding:
   3. margin right :
   4. margin bottom:
6. Then Commit:

Install Jquery into VSCOde 1. script it 2. test it Install JS. File into VSCODE 1. Script it 2. Test IT 3. ADD $(Document).ready(onReady); 4. ADD Function on Ready(){log.console("so Ready") 5. } 6. Add

$('#redBox').on('submit', onSubmit);

1. ADD ID to Form. 

$('#IDofForm').on('click',onSubmit);

1. Function onSubmit(event){
   1. event.preventDefault()
   2. log.console.(__'on Submit'____)
   3. Event passes through various properties.
      1. It passes various information beginning

Grab values from Form

• From there you want to test

• Add Focus and input:

• Add Clear Input:

• Use  .val instead of . empty

The power of how the chrome can manipulate a focus area 'input' for example:

• Then test
• Then Commit:

Then you want to render the work: The

should get an ID

Copy and past Tbody into Java script

step 2:

Then the result should be in testing it:

Apply fixed on price:

how to:

Then Commit again:

Then add div:

do some css. Give css a class selector.

ADD in DIV.

Then do $(_'#totalprice').text(.... To set total price.

make a empty variable that also global variable. aka product's:

Then push product and log

then test it:

then you can calculate the total price using a loop: test with total price :

Test in chrome

Then Commit:

Test Step:

Refactoring is changing code to see how it works:

Step of refactoring: comment out product:

empty out table first:

Loop through and append each product:

Then Test:

Common tool to use is to empty out table and render through the data:

Check your todo list: Then test everything again: Then clean up code and put in comments.

put long code in smaller function