first use of vuex

src/App.vue

@@ -1,7 +1,10 @@
 <template>
   <div id="app">
     <div id="container">
-      <settings></settings>
+      <div id="nav-bar">
+        <settings></settings>
+        <socials></socials>
+      </div>
       <div id="todo-container">
         <to-do-list></to-do-list>
       </div>
@@ -14,18 +17,6 @@
         </div>
       </div>
     </div>
-    <footer>
-      <div>
-        <a href="https://github.com/RemiSaurel/own-workspace" target="_blank" class="underline">
-          <img src="../src/res/github.png" alt="github" width="32" height="32">
-        </a>
-      </div>
-      <div>
-        <a href="https://www.linkedin.com/in/r%C3%A9mi-saurel/" target="_blank" class="underline">
-          <img src="../src/res/linkedin.png" alt="github" width="32" height="32">
-        </a>
-      </div>
-    </footer>
   </div>
 </template>
 
@@ -34,6 +25,7 @@ import ToDoList from "@/components/ToDoList";
 import Pomodoro from "@/components/Pomodoro";
 import YtbPlayer from "@/components/YtbPlayer";
 import Settings from "@/components/Settings";
+import Socials from "@/components/Socials";
 
 export default {
   name: 'App',
@@ -41,7 +33,8 @@ export default {
     ToDoList,
     Pomodoro,
     YtbPlayer,
-    Settings
+    Settings,
+    Socials
   }
 }
 
@@ -81,6 +74,14 @@ footer > div {
   margin-right: 16px;
 }
 
+#nav-bar {
+  margin-top: 8px;
+  margin-left: 16px;
+  margin-right: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
 #ytb-player {
   background: #504746;
   margin-top: 16px;
@@ -101,7 +102,6 @@ footer > div {
 
 #todo-container {
   width: 40%;
-  margin-right: 16px;
 }
 
 #right-side {
@@ -112,31 +112,6 @@ footer > div {
   margin-left: 32px;
 }
 
-/* TEXT UNDERLINE */
-.underline {
-  display: inline-block;
-  position: relative;
-  color: #79624c;
-}
-
-.underline:after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  transform: scaleX(0);
-  height: 2px;
-  bottom: -2px;
-  left: 0;
-  background-color: #79624c;
-  transform-origin: bottom right;
-  transition: transform 0.5s ease-out;
-}
-
-.underline:hover:after {
-  transform: scaleX(1);
-  transform-origin: bottom left;
-}
-
 @media (max-width: 330px) {
   #right-side {
     display: none;

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() {

src/store/index.js

@@ -7,10 +7,24 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
     state: {
+        itemsFinished: [],
+        colorSelected: ""
     },
     getters: {
+        itemsFinished(state) {
+            return state.itemsFinished;
+        },
+        colorSelected(state) {
+            return state.colorSelected;
+        }
     },
     mutations: {
+        addItemFinished(state, item) {
+            state.itemsFinished.push(item);
+        },
+        setColorSelected(state, color) {
+            state.colorSelected = color;
+        }
     },
     actions: {
     }