Download to read offline
![NEW GIT COMMANDS
• Some more git commands
• Git log
• git log --pretty=format:"%h %ad | %s%d [%an]" --graph --date=short
• Git aliases
• git config --global alias.hist "log --pretty=format:'%h %ad | %s%d [%an]' --graph --
date=short“
• Now we have “git hist” for the above
• Git blame
• Git checkout
• Older versions, git checkout <version>
• Back to current, git checkout master](https://image.slidesharecdn.com/untanglingspringweek6-170208235837/85/Untangling-spring-week6-13-320.jpg)
Uploaded byDerek Jacoby
Untangling spring week6
This class covers reviewing Git and server commands, Bootstrap tables, and introduces some new JavaScript topics like variables, user input/output, and variable scope. The homework assignment asks students to update their pizza ordering application to allow items to be typed in and generate a receipt with columns for item details and calculated totals. Key topics reviewed include Git commands like log, blame, checkout, Bootstrap tables and responsive design, JavaScript variables, parsing user input, and variable scope.
More Related Content
Similar to Untangling spring week6
Untangling spring week6
- 1. UNTANGLING THE WEB Class6: More bootstrap, more javascript, more examples
- 2. AGENDA • This ispartially a catch-up class, because some folks are stuck • Review git and server commands • Review project setup and starting a new website • Review bootstrap and flexbox • Bootstrap tables and responsive UI • Some new git commands • Variables and user input/output • Text processing in javascript • Variable scope in javascript • Homework 6 – Due Feb 22nd
- 3. GIT REVIEW • Startinga new project on github, adding a readme • Git clone • Edit in visual studio code • Git add • Git commit • Git push Demo
- 4. WEB SERVER REVIEW •Connecting via SSH • Navigating directories • Everything goes under public_html • Git clone • Demo
- 5. MAKING CHANGES TOTHE WEB SERVER • Ssh in again • Navigate to the project directory • Git pull • Demo
- 6. BASIC HTML • <!DOCTYPEhtml> • <HTML>, <HEAD>, and <BODY> tags • In the head: • <TITLE> • <LINK> • <SCRIPT> • <DIV> and <SPAN> • <P>, <H1>, <H2>, <H3> • <BUTTON> • <IMG> • <INPUT> • <A>
- 7. BASIC CSS • Targetby tag, class, or id • Tag, .class, #id • Tags are hierarchical • Flexbox • flex containers versus items • Other CSS tags of note • Color, background-color, text-align, font-family, font-size, borders, margins, etc
- 8. BASIC BOOTSTRAP • Includingthe dependencies • Some bootstrap stylings we’ve looked at • Jumbotron • Buttons • And some we haven’t • Panels • Dropdowns • Tables • We’ll cover tables in more detail in a bit, after we’ve finished the review
- 9. BOOTSTRAP TABLES • Gridsystem • Based on 12 columns • Responsive to screen size • Can give columns different layouts by size, or depend on automatic behavior • See summary here: http://getbootstrap.com/css/
- 10. BASIC JAVASCRIPT • <script>tag to include in the HTML page directly, or from another file • Calling a function from HTML • Accessing the DOM to write back to the page • Variables • Adding, subtracting, multiplying, etc. • If statements • Looping using for loops • While loops
- 11. PLAYING ON JSFIDDLE •Easy way to send a quick link • When asking for help on slack, send a fiddle if possible • This is not the best place to do all your development, though • In order to move things from fiddle into your own files (demo)
- 12. ON TO NEWSTUFF • Git • Bootstrap tables • Some javascript topics
- 13. NEW GIT COMMANDS •Some more git commands • Git log • git log --pretty=format:"%h %ad | %s%d [%an]" --graph --date=short • Git aliases • git config --global alias.hist "log --pretty=format:'%h %ad | %s%d [%an]' --graph -- date=short“ • Now we have “git hist” for the above • Git blame • Git checkout • Older versions, git checkout <version> • Back to current, git checkout master
- 14. VARIABLES AND USERINPUT • <input> and <textarea> • Parsing text • Numbers versus strings • Comma-separated values • https://jsfiddle.net/f7h28jaa/
- 15. VARIABLE SCOPE • Areminder that variables are only accessible from within the block they are declared, or children of that block: • In a file, variables declared outside any functions are global to all the functions in that file • In a function, variables declared at the top of the function are accessible to everywhere within that function • In a for loop, variables declared within the loop are accessible ONLY within the loop • Any identically named variables will be taken from the closest block • Don’t name the same or your more global variables will be hidden
- 16. HOMEWORK 6 • Allowthe user to type their items into the ordering page in addition to pressing the buttons • Use the split and trim functions to allow multiple items to be typed in • Correct for case • Update the total when you have processed each item • Add a receipt to your pizza ordering application. • When an “order” button is pressed prepare a receipt. This can be on the same page (easiest) or you can use the bootstrap popover class (harder) • This receipt should be nicely formatted with columns for item, picture, and price • There should also be a subtotal, tax, and total which you calculate on the fly • Due Feb 22nd before class
- 17. HOMEWORK 6 HINTS •This is a bit larger homework • Think about how you add your items, since they need to be accessed from both buttons and text now an array of items and prices may make sense • Remember the split and trim and toLowerCase string methods • Do some error checking to make sure there is an entry!