easter eggs, background colors, refactor

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="app">
     <div id="container">
+      <settings></settings>
       <div id="todo-container">
         <to-do-list></to-do-list>
       </div>
@@ -32,13 +33,15 @@
 import ToDoList from "@/components/ToDoList";
 import Pomodoro from "@/components/Pomodoro";
 import YtbPlayer from "@/components/YtbPlayer";
+import Settings from "@/components/Settings";
 
 export default {
   name: 'App',
   components: {
     ToDoList,
     Pomodoro,
-    YtbPlayer
+    YtbPlayer,
+    Settings
   }
 }
 
@@ -88,7 +91,6 @@ footer > div {
 
 #pomodoro {
   width: 100%;
-
 }
 
 #container {
@@ -110,30 +112,6 @@ footer > div {
   margin-left: 32px;
 }
 
-@media (max-width: 330px) {
-  #right-side {
-    display: none;
-  }
-}
-
-@media (max-width: 675px) {
-  #todo-container {
-    width: 100%;
-  }
-  #right-side {
-    width: auto;
-    margin-top: 16px;
-  }
-
-  #container {
-    display: block;
-  }
-  #ytb-player {
-    display: none;
-  }
-
-}
-
 /* TEXT UNDERLINE */
 .underline {
   display: inline-block;
@@ -159,4 +137,28 @@ footer > div {
   transform-origin: bottom left;
 }
 
+@media (max-width: 330px) {
+  #right-side {
+    display: none;
+  }
+}
+
+@media (max-width: 675px) {
+  #todo-container {
+    width: 100%;
+  }
+  #right-side {
+    width: auto;
+    margin-top: 16px;
+  }
+
+  #container {
+    display: block;
+  }
+  #ytb-player {
+    display: none;
+  }
+
+}
+
 </style>

src/components/Pomodoro.vue

@@ -338,6 +338,10 @@ export default {
     margin-right: 8px;
     margin-left: 8px;
   }
+  #container {
+    margin-left: 16px;
+    margin-right: 16px;
+  }
 }
 
 @media (max-width: 835px) {

src/components/Settings.vue

@@ -0,0 +1,83 @@
+<template>
+<div id="settings-container">
+  <div id="color-palette">
+    <div v-for="color in colors" :key="color.id">
+      <div class="color-palette-item" :style="{backgroundColor: color, borderColor: activeColor}" @click="setBackgroundColor($event, color)"></div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: "Settings",
+  data() {
+    return {
+      colors: {
+        default: "#fdde95",
+        greenBlue: "#9acabf",
+        green: "#ABCEA7",
+        salmon: "#E6CEBD",
+        grey: "#babbc8"
+      },
+      activeColor: "#504746"
+    }
+  },
+  methods: {
+    setBackgroundColor(event,color) {
+      this.removeActiveColorFromPalette()
+      event.target.style.borderColor = this.activeColor;
+      document.body.style.backgroundColor = color;
+    },
+    removeActiveColorFromPalette() {
+      const palette = document.querySelectorAll(".color-palette-item");
+      for (let i = 0; i < palette.length; i++) {
+        palette[i].style.borderColor = "lightslategrey";
+      }
+    },
+    setFirstColor() {
+      // get first div of color-palette
+      const palette = document.querySelectorAll(".color-palette-item");
+      palette[0].style.borderColor = this.activeColor;
+    }
+  },
+  mounted() {
+    this.removeActiveColorFromPalette()
+    this.setFirstColor()
+  }
+}
+</script>
+
+<style scoped>
+
+#color-palette {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+  margin-right: 8px;
+  margin-left: 16px;
+}
+
+.color-palette-item {
+  margin-top: 4px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: solid 2px lightslategrey;
+}
+
+@media (max-width: 675px) {
+  #color-palette {
+    flex-direction: row;
+    justify-content: center;
+  }
+  .color-palette-item {
+    margin-top: 0;
+    margin-right: 4px;
+  }
+}
+
+</style>

src/components/ToDoList.vue

