[add] add rules

src/App.vue

@@ -54,21 +54,34 @@ function onClick(e: any) {
 </script>
 
 <template>
-  <div class="calculator">
-    <div class="display" data-cy="screen_value">
-      <div v-if="show_result">{{ screen_value }}</div>
-      <div v-else>{{ 0 }}</div>
+  <div>
+    <div class="calculator">
+      <div class="display" data-cy="screen_value">
+        <div v-if="show_result">{{ screen_value }}</div>
+        <div v-else>{{ 0 }}</div>
+      </div>
+      <div>
+        <button
+          v-for="e in elements"
+          :key="e"
+          :style="parameter"
+          @click="onClick(e)"
+          data-cy="button"
+        >
+          {{ e }}
+        </button>
+      </div>
     </div>
     <div>
-      <button
-        v-for="e in elements"
-        :key="e"
-        :style="parameter"
-        @click="onClick(e)"
-        data-cy="button"
-      >
-        {{ e }}
-      </button>
+      <aside class="aside">
+        <ul>
+          <li>This computer deals with positive & negative values</li>
+          <li>
+            You can do simple operation (+, -, *, /, =) or cumul many operations
+          </li>
+          <li>Only integer values are allowed</li>
+        </ul>
+      </aside>
     </div>
   </div>
 </template>
@@ -88,4 +101,9 @@ function onClick(e: any) {
   background-color: #333;
   color: white;
 }
+.aside {
+  position: absolute;
+  top: -300px;
+  right: -550px;
+}
 </style>