enhancement(sparesti): user gets a text notification if they have completed a challenge

src/components/SavingsPath.vue

@@ -117,6 +117,12 @@
                 alt="Finish Line"
             />
         </div>
+
+        <div v-if="showCompletedText" class="flex flex-row justify-center items-center mt-4 gap-3">
+            <span>Gratulerer! Du har fullført en utfordring!</span>
+            <button class="primary" @click="showCompletedText = false">Skjul</button>
+        </div>
+
         <!-- Goal -->
         <div v-if="goalLocal" class="flex flex-row justify-around m-t-2 pt-6 w-full mx-auto">
             <div class="grid grid-rows-2 grid-flow-col gap 4">
@@ -197,6 +203,8 @@ let goalLocal: Goal | null | undefined = reactive({
 const isMounted = ref<boolean>(false)
 const componentKey = ref<number>(0)
 
+const showCompletedText = ref(false)
+
 //Initialisation:
 
 onMounted(async () => {
@@ -349,6 +357,7 @@ const animateChallenge = (challenge: Challenge) => {
         challenge.completion! >= 100 &&
         !animatedChallenges.value.includes(challenge.id as number)
     ) {
+        showCompletedText.value = true
         if (challenge.id != null) {
             animatedChallenges.value.push(challenge.id)
         } // Ensure no duplication