add google images

dmitrymailk · Nov 9, 2021 · d856dea · d856dea
1 parent 41dcd03
commit d856dea
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 12 deletions.
diff --git a/frontend/frontend_learn_english/src/Authorization/LearnPage.vue b/frontend/frontend_learn_english/src/Authorization/LearnPage.vue
@@ -1,10 +1,11 @@
 <template lang="pug">
 .app
-  .card.learn-card.px-2.mx-2.mt-3
-    .card-body(v-show="learningStatus == 0")
-      p.card-text
-        | {{sentence}}
-      input.form-control(
+  .card.learn-card.mx-2.mt-3
+    .card-body.px-3(v-show="learningStatus == 0")
+      .card-text
+        a.card-text__item(v-for="word in sentence" target="_blank" :href="word.link")
+          | {{word.word}}
+      input.form-control.mt-2(
         v-model="userInput" 
         :placeholder="wordTip"  
         @keyup="setInputStatus" 
@@ -14,16 +15,16 @@
       .button-container
         a.btn.btn-secondary.mt-3.next-button(@click="applyCard")
           |Next
+      .definitions-list.mt-3
+        span.definitions-list__title
+          |POS: 
+        span {{posDefinition}}
       .definitions-list
         span.definitions-list__title
           |Definitions: 
         ul 
          li(v-for="item in definitions")
           | {{item}}
-      .definitions-list
-        span.definitions-list__title
-          |POS Definition: 
-        span {{posDefinition}}
     h3.mt-5.mb-5.text-center(v-show="learningStatus == 1")
       |No more cards on server 
     h3.mt-5.mb-5.mr-3.text-center(v-show="learningStatus == 2")
@@ -37,7 +38,6 @@
 
 
 </template>
-
 <script>
 import { apiServer } from "../utils/api";
 import arrayShuffle from "../utils/arrayOperation";
@@ -57,8 +57,22 @@ export default {
   },
   computed: {
     sentence: function () {
-      if (this.cards.length > 0) return this.cards[this.stage].sentence;
-      return "";
+      if (this.cards.length > 0) {
+        console.log(
+          this.cards[this.stage].sentence,
+          this.cards[this.stage].sentence.split(" ")
+        );
+        let sentence = this.cards[this.stage].sentence.split(" ");
+        let newSentence = [];
+        sentence.forEach((word) => {
+          newSentence.push({
+            link: `https://www.google.com/search?tbm=isch&q=${word}`,
+            word: word,
+          });
+        });
+        return newSentence;
+      }
+      return [];
     },
     definitions: function () {
       if (this.cards.length > 0) {
@@ -230,6 +244,16 @@ body, html
 .loading-text
   margin-right: 20px
 
+.card-text
+  display: inline-flex
+  flex-wrap: wrap
+  &__item
+    text-decoration: none
+    color: #222
+    margin-right: 5px
+    // word-wrap: normal
+
+
 @media (max-width: 652px)
   .app
     align-items: flex-start

diff --git a/frontend/frontend_learn_english/src/experiments/TestGoogleImages.vue b/frontend/frontend_learn_english/src/experiments/TestGoogleImages.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <a href="https://www.google.com/search?tbm=isch&q=cat" target="_blank"
+      >Find a cat</a
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    findImage() {
+      // https://www.google.com/search?tbm=isch&q=
+    },
+  },
+};
+</script>
diff --git a/frontend/frontend_learn_english/src/router/index.js b/frontend/frontend_learn_english/src/router/index.js
@@ -4,6 +4,7 @@ import MyPlugin from "./MenuPlugin";
 
 import Authorization from "../Authorization/Authorization.vue";
 import LearnPage from "../Authorization/LearnPage.vue";
+import TestGoogleImages from "../experiments/TestGoogleImages.vue";
 
 Vue.use(VueRouter);
 Vue.use(MyPlugin);
@@ -17,6 +18,10 @@ const routes = [
     path: "/",
     component: LearnPage,
   },
+  {
+    path: "/test",
+    component: TestGoogleImages,
+  },
 ];
 
 const router = new VueRouter({