@@ -32,15 +32,21 @@ export default {
   },
   methods: {
     addItem(item) {
-      if (item.trim() !== "") {
+      const trimmedItem = item.trim();
-        this.items.push(item)
+      if (trimmedItem.length > 0 && this.items.indexOf(trimmedItem) === -1) {
-        this.item = ""
+        this.items = [trimmedItem].concat(this.items)
+        this.clearItem()
+      } else {
+        this.clearItem()
       }
     },
     removeItem(item) {
       this.items = this.items.filter(e =>
           e !== item
       )
+      this.clearItem()
+    },
+    clearItem() {
       this.item = ""
     }
   }
@@ -51,20 +57,16 @@ export default {
   .container {
     display: flex;
     justify-content: space-between;
-    max-height: 770px;
+    max-height: 825px;
     overflow: auto;
     height: 100%;
   }
 
-  #pomodoro {
-    width: 50%;
-    margin-right: 32px;
-  }
 
   #todolist {
     display: flex;
     flex-direction: column;
-    margin-left: 32px;
+    margin-left: 16px;
     width: 100%;
   }
 
@@ -103,20 +105,20 @@ export default {
     height: 52px;
     margin: 8px 16px 0px 0px;
     border-radius: 16px;
-    border: 3px solid #79624c;
+    border: 3px solid #504746;
-    background-color: #79624c;
+    background-color: #504746;
     color: white;
   }
 
   #add_button:hover {
-    border: 3px solid #5b4735;
+    border: 3px solid #413838;
-    background-color: #5b4735;
+    background-color: #413838;
     color: white;
   }
 
   #add_button:active {
-    border: 3px solid #3a2b18;
+    border: 3px solid #2f2828;
-    background-color: #3a2b18;
+    background-color: #2f2828;
     color: white;
   }
 
@@ -124,6 +126,7 @@ export default {
     display: flex;
     flex-direction: column;
     padding-right: 16px;
+    margin-top: 8px;
   }
 
   .item {
@@ -151,18 +154,25 @@ export default {
 
   @media (max-width: 675px) {
     #add_button {
-      margin-right: 0;
       margin-top: 8px;
     }
     #todolist {
       margin-right: 32px;
+      padding-left: 16px;
     }
     #liste {
-      padding-right: 0;
+      padding-bottom: 8px;
-      margin-top: 8px;
+      padding-left: 16px;
       max-height: 320px;
       height: 100%;
       overflow: auto;
     }
+
+    #input {
+      padding-left: 16px;
+    }
+    .item:hover {
+      box-shadow: #79624c 0px 1px 6px 0px;
+    }
   }
 </style>

src/components/YtbPlayer.vue

@@ -7,8 +7,8 @@
       </iframe>
     </div>
     <div class="params">
-      <button @click="prevPlaylist" id="prev">⏮</button>
+      <button @click="prevPlaylist" >⏮</button>
-      <button @click="nextPlaylist" id="next">⏭</button>
+      <button @click="nextPlaylist" @mousedown.middle="easterEgg" id="next">⏭</button>
     </div>
   </div>
 </template>
@@ -21,6 +21,8 @@ export default {
     return {
       displayYoutube: true,
       livesId: [],
+      easterEggs: [],
+      easterEggsSongsId:-1,
       songId: 0
     }
   },
@@ -29,20 +31,26 @@ export default {
     {
       let lofi = require("../data/lofi.json");
       this.livesId = lofi.id;
+      this.easterEggs = lofi.easterEggs;
     },
     nextPlaylist()
     {
       this.songId++ === this.livesId.length - 1 ? this.songId = 0 : this.songId;
       let id = this.livesId[this.songId];
-      let ytb = document.getElementById("youtube_video")
+      this.changeYtbSrc(id)
-      ytb.src = "https://www.youtube.com/embed/" + id + "?autoplay=1";
     },
     prevPlaylist()
     {
       --this.songId === -1 ? this.songId = this.livesId.length - 1: this.songId;
-      console.log(this.songId)
-      console.log(this.livesId.length)
       let id = this.livesId[this.songId];
+      this.changeYtbSrc(id)
+    },
+    easterEgg() {
+      this.easterEggsSongsId++ === this.easterEggs.length - 1 ? this.easterEggsSongsId = 0 : this.easterEggsSongsId;
+      let id = this.easterEggs[this.easterEggsSongsId];
+      this.changeYtbSrc(id)
+    },
+    changeYtbSrc(id) {
       let ytb = document.getElementById("youtube_video")
       ytb.src = "https://www.youtube.com/embed/" + id + "?autoplay=1";
     }

src/data/lofi.json

@@ -6,5 +6,10 @@
     "-5KAN9_CzSA",
     "jfKfPfyJRdk",
     "GDQnA1LVCWA"
+  ],
+  "easterEggs": [
+    "VDgaKWRuhRU",
+    "wp_QTEDQZsU",
+    "mgtu7u9PKkI"
   ]
 }