# Pi Demo

## Demo 1

##### Basic concept

Adds 42 to any number entered

{{demo1-input}} + 42

### Span output:

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

## Demo 2

##### 2 inputs, 1 output

Multiplies 2 entered values

{{demo2-input1}} * {{demo2-input2}}

### Span output:

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

## Demo 3

##### 1 input, 2 outputs

Multiplies single entered value by 2 different set values

{{demo3-input}} * 3.14
{{demo3-input}} * 13.567

### class output

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

## Demo 4

##### Slider input

Multiplies slider value by set value

1.00
{{demo4-slider}} * 6.7654

### class output

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

## Demo 5

##### Room area calc with 2 sliders

Calculates the area of a room by multiplying 2 sliders

1.00m
1.00m
{{demo5-slider1}} * {{demo5-slider2}}

### Area: SqM

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

## Demo 6

##### Pi as an input to another Pi

Calculates a rooms wall area by multiplying perimeter length by wall height and displays it to 2 decimal places

##### Room info:
1.00m
1.00m
2.40m
( ( ( {{demo6-room-l}} * 2 ) + ( {{demo6-room-w}} * 2 ) ) * {{demo6-room-h}} ).toFixed(2)

### Wall area: SqM

More sliders for paint properties

##### Paint info:
10.00SqM
1.00
1.00l

Calculates the required number of cans of paint based on Pi calc and sliders above

##### Results:
{{demo6-wallarea}} / {{demo6-paint-coverage}}
{{demo6-litrepercoat}} * {{demo6-paint-coats}}
( {{demo6-litre-reqd}} / {{demo6-paint-size}} ).toFixed(3)

## Demo 6b

##### A bit of JS Math

Rounds up the cans needed to nearest whole number

Math.ceil( {{demo6-cans-reqd}} )

## Demo 6c

##### Reducing the Pi's

All the above Pi's in one Pi

Math.ceil( ( ( ( ( ( {{demo6-room-l}} * 2 ) + ( {{demo6-room-w}} * 2 ) ) * {{demo6-room-h}} ) / {{demo6-paint-coverage}} ) * {{demo6-paint-coats}} ) / {{demo6-paint-size}} )

### Cans required:

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

## Demo 7

##### Functions

Using a function to display months based on the slider value

piMonth( {{demo7-slider}} )

### class output

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

## Demo 8

##### Day of Birth Calculator

Multiple Pi's with functions that generate values used in other Pi's to produce a day based on 3 select boxes.

Where:

• h is the day of the week (0 = Saturday, 1 = Sunday, 2 = Monday, ..., 6 = Friday)
• q is the day of the month
• m is the month (3 = March, 4 = April, 5 = May, ..., 14 = February)
• K the year of the century unless its Jan or Feb then its year -1
• J is the zero-based century (actually ) For example, the zero-based centuries for 1995 and 2000 are 19 and 20 respectively (to not be confused with the common ordinal century enumeration which indicates 20th for both cases).

piDobValueM( {{dob-select-month}} )
piDobYearShift( {{dob-select-month}} )
( {{dob-select-year}} - {{dob-year1}} ) % 100
parseInt( String( {{dob-select-year}} ).substring(0,2) )
( 13 * ( {{dob-month-number}} + 1 ) ) / 5
{{dob-select-date}} + {{dob-part1}} + {{dob-year2}} + ( {{dob-year2}} / 4 ) + 5 + ( 6 * {{dob-century}} )
Math.round({{dob-part2}} % 7)
piDobDay( {{dob-part3}} )

Born on a

# class output

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

## Demo 9

##### Colour via CSS

0.00
100.00
50.00
hslToRgb( {{demo9-slider-H}} / 360 , {{demo9-slider-S}} / 100 , {{demo9-slider-L}} / 100 )
hslToHex( {{demo9-slider-H}} , {{demo9-slider-S}} , {{demo9-slider-L}} )
" hsl( {{demo9-slider-H}} , {{demo9-slider-S}}% , {{demo9-slider-L}}% ) "

### HEX:

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

## Demo 10

##### Selectbox and Check boxes

Event example that builds a price based on slider, select boxes and check boxes

1.00
( ( {{demo10-people}} * (100 + ( 100 * {{demo10-service}} ) +{{demo10-addon1}} + {{demo10-addon2}} + {{demo10-addon3}} ) ) + {{demo10-event1}} + {{demo10-event2}} + {{demo10-event3}} ).toFixed(2)

### class output

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

## Demo 11

##### Date and Time

Time zone example that gives the date/time of others around the world to plan a meeting

0.00
moment().add( ( {{demo11-hours}} - 7 ) ,'hour' ).calendar()
moment().add( ( {{demo11-hours}} + 4 ) ,'hour' ).calendar()
moment().add( ( {{demo11-hours}} + 11 ) ,'hour' ).calendar()
moment().add( ( {{demo11-hours}} - 10 ) ,'hour' ).calendar()

### Local Time:

##### class output
Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

## Demo 12

##### Date difference

Calculates the difference between 2 date pickers and displays it in days, hours and seconds

You must enter in a date.
You must enter in a date.
moment.duration( moment( ' {{demo12-date-end}} ' , 'DD-MM-YYYY' ).diff( moment( ' {{demo12-date-start}} ' , 'DD-MM-YYYY' ) ) ).as( 'days' )
moment.duration( moment( ' {{demo12-date-end}} ' , 'DD-MM-YYYY' ).diff( moment( ' {{demo12-date-start}} ' , 'DD-MM-YYYY' ) ) ).as( 'hours' )
moment.duration( moment( ' {{demo12-date-end}} ' , 'DD-MM-YYYY' ).diff( moment( ' {{demo12-date-start}} ' , 'DD-MM-YYYY' ) ) ).as( 'seconds' )

### Diffrence: seconds

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×

0
{{demo13-people}} +1

{{demo13-package}}
piPackage( {{demo13-package}} )

## Demo 10

##### Selectbox and Check boxes

Event example that builds a price based on slider, select boxes and check boxes

1.00
( ( {{demo10-people}} * (100 + ( 100 * {{demo10-service}} ) +{{demo10-addon1}} + {{demo10-addon2}} + {{demo10-addon3}} ) ) + {{demo10-event1}} + {{demo10-event2}} + {{demo10-event3}} ).toFixed(2)

### class output

Thank you! Your submission was successfully sent :-)×
Opps! Some went wrong... Your submission did not go through :-(×