Pi Demo

Demo 1

Basic concept

Adds 42 to any number entered

class output

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

class output

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

class output

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

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

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

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:

Cans required:


Demo 6b

A bit of JS Math

Rounds up the cans needed to nearest whole number

Cans required:


Demo 6c

Reducing the Pi's

All the above Pi's in one Pi

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

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.

My Image

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

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

Manipulating CSS on this page via Pi

0.00
100.00
50.00

HSL:

RGB:

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

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

Local Time:

Harry's Time:
class output
Fred's Time:
class output
Bob's Time:
class output
Jane's 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.

Diffrence: days

Diffrence: hours

Diffrence: seconds

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

0

This is my header

Test:

Demo 10

Selectbox and Check boxes

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

1.00

class output

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