Pi Demo

Demo 1

Basic Concept

Convert PX to REM. 16px = 1rem

This field is required

Pi Class Output. The Pi class was added to this Header stack. Then entire contents of this header will be replaced with the results from Pi.

REM Conversion: rem

Demo 2

Rounding Results

Multiply value by 3. The round the value

Type your input data here

This field is required

Triple:

Round:

Ceiling:

Floor:

Decimal:

Demo 3

1 input, 2 outputs

Find the perimeter and the area of a circle

p = 2πr a = πr2

This field is required

p =

a =

Demo 4

Changing CSS Font Sizing

Take the number input and adjust the size of text

This field is required

PI ROCKS!!!

-
25px
45px
65px
+

Demo 5

Room area calc with 2 sliders

Calculates the area of a room by multiplying 2 sliders

This field is required
This field is required

Area:

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:

This field is required
This field is required
This field is required

Wall area:

More sliders for paint properties

Paint info:

This field is required
This field is required
This field is required

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

Results:

Cans Required:

Actual Cans Required:

Demo 6b

Reducing the Pi's

All the above Pi's in one Pi

Cans required:

Demo 7

Functions

Using a function to display months based on the slider value

This field is required

Month Outputs Here

This field is required

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.

Taken from https://en.wikipedia.org/wiki/Zeller%27s_congruence

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).

Type your input data here

This field is required

Type your input data here

This field is required

Type your input data here

This field is required

Born on a

Day Output

Demo 9

Colour via CSS

Manipulating CSS on this page via Pi

This field is required
This field is required
This field is required

HSL

RGB

HEX

Demo 10

Selectbox and Check boxes

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

This field is required

Type your input data here

This field is required

pi-totalcost

Demo 11

Date and Time

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

This field is required

Local Time:

Harry's Time:

pi-zone1

Fred's Time:

pi-zone2

Bob's Time:

pi-zone3

Jane's Time:

pi-zone4

Demo 12

Date difference

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

This field is required
This field is required

Day

Hours

Seconds

Demo 13

Loan Payments

Calculate the payment on a loan

This field is required
This field is required

Type your input data here

This field is required

Monthly Payment:

Demo 14

Future Value

Future value of an cashflow based on growth rate

This field is required
This field is required
This field is required

Projected Cashflow:

Demo 15

Advanced Text Processing

Output a HTML list of items chosen in the form.

Vacation Destinations: