Merge pull request #1 from borj4/master

options api

src/App.vue

@@ -1,31 +1,50 @@
-<script setup>
-
-import {ref} from 'vue'
-import router from './routes'
-
-let currentMode = ref(1);
-
-function setCurrentMode(mode) {
-  this.currentMode = mode;
-}
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "VueJS Challenges",
+  data() {
+    return {
+      currentMode: 1,
+    };
+  },
+  methods: {
+    setCurrentMode(mode) {
+      this.currentMode = mode;
+    },
+  },
+});
 </script>
 
 <template>
-  <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125"/>
-  <div class="button-bar">Choose what you want to do:
-    <router-link to="/directive-sandbox"><button>Directive exercises (sandbox)</button></router-link>
-    <router-link to="/task-exercise"><button>Task exercise</button></router-link>
-    <router-link to="/props"><button >Using props</button></router-link>
-    <router-link to="/events"><button >Using events</button></router-link>
-    <router-link to="/fetching-data"><button >Fetching data</button></router-link>
+  <img
+    alt="Vue logo"
+    class="logo"
+    src="./assets/logo.svg"
+    width="125"
+    height="125"
+  />
+  <div class="button-bar">
+    Choose what you want to do:
+    <router-link to="/directive-sandbox"
+      ><button>Directive exercises (sandbox)</button></router-link
+    >
+    <router-link to="/task-exercise"
+      ><button>Task exercise</button></router-link
+    >
+    <router-link to="/props"><button>Using props</button></router-link>
+    <router-link to="/events"><button>Using events</button></router-link>
+    <router-link to="/fetching-data"
+      ><button>Fetching data</button></router-link
+    >
   </div>
   <div>
     <router-view></router-view>
   </div>
 </template>
 
 <style>
-@import './assets/base.css';
+@import "./assets/base.css";
 
 #app {
   max-width: 1280px;

src/components/DirectiveSandbox.vue

@@ -1,53 +1,74 @@
-<script setup>
-import { ref } from 'vue'
-
-/** EXERCISE 1 VARIABLES **/
-const msg = "I am printing a text from the javascript.";
-
-/** EXERCISE 2 VARIABLES **/
-let booleanForExercise2 = true;
-
-/** EXERCISE 3 VARIABLES **/
-let numberForExercise3 = 5;
-
-/** EXERCISE 4 VARIABLES **/
-let arrayForExercise4 = [
-      {name: "Full-Stack developer", description: "Developing in both front and back sides"},
-      {name: "Front-end developer", description: "Specialized on developing in front side"},
-      {name: "Back-end developer", description: "Specialized on developing in back side"},
-      {name: "Data scientist", description: "Specialized on data treatment"},
-    ];
-
-/** EXERCISE 5 VARIABLES **/
-/**
- * Variable for exercise 5. Notice that we are using 'ref' function, that allows
- * to create a reactive variable, so when the value changes, is automatically refreshed
- * and reflext the changes in template
- * @type {Ref<UnwrapRef<{lastName: string, name: string, yearOfBirth: number}>>}
- */
-let person = ref({
-  name: "David",
-  lastName: "Miguel de la Fuente",
-  yearOfBirth: 1989
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "Directive Sandbox",
+  data() {
+    return {
+      /** EXERCISE 1 VARIABLES **/
+      msg: "I am printing a text from the javascript.",
+      /** EXERCISE 2 VARIABLES **/
+      booleanForExercise2: true,
+      /** EXERCISE 3 VARIABLES **/
+      numberForExercise3: 5,
+      /** EXERCISE 4 VARIABLES **/
+      arrayForExercise4: [
+        {
+          name: "Full-Stack developer",
+          description: "Developing in both front and back sides",
+        },
+        {
+          name: "Front-end developer",
+          description: "Specialized on developing in front side",
+        },
+        {
+          name: "Back-end developer",
+          description: "Specialized on developing in back side",
+        },
+        {
+          name: "Data scientist",
+          description: "Specialized on data treatment",
+        },
+      ],
+      /** EXERCISE 5 VARIABLES **/
+      person: {
+        name: "David",
+        lastName: "Miguel de la Fuente",
+        yearOfBirth: 1989,
+      },
+      /** EXERCISE 6 VARIABLES **/
+      counter: 0,
+    };
+  },
+  methods: {
+    setCurrentMode(mode) {
+      this.currentMode = mode;
+    },
+    incrementCounter() {
+      return ++this.counter;
+    },
+  },
 });
-
-/** EXERCISE 6 VARIABLES **/
-let counter = ref(0);
-function incrementCounter(){
-  return ++this.counter;
-}
-
 </script>
 
 <template>
   <div>
     <h1>Directives in Vue</h1>
   </div>
   <div>
-    <p>Directives are reusable functionalities that you can bind to a component for many reasons. Also, you can
-      define custom ones, but this is not the point right now. There are several directives that is useful
-      to know that allow us to build enriched applications full of interactions in not so much time and easily.</p>
-    <p>Official documentation: <a href="https://vuejs.org/api/built-in-directives.html">Built-in directives</a></p>
+    <p>
+      Directives are reusable functionalities that you can bind to a component
+      for many reasons. Also, you can define custom ones, but this is not the
+      point right now. There are several directives that is useful to know that
+      allow us to build enriched applications full of interactions in not so
+      much time and easily.
+    </p>
+    <p>
+      Official documentation:
+      <a href="https://vuejs.org/api/built-in-directives.html"
+        >Built-in directives</a
+      >
+    </p>
   </div>
 
   <div class="exercise">
@@ -59,7 +80,7 @@ function incrementCounter(){
     <!-- Using v-text -->
     <p v-text="msg"></p>
     <!-- using interpolation -->
-    <p>{{msg}}</p>
+    <p>{{ msg }}</p>
   </div>
 
   <div class="exercise">
@@ -68,17 +89,27 @@ function incrementCounter(){
     We have a variable that is a boolean value, so we are going to use the v-if and v-else directives to load some
     HTML elements or others. Add he directive to the following HTML elements and modify manually the value
     of the variable to see the changes -->
-    <p v-if="booleanForExercise2">This paragraph should only be loaded if the value is "true"</p>
-    <p v-else>If the conditions doesn't meet, we are going to show this paragraph</p>
+    <p v-if="booleanForExercise2">
+      This paragraph should only be loaded if the value is "true"
+    </p>
+    <p v-else>
+      If the conditions doesn't meet, we are going to show this paragraph
+    </p>
   </div>
 
   <div class="exercise">
     <h3>Exercise 3: v-show directive</h3>
     <!-- TODO Exercise 3:
     We are going to show the following HTML elements only if the numeric value meets certain condition -->
-    <p v-show="numberForExercise3 > 0">The value at variable numberForExercise3 is positive</p>
-    <p v-show="numberForExercise3 < 0">The value at variable numberForExercise3 is negative</p>
-    <p v-show="numberForExercise3 == 0">The value at variable numberForExercise3 is 0</p>
+    <p v-show="numberForExercise3 > 0">
+      The value at variable numberForExercise3 is positive
+    </p>
+    <p v-show="numberForExercise3 < 0">
+      The value at variable numberForExercise3 is negative
+    </p>
+    <p v-show="numberForExercise3 == 0">
+      The value at variable numberForExercise3 is 0
+    </p>
   </div>
 
   <div class="exercise">
@@ -91,7 +122,9 @@ function incrementCounter(){
     You should use list (ordered or unordered) HTML elements.
     -->
     <ul>
-      <li v-for="item in arrayForExercise4">{{item.name}}: {{item.description}}</li>
+      <li v-for="item in arrayForExercise4">
+        {{ item.name }}: {{ item.description }}
+      </li>
     </ul>
   </div>
 
@@ -104,18 +137,38 @@ function incrementCounter(){
     javascript, so we can execute extra functions with this data or allow the user to insert values that
     can determine what kind os operations we have to execute.
     -->
-    <p>Here, you can edit the person information. Check that the information in the bottom paragraph is refreshing live.</p>
+    <p>
+      Here, you can edit the person information. Check that the information in
+      the bottom paragraph is refreshing live.
+    </p>
     <div>
-      Name: <input type="text" name="name" id="name" v-model="person.name">
+      Name: <input type="text" name="name" id="name" v-model="person.name" />
     </div>
     <div>
-      Last name: <input type="text" name="lastName" id="lastName" v-model="person.lastName">
+      Last name:
+      <input
+        type="text"
+        name="lastName"
+        id="lastName"
+        v-model="person.lastName"
+      />
     </div>
     <div>
-      Year of birth: <input type="number" name="yearOfBirth" id="yearOfBirth" v-model="person.yearOfBirth">
+      Year of birth:
+      <input
+        type="number"
+        name="yearOfBirth"
+        id="yearOfBirth"
+        v-model="person.yearOfBirth"
+      />
     </div>
     <div>
-      <p><b>{{ person.name }} {{ person.lastName }} was born in {{ person.yearOfBirth }}</b></p>
+      <p>
+        <b
+          >{{ person.name }} {{ person.lastName }} was born in
+          {{ person.yearOfBirth }}</b
+        >
+      </p>
     </div>
   </div>
 
@@ -128,8 +181,16 @@ function incrementCounter(){
     -->
     <p>Click the following button to increment counter:</p>
     <div>
-      <input type="button" name="incrementCounter" id="incrementCounter" value="Increment counter" @click="incrementCounter()">
-      <p>Button was clicked: <b>{{counter}} times</b></p>
+      <input
+        type="button"
+        name="incrementCounter"
+        id="incrementCounter"
+        value="Increment counter"
+        @click="incrementCounter()"
+      />
+      <p>
+        Button was clicked: <b>{{ counter }} times</b>
+      </p>
     </div>
   </div>
 </template>

src/components/EventsExercise.vue

@@ -1,14 +1,22 @@
-<script setup>
-import { ref } from 'vue'
-
-</script>
+<script></script>
 
 <template>
   <div>
     <h1>Events exercise</h1>
     <div>
-      <p>Official documentation: <a href="https://vuejs.org/guide/essentials/event-handling.html">Event handling</a></p>
-      <p>Official documentation: <a href="https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events">Custom Events</a></p>
+      <p>
+        Official documentation:
+        <a href="https://vuejs.org/guide/essentials/event-handling.html"
+          >Event handling</a
+        >
+      </p>
+      <p>
+        Official documentation:
+        <a
+          href="https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events"
+          >Custom Events</a
+        >
+      </p>
     </div>
   </div>
   <div>
@@ -25,14 +33,13 @@ import { ref } from 'vue'
       <div class="event-hub">This box are the HTML EVENT LISTENER HUB</div>
     </div>
   </div>
-
 </template>
 
 <style scoped>
 .event-hub {
   background-color: hsla(160, 100%, 37%, 1);
   width: 100%;
-  padding:2rem;
+  padding: 2rem;
   font-weight: bold;
   color: white;
   text-align: center;

src/components/FetchingDataExercise.vue

@@ -1,32 +1,28 @@
-<script setup>
-import { ref } from 'vue'
-
-</script>
+<script></script>
 
 <template>
   <div>
     <h1>Fetching data exercise</h1>
   </div>
   <div>
-    In this exercise, we will request to a REST API to retrieve some information and print in our template.
-    We have to request to the following mock API, which return a list of TO-DOs objects.
-    The URL to request is https://jsonplaceholder.typicode.com/todos
+    In this exercise, we will request to a REST API to retrieve some information
+    and print in our template. We have to request to the following mock API,
+    which return a list of TO-DOs objects. The URL to request is
+    https://jsonplaceholder.typicode.com/todos
   </div>
   <div>
     <table>
       <thead>
-      <tr>
-        <th>Title</th>
-        <th>Body</th>
-      </tr>
+        <tr>
+          <th>Title</th>
+          <th>Body</th>
+        </tr>
       </thead>
       <tbody>
-      <!-- Replace with the full list of TO-DOs -->
+        <!-- Replace with the full list of TO-DOs -->
       </tbody>
     </table>
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>