UI + responsive + word of the day

src/App.vue

@@ -72,25 +72,11 @@ footer {
   justify-content: space-between;
 }
 
-@media (max-width: 380px) {
+#todo-container {
-  #ytb-player {
+  width: 30%;
-    display: none;
+  margin-right: 16px;
-  }
 }
 
-@media (max-width: 330px) {
-  #ytb-player {
-    display: block;
-  }
-}
-
-@media (max-width: 330px) {
-  #right-side {
-    display: none;
-  }
-}
-
-@media (min-width: 330px) {
 #right-side {
   display: flex;
   width: 60%;
@@ -98,12 +84,37 @@ footer {
   margin-right: 32px;
   margin-left: 32px;
 }
+
+@media (max-width: 330px) {
+  #right-side {
+    display: none;
+  }
 }
 
+@media (max-width: 535px) {
   #todo-container {
-  width: 30%;
+    width: 100%;
-  margin-right: 16px;
+  }
-  max-width: 500px;
+  #right-side {
+    width: auto;
+    margin-top: 16px;
+  }
+  #time {
+    font-size: 32px!important;
+  }
+
+  #todolist {
+    margin-right: 32px;
+  }
+  #container {
+    display: block;
+  }
+  #ytb-player {
+    display: none;
+  }
+  #container-infos {
+    display: none;
+  }
 }
 
 /* TEXT UNDERLINE */

src/components/Infos.vue

@@ -0,0 +1,156 @@
+<template>
+  <div id="container-infos">
+    <div id="date-time">
+      <div id="date">
+        {{ this.date }}
+      </div>
+      <div id="time">
+        {{ this.time }}
+      </div>
+    </div>
+    <hr>
+    <div id="word-definition">
+      <div id="word">
+        {{ this.word.word }}
+      </div>
+      <div id="definition">
+        {{ this.word.definition }}
+      </div>
+      <div id="btn">
+        <button @click="getNewWordEveryday" id="fetch">
+          Learn another word
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "Stats",
+  data() {
+    return {
+      date: "",
+      time: "",
+      word: {
+        word: "",
+        definition: "",
+      },
+    }
+  },
+  methods: {
+    generateDateOfTheDay() {
+      const date = new Date();
+      const day = date.getDate();
+      const month = date.getMonth() + 1;
+      this.date = this.prettyPrintDate(date, day, month);
+      setTimeout(() => {
+        this.generateDateOfTheDay();
+      }, 1000);
+    },
+    prettyPrintDate(date, day, month) {
+      const days = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
+      const dayOfTheWeek = days[date.getDay()];
+      const months = ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"];
+      return `${dayOfTheWeek}, ${day} ${months[month - 1]}`;
+    },
+    getCurrentTime() {
+      const date = new Date();
+      const hours = date.getHours();
+      const minutes = date.getMinutes();
+      this.time = this.prettyPrintTime(hours, minutes);
+      setTimeout(() => {
+        this.getCurrentTime();
+      }, 1000);
+    },
+    prettyPrintTime(hours, minutes) {
+      return `${hours < 10 ? "0" + hours : hours}:${minutes < 10 ? "0" + minutes : minutes}`;
+    },
+    getNewWordEveryday() {
+      // fetch a new english word everyday
+      fetch("https://random-word-api.herokuapp.com/word?number=1")
+        .then(response => response.json())
+        .then(data => {
+          // uppercase first letter of data[0]
+          this.word.word = data[0].charAt(0).toUpperCase() + data[0].slice(1);
+          this.getDefinition(this.word.word);
+          this.word.word += " : "
+        })
+    },
+    getDefinition(word) {
+      const url = 'https://api.dictionaryapi.dev/api/v2/entries/en/' + word;
+      return fetch(url)
+          .then(response => response.json())
+          .then(data => {
+            if (data.length > 0) {
+              this.word.definition = data[0].meanings[0].definitions[0];
+            } else {
+              // get another word if the word is not found
+              this.getNewWordEveryday();
+            }
+            this.word.definition = data[0].meanings[0].definitions[0].definition;
+          }).catch(error => {
+              console.log(error);
+          });
+    }
+  },
+  created() {
+    this.generateDateOfTheDay();
+    this.getCurrentTime();
+    this.getNewWordEveryday()
+  }
+}
+</script>
+
+<style scoped>
+
+#container-infos {
+  position: relative;
+  background: #504746;
+  width: 100%;
+  border-radius: 16px;
+  padding: 16px 24px 18px 24px;
+  color: white;
+  max-height: 320px;
+  overflow: auto;
+}
+
+#date-time {
+  display: flex;
+  justify-content: space-between;
+  font-size: 36px;
+}
+
+@media (max-width: 1400px) {
+  #time {
+    display: none;
+  }
+}
+
+#word-definition {
+  margin-top: 16px;
+}
+
+#word {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+#definition {
+  font-size: 20px;
+  font-weight: lighter;
+}
+
+#btn {
+  text-align: center;
+  margin-top: 24px;
+}
+
+#btn > button {
+  font-size: 20px;
+  padding: 8px;
+}
+
+</style>

src/components/Pomodoro.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import Stats from "@/components/Stats";
+import Stats from "@/components/Infos";
 const MINUTES = 25;
 const RANGE_MINUTES = 5;
 const SECONDS = 0;
@@ -201,6 +201,8 @@ export default {
   padding-top: 8px;
   padding-bottom: 16px;
   margin-right: 16px;
+  min-height: 260px;
+  max-height: 330px;
 }
 
 #container {
@@ -261,17 +263,37 @@ export default {
 }
 
 @media (max-width: 635px) {
-  #message {
+  #container-infos {
     display: none;
   }
 
+  .pomodoro {
+    margin-right: 0px;
+    width: 100%;
+  }
+
+  #message {
+    font-size: 1.6rem;
+  }
+
   .dot {
-    display: none;
+    height: 25px;
+    width: 25px;
+    background-color: lightslategrey;
+    border-radius: 50%;
+    margin: 12px 4px 12px 4px;
+    display: inline-block;
   }
 
   .active {
-    display: none;
+    height: 25px;
+    width: 25px;
+    background-color: mediumseagreen;
+    border-radius: 50%;
+    margin: 12px 4px 12px 4px;
+    display: inline-block;
   }
+
 }
 
 @media (min-width: 635px) {

src/components/Stats.vue

@@ -1,27 +0,0 @@
-<template>
-  <div id="container-stats">
-    NEWS COMING SOON 👀
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: "Stats",
-}
-</script>
-
-<style scoped>
-
-#container-stats {
-  background: #504746;
-  width: 100%;
-  border-radius: 16px;
-  padding: 10% 12px 8px 12px;
-  color: white;
-  text-align: center;
-  vertical-align: center;
-  font-size: 24px;
-}
-
-</style>

src/components/ToDoList.vue

@@ -21,7 +21,6 @@
 
 <script>
 
-
 export default {
   name: "ToDoList",
   data() {
@@ -68,6 +67,7 @@ export default {
   #todo_input {
     font-size: 1.2rem;
     width: 100%;
+    min-width: 150px;
     height: 52px;
     padding: 12px 20px;
     margin: 8px 0;
@@ -95,7 +95,6 @@ export default {
     padding: 12px 22px 12px 22px;
     border-radius: 12px;
     min-width: 82px;
-    max-width: 40vw;
     box-shadow: rgba(111, 111, 111, 0.2) 0px 7px 29px 0px;
     word-break: break-all;
     background-color: white;