├── Github
├── README.md
├── flashcard.vue
└── package.json


/Github:
--------------------------------------------------------------------------------
1 | THANK YOU 😀 - repo: https://github.com/cuduy197/vue-flashcard
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Flashcard :zap:
 2 | 
 3 | ![Image flashcard](https://media.giphy.com/media/3og0ICaNlqFKHKlXKo/giphy.gif)
 4 | + This is [on GitHub](https://github.com/cuduy197/vue-flashcard)  so let me know if I've b0rked it somewhere, give me a star :star: if you like it 
 5 | 
 6 | ### :white_check_mark: Install :ok_hand:
 7 | ``` npm i vue-flashcard```
 8 | 
 9 | ### :white_check_mark: Usage :mortar_board:
10 | - Add it to  your component  :tada:
11 | 
12 | ![Usage image](https://media.giphy.com/media/l1BgQGZQxJcXNiwk8/giphy.gif)
13 | 
14 | ```javascript
15 | import vueFlashcard from 'vue-flashcard';
16 | 
17 | export default {
18 | 
19 | components : { vueFlashcard }
20 | 
21 | }
22 | ```
23 | 
24 | ### :white_check_mark: Example :four_leaf_clover: 
25 | 
26 | ```html
27 | <vue-flashcard 
28 | front="hello this is a flashcard" 
29 | back="with animation">
30 | </vue-flashcard>
31 | ```
32 | ### :white_check_mark: :book: Props: 
33 | + `front` ( Front text) [default: ""]
34 | + `back` (Back text) [default: ""]
35 | 
36 | + `imgFront` (Image front ) [default: ""]
37 | + `imgBack` (Image back)  [default: ""]
38 | 
39 | + `colorFront` (Color front card ) [default: "white"]
40 | + `colorBack` (Color back card ) [default: "green"]
41 | 
42 | + `colorTextFront` (Color text front card ) [default: "black"]
43 | + `colorTextBack` (Color text back card ) [default: "white"]
44 | 
45 | + `textSizeFront` (Text size front card ) [default: "2em"]
46 | + `textSizeBack` (Text size back card )  [default: "2em"]
47 | 
48 | + `headerFront` (Header front text ) [default: "Do you know?"]
49 | + `headerBack` (Header back text )  [default: "Answer"]
50 | 
51 | + `footerFront` (Footer front text)  [default: "Click to show Back"]
52 | + `footerBack` (Footer back text ) [default: "Click to show Front"]
53 | 
54 | 
55 | ## Make with my old laptop :octocat:  
56 | 
57 | [![NPM](https://nodei.co/npm/vue-flashcard.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-flashcard/)


--------------------------------------------------------------------------------
/flashcard.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div @click="isToggle=!isToggle" v-bind:style="{backgroundColor: colorFront, color: colorTextFront}" v-show="!isToggle" class="animated flipInX flashcard">
  4 |             <div class="card-header" style="padding-bottom: 15px;"> {{headerFront}} </div>
  5 |             <div class="card-content center">
  6 |                 <p v-bind:style="{fontSize: textSizeFront,fontWeight: 'bold'}">{{front}}</p>
  7 |                 <img v-if="imgFront!=''" :src="imgFront" width="200" height="200">
  8 |             </div>
  9 |             <div class="card-footer">{{footerFront}}</div>
 10 |         </div>
 11 |         <div @click="isToggle=!isToggle" v-bind:style="{backgroundColor: colorBack, color: colorTextBack}" v-show="isToggle" class="animated flipInX flashcard">
 12 |             <div class="card-header" style="padding-bottom: 15px;"> {{headerBack}}</div>
 13 |             <div class="card-content center">
 14 |                 <p v-bind:style="{fontSize: textSizeBack, fontWeight: 'bold'}">{{back}}</p>
 15 |                 <img v-if="imgBack!=''" :src="imgBack" width="200" height="200">
 16 |             </div>
 17 |             <div class="card-footer">{{footerBack}}</div>
 18 |         </div>
 19 |     </div>
 20 | </template>
 21 | <script>
 22 | export default {
 23 |     data() {
 24 |         return {
 25 |             isToggle: false,
 26 |         }
 27 |     }, props: {
 28 |         imgFront: {
 29 |             type: String,
 30 |             default: ''
 31 |         },
 32 |         imgBack: {
 33 |             type: String,
 34 |             default: ''
 35 |         },
 36 |         front: {
 37 |             type: String,
 38 |             default: ''
 39 |         },
 40 |         back: {
 41 |             type: String,
 42 |             default: ''
 43 |         },
 44 |         textSizeFront: {
 45 |             type: String,
 46 |             default: '2em'
 47 |         },
 48 |         textSizeBack: {
 49 |             type: String,
 50 |             default: '2em'
 51 |         },
 52 |         colorTextFront: {
 53 |             type: String,
 54 |             default: 'black'
 55 |         },
 56 |         colorTextBack: {
 57 |             type: String,
 58 |             default: 'white'
 59 |         },
 60 |         colorFront: {
 61 |             type: String,
 62 |             default: 'white'
 63 |         },
 64 |         colorBack: {
 65 |             type: String,
 66 |             default: '#2ecc71'
 67 |         },
 68 |         headerFront: {
 69 |             type: String,
 70 |             default: 'Do you know?'
 71 |         },
 72 |         headerBack: {
 73 |             type: String,
 74 |             default: 'Answer'
 75 |         },
 76 |         footerFront: {
 77 |             type: String,
 78 |             default: 'Click to show Back'
 79 |         },
 80 |         footerBack: {
 81 |             type: String,
 82 |             default: 'Click to show Front'
 83 |         }
 84 | 
 85 | 
 86 |     }
 87 | }
 88 | </script>
 89 | <style scoped>
 90 | .center {
 91 |     text-align: center;
 92 | }
 93 | 
 94 | .flashcard {
 95 |     cursor: pointer;
 96 |     border-radius: 10px;
 97 |     margin: 20px;
 98 |     padding: 25px;
 99 |     box-shadow: 0 0px 10px rgba(0, 0, 0, 0.4);
100 |     text-align: center;
101 | }
102 | 
103 | .flashcard:hover {
104 |     box-shadow: 0 0px 25px rgba(0, 0, 0, 0.8);
105 | }
106 | 
107 | .animated {
108 |     animation-duration: 1s;
109 |     animation-fill-mode: both;
110 | }
111 | 
112 | @keyframes flipInX {
113 |     from {
114 |         transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
115 |         animation-timing-function: ease-in;
116 |         opacity: 0;
117 |     }
118 |     40% {
119 |         transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
120 |         animation-timing-function: ease-in;
121 |     }
122 |     60% {
123 |         transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
124 |         opacity: 1;
125 |     }
126 |     80% {
127 |         transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
128 |     }
129 |     to {
130 |         transform: perspective(400px);
131 |     }
132 | }
133 | 
134 | .flipInX {
135 |     backface-visibility: visible !important;
136 |     animation-name: flipInX;
137 | }
138 | </style>
139 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vue-flashcard",
 3 |     "version": "1.1.5",
 4 |     "description": "Flashcard component for vuejs 2 💡",
 5 |     "main": "flashcard.vue",
 6 |     "scripts": {
 7 |         "test": "echo HELLO",
 8 |         "preinstall": "echo ._THANKS YOU 😀_. Github : https://github.com/cuduy197/vue-flashcard"
 9 |     },
10 |     "keywords": [
11 |         "vuejs2",
12 |         "Vuejs",
13 |         "flashcard",
14 |         "component",
15 |         "vue component"
16 |     ],
17 |     "author": "cuduy197",
18 |     "license": "MIT",
19 |     "repository": {
20 |         "type": "git",
21 |         "url": "git+https://github.com/cuduy197/vue-flashcard.git"
22 |     },
23 |     "bugs": {
24 |         "url": "https://github.com/cuduy197/vue-flashcard/issues"
25 |     },
26 |     "homepage": "https://github.com/cuduy197/vue-flashcard#readme"
27 | }
28 | 


--------------------------------------------------------------------------------