Skip to content

Commit

Permalink
Adds ProgressBar component
Browse files Browse the repository at this point in the history
calcScore getter needed to be updated to return a number to make it more usable

displayScoreAsPercent added to replicate original use of calcScore
  • Loading branch information
angeliquejw committed Feb 4, 2021
1 parent 09cd93a commit d746cd3
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 4 deletions.
91 changes: 91 additions & 0 deletions src/components/ProgressBar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<template>
<progress
:max="max"
:aria-valuemax="max"
:aria-valuemin="min"
:value="value"
:aria-valuenow="value"
:aria-labelledby="label"
>
<div
class="progress-bar"
:aria-valuemax="max"
:aria-valuemin="min"
:aria-valuenow="value"
:aria-labelledby="label"
>
<div :style="styleObject"></div>
</div>
</progress>
</template>

<script>
export default {
props: {
value: {
type: Number,
required: true,
},
min: {
type: Number,
default: 0,
},
max: {
type: Number,
default: 100,
},
label: {
type: String,
default: '',
},
},
data() {
return {
styleObject: {
width: this.value + '%',
},
};
},
};
</script>

<style lang="scss" scoped>
@mixin default-bar-styles {
background-color: $color-mystic;
box-shadow: inset 0 1px 2px 0 $color-regent-gray;
width: 100%;
}
$bar-color: $color-salem;
progress {
@include default-bar-styles();
appearance: none;
border: none;
color: $bar-color;
}
progress::-webkit-progress-bar {
@include default-bar-styles();
}
progress::-webkit-progress-value {
background-color: $bar-color;
}
progress::-moz-progress-bar {
background-color: $bar-color;
}
.progress-bar {
@include default-bar-styles();
> div {
background-color: $bar-color;
height: 100%;
}
}
progress,
.progress-bar {
height: 24px;
}
</style>
14 changes: 12 additions & 2 deletions src/components/SummaryStats.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
<h2>Summary</h2>
<div class="summary u-padding-horizontal-sm u-padding-vertical u-margin-bottom-lg">
<h3 class="u-margin-top-none u-margin-bottom-sm">Your Score</h3>
<h4 class="u-margin-top-none u-margin-bottom-lg u-margin-left">{{ getScore }}</h4>
<ProgressBar :value="getScore" label="quiz-score" />
<span id="quiz-score" class="grade-details progress-bar-label u-margin-left-xs">{{
displayScoreAsPercent
}}</span>
<span class="meta meta--duration">Time Spent: {{ formattedDuration }}</span>
<SvgIconContainer width="24" height="24" icon-name="Success" aria-hidden>
<IconCheckmark />
Expand All @@ -18,11 +21,12 @@
import { mapGetters } from 'vuex';
import SvgIconContainer from './SvgIconContainer.vue';
import IconCheckmark from './icons/IconCheckmark.vue';
import ProgressBar from './ProgressBar';
export default {
components: {
SvgIconContainer,
IconCheckmark,
ProgressBar,
},
props: {
data: {
Expand All @@ -37,6 +41,9 @@ export default {
countCorrect: 'quiz/countCorrect',
getScore: 'quiz/calcScore',
}),
displayScoreAsPercent() {
return this.getScore + '%';
},
formattedDuration() {
const durationArray = this.data.timeSpent.split(':');
const duration = [];
Expand Down Expand Up @@ -93,6 +100,9 @@ h3 {
.grade-details {
font-size: $text-size-up-1;
}
.progress-bar-label {
letter-spacing: 1px;
}
svg {
color: $color-salem;
}
Expand Down
4 changes: 2 additions & 2 deletions src/store/modules/quiz.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ type Getters = {
listQuestions(state: QuizStateInterface): Quiz['questions'];
countQuestions(state: QuizStateInterface): number;
countCorrect(state: QuizStateInterface): number;
calcScore(state: QuizStateInterface): string;
calcScore(state: QuizStateInterface): number;
};

const getters: GetterTree<QuizStateInterface, StateInterface> & Getters = {
Expand Down Expand Up @@ -53,7 +53,7 @@ const getters: GetterTree<QuizStateInterface, StateInterface> & Getters = {
const totalQ = getters.countQuestions(state);
const correctQ = getters.countCorrect(state);
const score = (correctQ / totalQ) * 100;
return Math.floor(score) + '%';
return Math.floor(score);
},
};

Expand Down

0 comments on commit d746cd3

Please sign in to comment.