Modern Application Development II Quiz 2: 23 November 2025 (September 2025 term)

1<div id="app">
2    <card-component>
3        <template #title>
4            Welcome Message
5        </template>
6        <p>Main card content here</p>
7        <template #default>
8            Default slot content
9        </template>
10        <template #actions>
11            <button>Click Me</button>
12        </template>
13    </card-component>
14</div>
15<script src="app.js"></script>

1Vue.component("cardComponent", {
2    template: `<div class="card">
3                    <h2>
4                        <slot name="title"></slot>
5                    </h2>
6                    <div class="content">
7                        <slot></slot>
8                    </div>
9                    <div class="footer">
10                        <slot name="footer"></slot>
11                    </div>
12                </div>`,
13})
14
15const app = new Vue({
16    el: "#app",
17})

1new Promise((resolve, reject) => {
2    if (10 > 5) reject(15)
3    else resolve(25)
4})
5.then(d => {
6    console.log("Success handler", d);
7    return d * 2;
8}, d => {
9    console.log("Error handler", d);
10    throw new Error(30);
11})
12.catch(e => {
13    console.log("Catch block", e.message);
14    return e.message / 2;
15})
16.then(d => {
17    console.log("Next then", d);
18    return d + 10;
19})
20.finally(d => {
21    console.log("Finally block", d);
22    return d * 100;
23})
24.then(d => {
25    console.log("Final then", d);
26    return d * 3;
27})

1<template>
2  <div>
3    <p>{{ counter }}</p>
4    <button @click="incrementCounter">Increment</button>
5  </div>
6</template>

1<script>
2export default {
3  data() {
4    return {
5      counter: 0
6    };
7  },
8  methods: {
9    incrementCounter() {
10      this.counter = this.counter + 2;
11      this.counter = this.counter * 2;
12      this.counter = this.counter - 5;
13    }
14  }
15};
16</script>

1const User = {
2  template: `<div><h1>User Profile</h1><router-view></router-view></div>`
3};
4
5const UserPosts = {
6  template: `<div><h2>Posts by {{ $route.params.username }}</h2></div>`
7};
8
9const UserSettings = {
10  template: `<div><h2>Settings</h2></div>`
11};
12
13const routes = [
14  {
15    path: '/user/:username',
16    component: User,
17    children: [
18      {
19        path: 'posts',
20        component: UserPosts
21      },
22      {
23        path: 'settings',
24        component: UserSettings
25      }
26    ]
27  }
28];
29
30const router = new VueRouter({
31  routes
32});

1<div id="app">
2  <input v-model="username">
3  <p>Hello, {{ username }}</p>
4</div>
5
6<script>
7var app = new Vue({
8  el: "#app",
9  data: {
10    username: "Guest"
11  }
12});
13</script>

1<div id="app">
2  <ul>
3    <li v-for="user in users">{{ user.name }}</li>
4  </ul>
5  <button @click="fetchUsers">Load Users</button>
6</div>
7
8<script>
9new Vue({
10  el: "#app",
11  data: { users: [] },
12  methods: {
13    fetchUsers() {
14      fetch("https://jsonplaceholder.typicode.com/users")
15        .then(res => res.json())
16        .then(data => { this.users = data; });
17    }
18  }
19});
20</script>

1methods: {
2  async submit() {
3    const response = await fetch('/api/users', {
4      method: 'POST',
5      headers: { 'Content-Type': 'application/json' },
6      body: JSON.stringify({ username: 'Asha' })
7    });
8
9    const data = response.json();
10    localStorage.setItem('userId', data.id);
11  }
12}

1<template>
2  <div>
3    <p v-if="loading">Loading...</p>
4    <p v-else>{{ data }}</p>
5  </div>
6</template>
7
8<script>
9export default {
10  data() {
11    return { data: null, loading: true }
12  },
13  async mounted() {
14    this.data = await Promise.resolve('Hello MAD2');
15    this.loading = false;
16  }
17}
18</script>