Tuition Calculator

index.html

<div id="app">
  <div class="container" style="margin-top: 3em">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4>Add Student</h4>
          </div>
          <div class="panel-body">

            <div class="form-group">
              <label for="grade">Student Grade</label>
              <select class="form-control" v-model="student.grade">
                <option value="">Please Select a Grade</option>
                <option v-for="grade in grades" v-bind:value="grade.value">
                  {{ grade.text }}
                </option>
              </select>
            </div>

            <div class="form-group">
              <label for="returning">
                <input type="checkbox" v-model="student.returning" checked/>
                Returning Student
              </label>      
            </div>

            <button @click="add" class="btn btn-primary">Add Student</button>
          </div>
        </div>

        <div class="panel panel-default" v-for="student in students">
          <div class="panel-heading">
            <h5>{{student.grade}} <small>{{student.returning}}</small></h5>
          </div>
        </div>

        <pre>{{student | json}}</pre>
        <pre>{{students | json}}</pre>
      </div>
    </div>
  </div>
</div>

script.js

new Vue({
  el: "#app",
  data: {
    student: {
      grade: "",
      returning: true,
    },
    students: [],
    grades: [
      { text: "K3 - K4", value: 1},
      { text: "K5", value: 2},
      { text: "Elementary (1st - 5th)", value: 3},
      { text: "Junior High (6th - 8th)", value: 4},
      { text: "High School (9th - 12th)", value: 5}
    ],
    registration: {
      returning: "200",
      new: "275",
    },
    comprehensive: [
      "100",
      "200",
      "300",
      "400",
    ]
  },
  methods: {
    add: function() {
      console.log(this.student);
      this.students.push({
        grade: this.student.grade,
        returning: this.student.returning
      });
      
      this.student.grade = "";
      this.student.returning = true;
      
    }
  }
});

// Tuition for each grade level across the board
// factor in multi student discounts based on number of students in K5 - 12th

// Building fee of $250 regardless

// Registration fee per student based on if new or returning

// Comprehensive fee based on grade level

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

tuition-calculator.markdown

Tuition Calculator

A Pen by Jake Bennett on CodePen.

License.