adds confetting on solving all challenges

Author: adityatandon007

my-client/package.json

@@ -16,6 +16,7 @@
  "register-service-worker": "^1.7.2",
  "vue": "^3.2.13",
  "vue-codemirror": "^6.1.1",
+ "vue-confetti-explosion": "^1.0.2",
  "vue-router": "^4.0.3"
  },
  "devDependencies": {

my-client/src/views/ChallengesView.vue

@@ -1,6 +1,7 @@
 <template>
- <div>
+ <div class="challenges-container">
  <h2 class="is-center">Challenges</h2>
+ <ConfettiExplosion v-if="completed == 100" :particleCount="350" />
  <ProgressBar :bgcolor="'#6a1b9a'" :completed="completed" />
  <div class="row">
  <ProblemCard
@@ -19,11 +20,13 @@ import ProgressBar from "@/components/ProgressBar.vue";
 import { problems } from "@/mocks/problems";
 import { defineComponent, reactive, computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import ConfettiExplosion from "vue-confetti-explosion";
 
 export default defineComponent({
  components: {
  ProblemCard,
  ProgressBar,
+ ConfettiExplosion,
  },
  setup() {
  let problemsList = reactive(problems);

my-client/yarn.lock

@@ -8576,6 +8576,11 @@ vue-component-type-helpers@^1.8.21:
  resolved "https://registry.yarnpkg.com/vue-component-type-helpers/-/vue-component-type-helpers-1.8.27.tgz#e816c82dcffac8bca58833c120ba395c325dfa68"
  integrity sha512-0vOfAtI67UjeO1G6UiX5Kd76CqaQ67wrRZiOe7UAb9Jm6GzlUr/fC7CV90XfwapJRjpCMaZFhv1V0ajWRmE9Dg==
 
+vue-confetti-explosion@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/vue-confetti-explosion/-/vue-confetti-explosion-1.0.2.tgz#84b873d400cf0301814bdd71329daa1ac741fd86"
+ integrity sha512-80OboM3/6BItIoZ6DpNcZFqGpF607kjIVc5af56oKgtFmt5yWehvJeoYhkzYlqxrqdBe0Ko4Ie3bWrmLau+dJw==
+
 vue-eslint-parser@^8.0.1:
  version "8.3.0"
  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz#5d31129a1b3dd89c0069ca0a1c88f970c360bd0d"