Untangling spring week6

17
UNTANGLING THE WEB Class 6: More bootstrap, more javascript, more examples

Transcript of Untangling spring week6

Page 1: Untangling spring week6

UNTANGLING THE WEBClass 6: More bootstrap, more javascript, more examples

Page 2: Untangling spring week6

AGENDA• This is partially 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

Page 3: Untangling spring week6

GIT REVIEW• Starting a new project on github, adding a readme• Git clone• Edit in visual studio code• Git add• Git commit• Git push

Demo

Page 4: Untangling spring week6

WEB SERVER REVIEW• Connecting via SSH• Navigating directories

• Everything goes under public_html• Git clone

• Demo

Page 5: Untangling spring week6

MAKING CHANGES TO THE WEB SERVER

• Ssh in again• Navigate to the project directory• Git pull

• Demo

Page 6: Untangling spring week6

BASIC HTML• <!DOCTYPE html>• <HTML>, <HEAD>, and <BODY> tags• In the head:

• <TITLE>• <LINK>• <SCRIPT>

• <DIV> and <SPAN>• <P>, <H1>, <H2>, <H3>• <BUTTON>• <IMG>• <INPUT>• <A>

Page 7: Untangling spring week6

BASIC CSS• Target by 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

Page 8: Untangling spring week6

BASIC BOOTSTRAP• Including the 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

Page 9: Untangling spring week6

BOOTSTRAP TABLES• Grid system

• 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/

Page 10: Untangling spring week6

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

Page 11: Untangling spring week6

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)

Page 12: Untangling spring week6

ON TO NEW STUFF• Git• Bootstrap tables• Some javascript topics

Page 13: Untangling spring week6

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

Page 14: Untangling spring week6

VARIABLES AND USER INPUT• <input> and <textarea>• Parsing text

• Numbers versus strings• Comma-separated values

• https://jsfiddle.net/f7h28jaa/

Page 15: Untangling spring week6

VARIABLE SCOPE• A reminder 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

Page 16: Untangling spring week6

HOMEWORK 6• Allow the 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

Page 17: Untangling spring week6

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!