added nicer date formating

using ISO for time html element and localStrong for p tag

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "pinia": "^2.0.28",
+        "pouchdb-browser": "^8.0.0",
         "vue": "^3.2.45"
       },
       "devDependencies": {
@@ -1232,6 +1233,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.3.0.tgz",
+      "integrity": "sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -1654,6 +1660,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/pouchdb-browser": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/pouchdb-browser/-/pouchdb-browser-8.0.0.tgz",
+      "integrity": "sha512-ygZa7QPcab9Rz+gkhJfc+XM1H932FhMurrbjIGC6/RTBOXyN7ZighX6pCxtbju/h5AVXPQQoilJE2O7MYasa0g==",
+      "dependencies": {
+        "immediate": "3.3.0",
+        "spark-md5": "3.0.2",
+        "uuid": "8.3.2",
+        "vuvuzela": "1.0.3"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -1867,6 +1884,11 @@
       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
       "deprecated": "Please use @jridgewell/sourcemap-codec instead"
     },
+    "node_modules/spark-md5": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.2.tgz",
+      "integrity": "sha512-wcFzz9cDfbuqe0FZzfi2or1sgyIrsDwmPwfZC4hiNidPdPINjeUwNfv5kldczoEAcjl9Y1L3SM7Uz2PUEQzxQw=="
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -1960,6 +1982,14 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.0.1.tgz",
@@ -2045,6 +2075,11 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vuvuzela": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vuvuzela/-/vuvuzela-1.0.3.tgz",
+      "integrity": "sha512-Tm7jR1xTzBbPW+6y1tknKiEhz04Wf/1iZkcTJjSFcpNko43+dFW6+OOeQe9taJIug3NdfUAjFKgUSyQrIKaDvQ=="
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "pinia": "^2.0.28",
+    "pouchdb-browser": "^8.0.0",
     "vue": "^3.2.45"
   },
   "devDependencies": {

src/components/donsAddNews.vue

 <template>
   <form @submit.prevent="addNewsAndClear(news)">
     <input v-model="news" type="text" />
+
     <button>Add News</button>
   </form>
 </template>
@@ -8,18 +9,25 @@
 <script>
 import { ref } from 'vue'
 import { donsNews } from '../store/donsNews'
+//import { PouchDB } from 'pouchdb-browser'
 export default {
   setup() {
     const news = ref('')
     const store = donsNews()
+    //  const localDB = PouchDB()
     const article = ''
 
     function addNewsAndClear(article) {
+      //for the machines aka the html time element
+      const datetime = new Date().toISOString()
+      // for the humans
+      const date = new Date().toLocaleString('en-GB')
       if (article.length === 0) {
         return
       }
       // invokes function in the store:
-      store.addNews(article)
+      store.addNews(datetime, date, article)
+      // clears the input
       news.value = ''
     }
     return { news, addNewsAndClear, store }
@@ -28,3 +36,7 @@ export default {
 </script>
 
 <style lang="css" scoped></style>
+// POUCHDB ideas // function copyNewstoPouch(article) { // var newsList = { //
+id: this.id++, // article, // date // }; // db.put(newsList, function
+callback(err, result) { // if (!err) { // console.log('Successfully posted a
+news Article'); // } // }); // }

src/components/donsNews.vue

 <template>
   <div v-for="news in newsList" :key="news.id">
-    <div>{{ news.article }}</div>
+    <div>
+      <p>{{ news.article }}</p>
+      <time :datetime="news.datetime" />
+      <p>{{ news.date }}</p>
+    </div>
     <select class="reactions" name="reactions">
       <option value="applause">&#128079;</option>
       <option value="happy">&#128512;</option>
@@ -13,6 +17,7 @@
 <script>
 import { donsNews } from '../store/donsNews'
 import { storeToRefs } from 'pinia'
+//import { PouchDB } from 'pouchdb-browser'
 export default {
   setup() {
     const store = donsNews()

src/store/donsNews.js

@@ -3,12 +3,15 @@ import { defineStore } from 'pinia'
 export const donsNews = defineStore('donsNews', {
   state: () => ({
     newsList: [],
-    article:'',
     id: 0,
+    datetime:'',
+    date: '',
+    article:''
       }),
   actions: {
-    addNews(article) {
-      this.newsList.push({ article, id: this.id++ })
+    addNews(datetime,date,article) {
+         this.newsList.push({ id: this.id++, datetime, date, article })
     },
   },
 })
+