<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Bank Quick Transfer Interface Vue JS</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
    
<!-- partial:index.partial.html -->
<div id="app">

<header>
  <div class="header">
    <h1>{{ headerTitle }}</h1>
    <transition name="fade">
      <div id="message" v-if="showMsg" :style="{backgroundColor: msgColor}">{{ msg }}</div>
    </transition>
    <button @click="revealClass = 'slide-down'">Quick Transfer</button>
  </div>
</header>

<section>
  <a href="#0" class="close-btn" @click="revealClass = 'slide-up'">&#128473;</a>
  <form class="transferForm">
    <div class="input-box">
      <label for="Account-1">From:</label>
      <select v-model="gBal" @change="autoSelect(gBal)">
        <option value="0">Select an account</option>
        <option value="1">Go Account</option>
        <option value="2">Classic Account</option>
      </select>
    </div>
    <div class="input-box">
      <label for="Account-2">To:</label>
      <select v-model="cBal">
        <option value="0">Select an account</option>
        <option value="1" id="opt1">Classic Account</option>
        <option value="2" id="opt2">Go Account</option>
      </select>
    </div>
    <div class="input-box">
      <label for="transferAmount">Amount: ${{ transferAmount }}</label>
      <input type="text" v-model="transferAmount" />
    </div>
    <div class="input-box">
      <button @click.prevent="makeTransfer">Transfer</button>
    </div>
  </form>
</section>

<section :class="revealClass">
  <div class="accounts">
    <ul>
      <li>
        <p>
          <strong>Go Account</strong>
        </p>
        <p :class="balance1">{{ goBalance }}</p>
      </li>
      <li>
        <p>
          <strong>Classic Account</strong>
        </p>
        <p :class="balance2">{{ classicBalance }}</p>
      </li>
    </ul>
  </div>
</section> 
  
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js'></script><script  src="./script.js"></script>

</body>
</html>
