la inn kjøleskapsside

src/components/FridgeItem.vue

+<template>
+<div id ="item">
+    <img src="src/components/icons/logo.png" alt="">
+    <div id="itemInfo">
+        <h1>{{ itemName }} {{ quantity }}{{quantityUnit}}</h1>
+        <h2>{{expirationText}}</h2>
+    </div>
+    <Icon icon="game-icons:apple-core" :color="iconColor" :style="{ fontSize: iconSize }" />
+</div>
+    <hr>
+</template>
+
+<script>
+import {Icon} from "@iconify/vue";
+
+export default {
+    name: "FridgeItem",
+    components: {Icon},
+    computed: {
+        iconColor(){
+            return 'black';
+        },
+        iconSize() {
+            return '4rem'
+        },
+        expirationText() {
+            const expirationDays = this.getDateDifference();
+
+            if(expirationDays<0) {
+                return "Utgikk " + this.expiration
+            }
+
+            switch (expirationDays){
+                case expirationDays < -1:
+                    return "Utgikk " + this.expiration
+                case 0:
+                    return "Utgår i dag"
+                case -0:
+                    return "Utgår i dag"
+                case 1:
+                    return "Utgår i morgen"
+                case 2:
+                    return "Utgår om to dager"
+                case 3:
+                    return "Utgår om tre dager"
+                default:
+                    return "Utgår " + this.expiration
+            }
+
+
+            return "i morgen"
+        }
+    },
+    props: {
+        itemName: String,
+        expiration: String,
+        image: String,
+        quantity: String,
+        quantityUnit: String,
+    },
+    methods: {
+        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;
+        },
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+#item {
+    background-color: base.$white;
+    color: black;
+    border-radius: 10px;
+    padding: 1em;
+    padding-left: 2em;
+    padding-right:2em;
+    display:flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+
+img {
+    width: 4rem;
+    margin-right:.6em;
+
+}
+
+#itemInfo{
+    width: 100%;
+}
+
+</style>
\ No newline at end of file

src/components/Navbar.vue

@@ -8,7 +8,7 @@
                     </RouterLink>
                 </li>
                 <li>
-                    <RouterLink :to="'/'" :aria-label="'link to fridge page'">
+                    <RouterLink :to="'/myFridge'" :aria-label="'link to fridge page'">
                       <Icon icon="mingcute:fridge-line" :color="iconColor" :style="{ fontSize: iconSize }"/>
                     </RouterLink>
                  </li>

src/router/index.js

 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from "@/views/HomeView.vue";
+import FridgeView from "@/views/FridgeView.vue";
 
 
 const router = createRouter({
@@ -10,6 +11,11 @@ const router = createRouter({
       name: 'home',
       component: HomeView
     },
+    {
+      path: '/myFridge',
+      name: 'myFridge',
+      component: FridgeView
+    },
   ]
 })
 

src/views/FridgeView.vue

+<template>
+    <main>
+        <h1>Kjøleskap</h1><br><br>
+        <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>
+        </div>
+
+    </main>
+
+</template>
+
+<script>
+import FridgeItem from "@/components/FridgeItem.vue";
+
+export default {
+    name: "FridgeView",
+    components: {FridgeItem}
+}
+</script>
+
+<style scoped lang="scss">
+main {
+    padding-top: 4em;
+    color:black;
+    background-color: base.$white;
+}
+
+#itemCOntainer {
+    background-color: base.$grey;
+}
+</style>
\ No newline at end of file