Directives Exercise Start

directives-exercise-start.markdown

Directives Exercise Start

A Pen by Sarah Drasner on CodePen.

License.

index.html

<div id="app">
  <div class="row">
    <span>1</span>
    <span>+</span>
    <span>1</span>
    <span>=</span>
    <span>2</span>
  </div>
  <div class="row second">
    <p>My favorite kind of taco is Al Pastor</p>
  </div>
</div>

script.babel

new Vue({
  el: '#app',
  data() {
    return {
      num1: 0,
      num2: 0,
      name: ''
    }
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>

style.scss

$primary: #5968d7;

.row {
  margin: 50px;
  display: flex;
  justify-content: center;
  font-family: 'Work Sans', sans-serif;
}

input, span {
  padding: 10px;
  font-size: 30px;
  font-family: 'Work Sans', sans-serif;
}

input {
  width: 50px;
}

span {
  width: 20px;
}

.second {
  font-size: 18px;
  p {
    margin-left: 20px;
  }
}