Full Name Greeting with ReactiveModel by curran

The data flow graph for this example.

This example shows how to make a simple dynamic Web page using ReactiveModel, D3 4.0 and Bootstrap. When you type in the First Name and Last Name input boxes, the greeting text updates.

Part of a series of examples demonstrating ReactiveModel.

forked from curran‘s block: ModelJS firstName lastName

Built with blockbuilder.org

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="//d3js.org/d3.v4.0.0-alpha.49.min.js"></script>
  <script src="//datavis-tech.github.io/reactive-model/reactive-model-v0.11.0.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
  <style>
    .container {
      margin-top: 170px;
    }
    #greeting {
      font-size: 4em;
    }
  </style>
</head>

<body>
  
  <!-- Use Bootstrap to make a beautiful form. -->
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <form>
          
          <!-- The firstName input box. -->
          <div class="form-group">
            <label for="inputFirstName">First Name</label>
            <input class="form-control" id="inputFirstName" placeholder="Enter your first name.">
          </div>
          
          <!-- The lastName input box. -->
          <div class="form-group">
            <label for="inputLastName">Last Name</label>
            <input class="form-control" id="inputLastName" placeholder="Enter your last name.">
          </div>
        </form>
      </div>
      
      <!-- The greeting text. -->
      <div class="col-sm-8">
        <p id="greeting"></p>
      </div>
    </div>
  </div>
  
  <script>
    
    // Construct the model instance.
    var my = ReactiveModel();
    
    // Add firstName and lastName properties.
    my("firstName")
      ("lastName", "");
    
    // Set up a reactive function that computes fullName.
    my("fullName", function (firstName, lastName){
      return firstName + " " + lastName;
    }, "firstName, lastName");
    
    // Set up a reactive function that computes the greeting.
    my("greeting", function (fullName){
      return "Hello " + fullName + "!";
    }, "fullName");
    
    // Update the DOM when greeting changes.
    my(function (greeting){
      d3.select("#greeting").text(greeting);
    }, "greeting");
    
    // Update the firstName property when text is entered.
    d3.select("#inputFirstName").on("input", function (e){
      my.firstName(this.value);
    });
    
    // Update the lastName property when text is entered.
    d3.select("#inputLastName").on("input", function (e){
      my.lastName(this.value);
    });
    
  </script>
</body>