Skip to content

Instantly share code, notes, and snippets.

@shahidcodes

shahidcodes/index.html

Last active July 17, 2017 09:39
Show Gist options
  • Save shahidcodes/35d14996fcb925d75dc0a6b912f6a043 to your computer and use it in GitHub Desktop.
Save shahidcodes/35d14996fcb925d75dc0a6b912f6a043 to your computer and use it in GitHub Desktop.
Download ZIP
CalculatorCalculator using vuejs for freeCodeCamp// source https://jsbin.com/yewirey
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Calculator using vuejs for freeCodeCamp">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/css/materialize.min.css">
<title>Calculator</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
body{
font-family: 'Source Sans Pro', sans-serif;
}
.container > .row{
margin: auto;
}
.outer-frame{
border: 1px solid #70817A;
border-radius: 14px;
background-color: #3B5249;
}
.res{
font-size: 2em;
padding-top: 1em;
}
.cal{
font-size:1.2em;
text-align: right;
padding: 1em 0em;
}
.results{
margin-bottom: 0%;
background-color: #3B5249;
color: #FFF;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.btn-group{
margin-bottom: 0px;
}
.btn-line{
padding: 0px !important;
text-align: center;
}
a.btn-flat{
font-size: 1.2em;
font-weight: bold;
color: #FAF6F6;
background-color: #70817A;
width: 100% !important;
border-radius: 0px;
padding-top: 3em;
line-height: 0.5;
padding-bottom: 3em !important;
}
#bottom-left{
border: 0px solid black;
border-bottom-left-radius:14px;
}
#bottom-right{
border-bottom-right-radius:14px;
}
</style>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col s12 m5 l5 outer-frame push-m3 push-l3">
<div class="row results">
<div class="col s12 m12">
<div class="res">{{result}}</div>
<div class="cal">{{numbers}}</div>
</div>
</div>
<div class="row btn-group">
<div class="col s3 m3 btn-line">
<a href="#" v-on:click="calculate(1)" class="btn-flat waves-effect waves-black">1</a>
<a href="#" v-on:click="calculate(5)" class="btn-flat waves-effect waves-black">5</a>
<a href="#" v-on:click="calculate(8)" class="btn-flat waves-effect waves-black">8</a>
<a href="#" v-on:click="calculate('.')" class="btn-flat waves-effect waves-black" id="bottom-left">.</a>
</div>
<div class="col s3 m3 btn-line">
<a href="#" v-on:click="calculate(2)" class="btn-flat waves-effect waves-black">2</a>
<a href="#" v-on:click="calculate(6)" class="btn-flat waves-effect waves-black">6</a>
<a href="#" v-on:click="calculate(9)" class="btn-flat waves-effect waves-black">9</a>
<a href="#" v-on:click="getResult" class="btn-flat waves-effect waves-black">=</a>
</div>
<div class="col s3 m3 btn-line">
<a href="#" v-on:click="calculate(3)" class="btn-flat waves-effect waves-black">3</a>
<a href="#" v-on:click="calculate(7)" class="btn-flat waves-effect waves-black">7</a>
<a href="#" v-on:click="calculate(0)" class="btn-flat waves-effect waves-black">0</a>
<a href="#" v-on:click="clear" class="btn-flat waves-effect waves-black">CE</a>
</div>
<div class="col s3 m3 btn-line">
<a href="#" v-on:click="calculate('+')" class="btn-flat waves-effect waves-black">+</a>
<a href="#" v-on:click="calculate('-')" class="btn-flat waves-effect waves-black">-</a>
<a href="#" v-on:click="calculate('/')" class="btn-flat waves-effect waves-black">/</a>
<a href="#" v-on:click="calculate('*')" class="btn-flat waves-effect waves-black" id="bottom-right">*</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.99.0/js/materialize.min.js"></script>
<script id="jsbin-javascript">
var app = new Vue({
el: '#app',
data:{
result: 0,
numbers: '0',
},
methods:{
calculate(n){
this.numbers = (this.numbers == '0')?
((typeof n == 'string')?
this.numbers : n)
: this.numbers + ""+ n;
},
getResult(){
this.result = eval(this.numbers);
},
clear(){
this.result = 0;
this.numbers = 0;
}
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment