XYZ Home Security System

by Taylor Zimmerman

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]/dist/bulb.min.js"></script>

<center><div class="jumbotron jumbotron-fluid">
  <div class="container">
   <h1>XYZ Home Security System </h1>
   
    <p>Click the buttons to enter a 4-digit PIN followed by ON or OFF.</p>
    <div id="pinpad" class=" btn-matrix ">
      
      <button class="btn btn-dark" data-value="1">1</button>
      <button class="btn btn-dark" data-value="2">2</button>
      <button class="btn btn-dark" data-value="3">3</button><br>
      <button class="btn btn-dark" data-value="4">4</button>
      <button class="btn btn-dark" data-value="5">5</button>
      <button class="btn btn-dark" data-value="6">6</button><br>
      <button class="btn btn-dark" data-value="7">7</button>
      <button class="btn btn-dark" data-value="8">8</button>
      <button class="btn btn-dark" data-value="9">9</button><br>
      <button class="btn btn-dark" data-value="ON">ON</button>
      <button class="btn btn-dark" data-value="0">0</button>
      <button class="btn btn-dark" data-value="OFF">OFF</button>
    </div>
    <pre id="results"></pre>

    </div>
    </div></center>

JavaScript

// Creates a signal for the given button element.
function buttonSignal (button) {
  return Bulb.Signal.fromEvent('click', button).map(() => button.dataset.value)
}

// Get the button elements in the pinpad.
const buttons = Array.from(document.getElementById('pinpad').querySelectorAll('button'))

// Map the buttons to button signals.
const buttonSignals = buttons.map(buttonSignal)

// Merge all the button signals together and buffer them into chunks.
const pinSignal = Bulb.Signal
  .merge(...buttonSignals)
  .buffer(5)

// Get the results element.
const results = document.getElementById('results')

pinSignal.subscribe(value => {
  results.textContent = JSON.stringify(Array.from(value))
})