12 Hour Clock

e41a5a5d243e48878c131bda48726877

A complex 12 hour clock.

Parts List

• 1 × Countdown Timer

  1. timer (see snippet below)

• 2 × Electric Glass

  1. minute_glass (see snippet below)
  2. second_glass (see snippet below)

• 1 × Form Filler

  1. filler (see snippet below)

• 3 × Name-Based Filter

  1. hour_filter (see snippet below)
  2. minute_filter (see snippet below)
  3. second_filter (see snippet below)

• 1 × Number Adder

  1. adder (see snippet below)

• 1 × Number Subtractor

  1. subtractor (see snippet below)

• 2 × Numerical Comparison Maker

  1. hour_comparator (see snippet below)
  2. hour_comparator2 (see snippet below)

• 2 × Range-Based Trigger

  1. minute_range_trigger (see snippet below)
  2. second_range_trigger (see snippet below)

• 1 × Text Slots

  1. clock (see snippet below)

• 2 × Trigger

  1. pm_sayer (see snippet below)
  2. am_sayer (see snippet below)

Parts Configuration

To try these parts as used, simply copy and paste the following snippet of HTML into a Constructible HTML file.

• adder

  <div properties="adds_on:12"
       script="http://js.constructibl.es/specs/NumericalAdder.js"
       id="adder"
       spec="BAA1EFFF67D74B4D8520237E3D4257BB">
  </div>

• am_sayer

  <div properties="emits_when_triggered:{day_divider:'AM'}"
       script="http://js.constructibl.es/specs/Trigger.js"
       id="am_sayer"
       spec="4B7A1FD417F541BDBB4748829ADE97FF">
  </div>

• clock

  <style type="text/css">
  #clock {
      position:absolute;
      top:2in;
      width:700px;
      height:150px;
      overflow:hidden;
  }
  
  #clock.TwentyFour {
      left:250px;
  
  }
  
  #clock.Twelve{
      left:160px;
  }
  
  #clock dfn, 
  #clock var {
      height:150px;
      overflow:hidden;
      font-family:arial;
      font-size:85pt;
      display:block;
      text-align:right;
      font-style:normal;
      font-weight:bold;
  }
  
  #clock var.hour {
      position:absolute;
      left:0px;
      top:0px;
      width:140px;
      color:#FFF2C2;
  }
  
  #clock var.minute {
      position:absolute;
      left:170px;
      top:0px;
      width:140px;
      color:#7BAAB0;
  }
  
  #clock var.second {
      position:absolute;
      left:340px;
      top:0px;
      width:140px;
      color:#23201a;
  }
  
  #clock var.ampm {
      position:absolute;
      left:490px;
      top:0px;
      width:170px;
      color:#43403a;
  }
  
  #clock dfn.hm_divider {
      position:absolute;
      left:135px;
      top:-10px;
      width:40px;
      height:150px;
      text-align:left;
      color:#43403a;
  }
  
  #clock dfn.ms_divider {
      position:absolute;
      left:310px;
      top:-10px;
      width:40px;
      text-align:left;
      color:#43403a;
  }
  
  #clock.Twelve{
      left:160px;
  }
  
  #clock dfn, 
  #clock var {
      height:150px;
      overflow:hidden;
      font-family:arial;
      font-size:85pt;
      display:block;
      text-align:right;
      font-style:normal;
      font-weight:bold;
  }
  </style>
  
  <div spec="7A2FA5EDC6F44288A7C740F75E18ED49"
       script="http://js.constructibl.es/specs/TextSlots.js"
       id="clock"
       class="Twelve">
   <var field="hour"
        class="hour">
   </var>
  
   <dfn class="hm_divider">:
   </dfn>
  
   <var field="minute"
        class="minute">
   </var>
  
   <dfn class="ms_divider">:
   </dfn>
  
   <var field="second"
        class="second">
   </var>
  
   <var field="day_divider"
        class="ampm">
   </var>
  
  </div>

• filler

  <div properties="populates_field_with_name:'hour'"
       script="http://js.constructibl.es/specs/FormFiller.js"
       id="filler"
       spec="76776FD6A9824676B456990DF6AEEBB7">
  </div>

• hour_comparator

  <div properties="compares_to:12"
       script="http://js.constructibl.es/specs/NumericalComparator.js"
       id="hour_comparator"
       spec="D9D77EAC25A5433E9631A430091B9F66">
  </div>

• hour_comparator2

  <div properties="compares_to:0"
       script="http://js.constructibl.es/specs/NumericalComparator.js"
       id="hour_comparator2"
       spec="D9D77EAC25A5433E9631A430091B9F66">
  </div>

• hour_filter

  <div properties="filters_field_named:'hour'"
       script="http://js.constructibl.es/specs/NameBasedFilter.js"
       id="hour_filter"
       spec="25EF8FACD35F4D9AB6F1F77F837AA655">
  </div>

• minute_filter

  <div properties="filters_field_named:'minute'"
       script="http://js.constructibl.es/specs/NameBasedFilter.js"
       id="minute_filter"
       spec="25EF8FACD35F4D9AB6F1F77F837AA655">
  </div>

• minute_glass

  <style type="text/css">
  #minute_glass {
      position:absolute;
      left:340px;
      top:2in;
      width:100px;
  }
  
  .glass {
      font-family:arial;
      font-size:85pt;
      position:absolute;
      color:#43403a;
      background-color:#33302a;
      font-weight:bold;
      visibility:hidden;
  }
  
  #minute_glass {
      position:absolute;
      left:340px;
      top:2in;
      width:100px;
  }
  
  #second_glass {
      position:absolute;
      left:512px;
      top:2in;
      width:100px;
  }
  </style>
  
  <div spec="B6322BDCD73140A18873C2F3F86FFED2"
       script="http://js.constructibl.es/specs/ElectricGlass2.js"
       properties="fogs_in_seconds:2"
       id="minute_glass"
       class="glass">0
  </div>

• minute_range_trigger

  <div properties="triggers_in_range:[0, 9],
                   resets_in_range:[10, 59]"
       script="http://js.constructibl.es/specs/RangeBasedTrigger.js"
       id="minute_range_trigger"
       spec="F27A491A6F1E496E99BF1D01C289ADF7">
  </div>

• pm_sayer

  <div properties="emits_when_triggered:{day_divider:'PM'}"
       script="http://js.constructibl.es/specs/Trigger.js"
       id="pm_sayer"
       spec="4B7A1FD417F541BDBB4748829ADE97FF">
  </div>

• second_filter

  <div properties="filters_field_named:'second'"
       script="http://js.constructibl.es/specs/NameBasedFilter.js"
       id="second_filter"
       spec="25EF8FACD35F4D9AB6F1F77F837AA655">
  </div>

• second_glass

  <style type="text/css">
  #second_glass {
      position:absolute;
      left:512px;
      top:2in;
      width:100px;
  }
  
  .glass {
      font-family:arial;
      font-size:85pt;
      position:absolute;
      color:#43403a;
      background-color:#33302a;
      font-weight:bold;
      visibility:hidden;
  }
  
  #minute_glass {
      position:absolute;
      left:340px;
      top:2in;
      width:100px;
  }
  
  #second_glass {
      position:absolute;
      left:512px;
      top:2in;
      width:100px;
  }
  </style>
  
  <div spec="B6322BDCD73140A18873C2F3F86FFED2"
       script="http://js.constructibl.es/specs/ElectricGlass2.js"
       properties="fogs_in_seconds:2"
       id="second_glass"
       class="glass">0
  </div>

• second_range_trigger

  <div properties="triggers_in_range:[0, 8],
                   resets_in_range:[8, 59]"
       script="http://js.constructibl.es/specs/RangeBasedTrigger.js"
       id="second_range_trigger"
       spec="F27A491A6F1E496E99BF1D01C289ADF7">
  </div>

• subtractor

  <div properties="subtracts_out:12"
       script="http://js.constructibl.es/specs/NumericalSubtractor.js"
       id="subtractor"
       spec="BBC2996C1F0C4D7AA17626FD19364BBD">
  </div>

• timer

  <div properties="does_trigger_automatically:true,
                   does_use_local_time:true,
                   triggers_in_milliseconds:1000"
       script="http://js.constructibl.es/specs/Timer.js"
       id="timer"
       spec="1AB7DDEEA4BD428996C746CEA52FAE82">
  </div>

Technical Specifications

Inputs

No inputs are specified.

Outputs

No outputs are specified.