first use of vuex

src/components/Infos.vue

@@ -79,6 +79,7 @@ export default {
         })
     },
     getDefinition(word) {
+      console.log(this.$store.getters.itemsFinished)
       const url = 'https://api.dictionaryapi.dev/api/v2/entries/en/' + word;
       return fetch(url)
           .then(response => response.json())
@@ -101,6 +102,22 @@ export default {
     this.generateDateOfTheDay();
     this.getCurrentTime();
     this.getNewWordEveryday()
+  },
+  computed: {
+    itemsFinished() {
+      return this.$store.getters.itemsFinished;
+    },
+    colorSelected() {
+      return this.$store.getters.colorSelected;
+    }
+  },
+  watch: {
+    itemsFinished: function(items) {
+      console.log(items);
+    },
+    colorSelected: function(color) {
+      document.getElementById("word").style.color = color;
+    }
   }
 }
 </script>

src/components/Settings.vue

@@ -17,8 +17,8 @@ export default {
         default: "#fdde95",
         greenBlue: "#9acabf",
         green: "#ABCEA7",
-        salmon: "#E6CEBD",
-        grey: "#babbc8"
+        grey: "#d4d4e8",
+        salmon: "#E6CEBD"
       },
       activeColor: "#504746"
     }
@@ -28,6 +28,7 @@ export default {
       this.removeActiveColorFromPalette()
       event.target.style.borderColor = this.activeColor;
       document.body.style.backgroundColor = color;
+      this.$store.commit("setColorSelected", color);
     },
     removeActiveColorFromPalette() {
       const palette = document.querySelectorAll(".color-palette-item");
@@ -55,9 +56,7 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  margin-top: 8px;
-  margin-right: 8px;
-  margin-left: 16px;
+  margin-bottom: 8px;
 }
 
 .color-palette-item {

src/components/Socials.vue

@@ -0,0 +1,30 @@
+<template>
+  <div id="socials-container">
+    <div>
+      <a href="https://github.com/RemiSaurel/own-workspace" target="_blank">
+        <img src="../res/github.png" alt="github" width="32" height="32">
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "socials"
+}
+</script>
+
+<style scoped>
+#socials-container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 8px;
+}
+
+@media (max-width: 675px) {
+  #socials-container {
+    display: none;
+  }
+
+}
+</style>

src/components/ToDoList.vue

@@ -44,6 +44,7 @@ export default {
       this.items = this.items.filter(e =>
           e !== item
       )
+      this.$store.commit("addItemFinished", item);
       this.clearItem()
     },
     clearItem() {