Skip to content

Instantly share code, notes, and snippets.

@oliverbth05

oliverbth05/app.css

Last active April 23, 2018 20:47
Show Gist options
  • Save oliverbth05/1888cb05fee4797d15f037570817608a to your computer and use it in GitHub Desktop.
Save oliverbth05/1888cb05fee4797d15f037570817608a to your computer and use it in GitHub Desktop.
Download ZIP
Basic Descriptive Stats with Computed Properties (Vue)
Raw
app.css
#app{
padding-top: 100px;
}
h3{
text-align:center;
}
#dataHeader{
padding-bottom: 5px;
text-align: center;
border-bottom: 1px solid grey;
}
#dataSegment{
padding-left: 20px;
border-bottom: 0.2px solid rgb(206, 206, 206);
}
#pageHeader{
text-align:center;
margin-bottom: 50px;
}
Raw
app.js
new Vue({
el: "#app",
data: {
dataEntry: "",
arrayData: [],
},
methods: {
pushEntry: function(){
var newEntry = parseFloat(this.dataEntry);
if(isNaN(newEntry)){
alert("Invalid Entry: Only Numbers are Accepted");
}
else{
this.arrayData.push(newEntry);
this.dataEntry = "";
}
},
clearData: function(){
this.arrayData = [];
}
},
computed: {
numberOf: function(){
return this.arrayData.length;
},
sum: function(){
var sum = 0;
for (var i = this.arrayData.length; !!i--;){
sum += this.arrayData[i];
}
return sum;
},
average: function(){
if(this.arrayData.length > 0){
var sum = 0;
for (var i = this.arrayData.length; !!i--;){
sum += this.arrayData[i];
}
return sum/this.arrayData.length;
}
else{
return 0;
}
}
}});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel = stylesheet type = text/css href = "app.css">
<!-- Semantic UI -->
<link rel = stylesheet type = text/css href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.css">
</head>
<body>
<div class = "ui container" id = "app">
<h1 class = "ui header segment" id = "pageHeader">
Basic Statistics with Computed Properties
</h1>
<div class = "ui grid stackable">
<div class = "eight wide column">
<h3>
Enter Data Here
</h3>
<div class = "ui fluid input">
<input type = "text" v-on:keydown.enter = "pushEntry" v-model= "dataEntry">
</div>
<br>
<div class = "ui segment container">
<h4 id = "dataHeader">
Data
</h4>
<ol id = "dataTable" >
<li id = "dataSegment" v-for = "item in arrayData">{{item}}</li>
</ol>
</div>
<br>
<button class = "ui red fluid button" @click = "clearData">
Clear Data
</button>
</div>
<div class = "eight wide column">
<div class="ui statistic">
<div class="value">
{{numberOf}}
</div>
<div class="label">
N Value
</div>
</div>
<hr>
<div class="ui statistic">
<div class="value">
{{sum.toFixed(2)}}
</div>
<div class="label">
Sum
</div>
</div>
<hr>
<div class="ui statistic">
<div class="value">
{{average.toFixed(2)}}
</div>
<div class="label">
Average
</div>
</div>
</div>
</div>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- app.js -->
<script src = "app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment