vinduet åpner og lukker seg

src/components/EatFridgeItemModal.vue

 <template>
-  <div id="popup">
-      <p>Hvor mye har du spist?</p>
+  <div v-if="visible" id="popup">
+      <p>Hvor mye har du tatt av varen?</p>
       <br>
       <br>
+      <h2>{{ fridgeItem }}</h2>
       <p>50%</p>
       <p>|----------o-----------|</p>
       <p>.</p>
       <div id="buttons">
-          <button>ALT</button>
+          <button @click="close">ALT</button>
           <button>Ingen ting</button>
       </div>
   </div>
@@ -16,6 +17,22 @@
 <script>
 export default {
     name: "EatFridgeItemModal",
+  props: {
+      fridgeItem: {
+        type: String,
+        required: false
+      },
+  },
+  data() {
+     return {
+       visible:true
+     }
+  },
+  methods:{
+      close(){
+        this.$emit('closeModal',this);
+      }
+  }
 }
 </script>
 
@@ -28,6 +45,13 @@ export default {
   flex-direction: column;
   align-items: center;
 
+
+}
+
+@media (min-width: 800px){
+  #popup {
+    width: 300px;
+  }
 }
 
 #buttons {

src/components/FridgeItem.vue

@@ -5,7 +5,10 @@
         <h1>{{ itemName }} {{ quantity }}{{quantityUnit}}</h1>
         <h2>{{expirationText}}</h2>
     </div>
-    <Icon icon="game-icons:apple-core" :color="iconColor" :style="{ fontSize: iconSize }" />
+    <div @click="appleBtnPressed">
+      <Icon  icon="game-icons:apple-core" :color="iconColor" :style="{ fontSize: iconSize }" />
+    </div>
+
 </div>
     <hr>
 </template>
@@ -16,6 +19,7 @@ import {Icon} from "@iconify/vue";
 export default {
     name: "FridgeItem",
     components: {Icon},
+    emits: ['appleBtnPressed'],
     computed: {
         iconColor(){
             return 'black';
@@ -62,20 +66,17 @@ export default {
         getDateDifference(){ //returns the difference between two dates
             const date = this.expiration.split('.');
             const dateFormat = date[1] + "/" + date [0]+ "/"+date[2];
-
             const expDate = new Date(dateFormat);
             const today = new Date();
-
-            console.log(expDate)
-            console.log(today)
-            console.log(expDate-today);
             const ms = expDate-today;
             const numOfDays = Math.ceil(ms/(86400000))
 
-            console.log(numOfDays)
-
             return numOfDays;
         },
+      appleBtnPressed(){
+          this.$emit('appleBtnPressed', this.itemName); /*TODO: change to item Object*/
+          //console.log("hai " + this.itemName)
+      }
 
     }
 }

src/views/FridgeView.vue

 <template>
     <main>
         <h1>Kjøleskap</h1><br><br>
+      <eat-fridge-item-modal @closeModal="hideModal" v-if="visible" :fridge-item="selectedItem"></eat-fridge-item-modal>
         <div id = "itemCOntainer">
-            <FridgeItem item-name="Melk" quantity="5" quantity-unit="dl" expiration="21.04.23"></FridgeItem>
-            <FridgeItem item-name="Melk" quantity="5" quantity-unit="dl" expiration="22.04.23"></FridgeItem>
-            <FridgeItem item-name="Fløte" quantity="1" quantity-unit="dl" expiration="21.04.22"></FridgeItem>
-            <FridgeItem item-name="Sommerkål" quantity="0.5" quantity-unit=" stk" expiration="14.02.23"></FridgeItem>
-            <FridgeItem item-name="Rar saus" quantity="0.5" quantity-unit=" stk" expiration="03.04.06"></FridgeItem>
-            <FridgeItem item-name="Eple" quantity="3" quantity-unit="stk" expiration="14.02.23"></FridgeItem>
-            <FridgeItem item-name="Smør" quantity="350" quantity-unit="g" expiration="25.06.23"></FridgeItem>
+            <FridgeItem @appleBtnPressed="showModal" item-name="Melk" quantity="5" quantity-unit="dl" expiration="21.04.23"></FridgeItem>
+            <FridgeItem @appleBtnPressed="showModal" item-name="Melk" quantity="5" quantity-unit="dl" expiration="22.04.23"></FridgeItem>
+            <FridgeItem @appleBtnPressed="showModal" item-name="Fløte" quantity="1" quantity-unit="dl" expiration="21.04.22"></FridgeItem>
+            <FridgeItem @appleBtnPressed="showModal" item-name="Sommerkål" quantity="0.5" quantity-unit=" stk" expiration="14.02.23"></FridgeItem>
+            <FridgeItem @appleBtnPressed="showModal" item-name="Rar saus" quantity="0.5" quantity-unit=" stk" expiration="03.04.06"></FridgeItem>
+            <FridgeItem @appleBtnPressed="showModal" item-name="Eple" quantity="3" quantity-unit="stk" expiration="14.02.23"></FridgeItem>
+            <FridgeItem @appleBtnPressed="showModal" item-name="Smør" quantity="350" quantity-unit="g" expiration="25.06.23"></FridgeItem>
         </div>
 
     </main>
@@ -17,10 +18,27 @@
 
 <script>
 import FridgeItem from "@/components/FridgeItem.vue";
+import EatFridgeItemModal from "@/components/EatFridgeItemModal.vue";
 
 export default {
     name: "FridgeView",
-    components: {FridgeItem}
+    components: {EatFridgeItemModal, FridgeItem},
+  data() {
+      return {
+        visible: false,
+        selectedItem: null
+      }
+  },
+  methods: {
+      showModal(itemName){
+        this.visible =true;
+        this.selectedItem=itemName;
+        //alert(itemName)
+      },
+    hideModal(){
+        this.visible=false;
+    }
+  }
 }
 </script>