Modern Application Development II End Term: 31 August 2025, Set QIB3 (May 2025 term)

1async function test() {
2  console.log("P");
3  await Promise.resolve();
4  console.log("Q");
5}
6console.log("R");
7test();
8console.log("S");

1const user = {
2    name: 'Alice',
3    age: 25,
4    city: 'Boston',
5    country: 'USA'
6};
7
8const { name, city, ...otherInfo } = user;
9const newUser = { name, location: city, ...otherInfo };
10
11console.log(name);
12console.log(otherInfo);
13console.log(newUser);

1new Promise((resolve, reject) => {
2    const score = 0.45;
3    if (score >= 0.5) {
4        resolve(score);
5    } else {
6        reject(new Error("Score too low"));
7    }
8})
9.then(data => {
10    console.log("Stage A:", data);
11    return data * 10;
12})
13.catch(error => {
14    console.log("Stage B:", error.message);
15    return 3;
16})
17.then(data => {
18    console.log("Stage C:", data);
19    if (data < 5) {
20        throw new Error("Value below threshold");
21    }
22    return data + 2;
23})
24.then(data => {
25    console.log("Stage D:", data);
26    return data / 2;
27})
28.catch(error => {
29    console.log("Stage E:", error.message);
30    if (error.message === "Value below threshold") {
31        return "Recovered";
32    }
33    throw error;
34})
35.then(data => {
36    console.log("Stage F:", data);
37    if (data === "Recovered") {
38        return 10;
39    }
40    return data * 4;
41})
42.finally(() => {
43    console.log("Stage G: Cleanup completed");
44});

1<div id="app1">{{ message }}</div>
2<div id="app2">{{ message }}</div>
3<script src="app.js" />

1new Vue({
2  el: '#app1',
3  data: { message: 'Hello from App 1' }
4});
5
6new Vue({
7  el: '#app2',
8  data: { message: 'Hello from App 2' }
9});

1localStorage.setItem('score', '10');
2sessionStorage.setItem('multiplier', '3');
3
4for (let i = 0; i < 2; i++) {
5    let score = localStorage.getItem('score');
6    let multiplier = sessionStorage.getItem('multiplier');
7
8    score = score + 5;
9    multiplier = multiplier * 2;
10
11    localStorage.setItem('score', score);
12    sessionStorage.setItem('multiplier', multiplier);
13}
14
15console.log(localStorage.getItem('score'));
16console.log(sessionStorage.getItem('multiplier'));

1<template>
2  <div>
3    <button @click="toggleShowCompleted">
4      {{ showCompleted ? 'Hide' : 'Show' }} Completed
5    </button>
6
7    <ul>
8      <li v-for="task in filteredTasks" :key="task.id">
9        <span>{{ task.name }} - {{ task.status }}</span>
10        <button @click="markComplete(task.id)">Mark Complete</button>
11      </li>
12    </ul>
13
14    <p>Total Completed: {{ completedCount }}</p>
15  </div>
16
17</template>
18
19<script>
20export default {
21  data() {
22    return {
23      showCompleted: false,
24      tasks: [
25        { id: 1, name: 'Learn Vue', status: 'incomplete' },
26        { id: 2, name: 'Build Project', status: 'incomplete' },
27        { id: 3, name: 'Test App', status: 'complete' }
28      ]
29    }
30;

1  },
2  computed: {
3    filteredTasks() {
4      if (this.showCompleted) return this.tasks;
5      return this.tasks.filter(function (task) {
6        return task.status !== 'complete';
7      });
8    },
9    completedCount() {
10      return this.tasks.reduce(function (acc, task) {
11        return acc + (task.status === 'complete' ? 1 : 0);
12      }, 0);
13    }
14  },
15  methods: {
16    markComplete(id) {
17      const task = this.tasks.find(function (t) {
18        return t.id === id;
19      });
20      if (task && task.status === 'incomplete') {
21        task.status = 'complete';
22      }
23    },
24    toggleShowCompleted() {
25      this.showCompleted = !this.showCompleted;
26    }
27  }
28};
29</script>

1<template>
2  <div>
3    <button @click="toggleShowCompleted">
4      {{ showCompleted ? 'Hide' : 'Show' }} Completed
5    </button>
6
7    <ul>
8      <li v-for="task in filteredTasks" :key="task.id">
9        <span>{{ task.name }} - {{ task.status }}</span>
10        <button @click="markComplete(task.id)">Mark Complete</button>
11      </li>
12    </ul>
13
14    <p>Total Completed: {{ completedCount }}</p>
15  </div>
16
17</template>
18
19<script>
20export default {
21  data() {
22    return {
23      showCompleted: false,
24      tasks: [
25        { id: 1, name: 'Learn Vue', status: 'incomplete' },
26        { id: 2, name: 'Build Project', status: 'incomplete' },
27        { id: 3, name: 'Test App', status: 'complete' }
28      ]
29    }
30;

1  },
2  computed: {
3    filteredTasks() {
4      if (this.showCompleted) return this.tasks;
5      return this.tasks.filter(function (task) {
6        return task.status !== 'complete';
7      });
8    },
9    completedCount() {
10      return this.tasks.reduce(function (acc, task) {
11        return acc + (task.status === 'complete' ? 1 : 0);
12      }, 0);
13    }
14  },
15  methods: {
16    markComplete(id) {
17      const task = this.tasks.find(function (t) {
18        return t.id === id;
19      });
20      if (task && task.status === 'incomplete') {
21        task.status = 'complete';
22      }
23    },
24    toggleShowCompleted() {
25      this.showCompleted = !this.showCompleted;
26    }
27  }
28};
29</script>

1<template>
2  <div>
3    <button @click="toggleShowCompleted">
4      {{ showCompleted ? 'Hide' : 'Show' }} Completed
5    </button>
6
7    <ul>
8      <li v-for="task in filteredTasks" :key="task.id">
9        <span>{{ task.name }} - {{ task.status }}</span>
10        <button @click="markComplete(task.id)">Mark Complete</button>
11      </li>
12    </ul>
13
14    <p>Total Completed: {{ completedCount }}</p>
15  </div>
16
17</template>
18
19<script>
20export default {
21  data() {
22    return {
23      showCompleted: false,
24      tasks: [
25        { id: 1, name: 'Learn Vue', status: 'incomplete' },
26        { id: 2, name: 'Build Project', status: 'incomplete' },
27        { id: 3, name: 'Test App', status: 'complete' }
28      ]
29    }
30;

1  },
2  computed: {
3    filteredTasks() {
4      if (this.showCompleted) return this.tasks;
5      return this.tasks.filter(function (task) {
6        return task.status !== 'complete';
7      });
8    },
9    completedCount() {
10      return this.tasks.reduce(function (acc, task) {
11        return acc + (task.status === 'complete' ? 1 : 0);
12      }, 0);
13    }
14  },
15  methods: {
16    markComplete(id) {
17      const task = this.tasks.find(function (t) {
18        return t.id === id;
19      });
20      if (task && task.status === 'incomplete') {
21        task.status = 'complete';
22      }
23    },
24    toggleShowCompleted() {
25      this.showCompleted = !this.showCompleted;
26    }
27  }
28};
29</script>

1const globalVar = 100;
2var value = 200;
3
4const calculator = {
5    value: 50,
6
7    compute: function() {
8        const innerObj = {
9            value: 25,
10
11            regularMethod: function() {
12                return this.value;
13            },
14
15            arrowMethod: () => {
16                return this.value;
17            },
18
19            mixedMethod: function() {
20                const arrowInside = () => this.value;
21                return arrowInside();
22            }
23        };
24        return {
25            regular: innerObj.regularMethod(),
26            arrow: innerObj.arrowMethod(),
27            mixed: innerObj.mixedMethod()
28        };
29    }
30};
31
32const result = calculator.compute();
33console.log(result.regular);
34console.log(result.arrow);
35console.log(result.mixed);

1const TodoApp = {
2  template: `
3    <div>
4      <input v-model="newTodo" @keyup.enter="addTodo" />
5      <ul>
6        <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
7      </ul>
8    </div>
9  `,
10  data() {
11    return {
12      newTodo: '',
13      todos: []
14    }
15  },
16  methods: {
17    addTodo() {
18      if (this.newTodo) {
19        this.todos.push({ id: Date.now(), text: this.newTodo });
20        this.newTodo = '';
21      }
22    }
23  }
24}

1const routes = [
2  { path: '/user/:id/profile', component: UserProfile },
3  { path: '/user/:id', component: User },
4  { path: '*', component: NotFound },
5  { path: '/user/:id/settings', component: UserSettings },
6];

1from flask import Flask
2from flask_cors import CORS
3
4app = Flask(__name__)
5CORS(app, resources={r"/api/*": {"origins": "http://localhost:3000"}})
6
7@app.route('/api/data')
8def data():
9    return {"msg": "Success"}

1fetch("http://localhost:5000/api/data")
2  .then(res => res.json())
3  .then(data => console.log(data));

1function createCounter() {
2    let count = 0;
3    return function() {
4        count++;
5        return count;
6    };
7}
8
9const counter1 = createCounter();
10const counter2 = createCounter();
11
12console.log(counter1());
13console.log(counter1());
14console.log(counter2());

1Vue.component('data-provider', {
2    template: `
3        <div class="provider">
4            <slot name="header" :user="currentUser" :loading="isLoading"></slot>
5            <slot name="content" :items="filteredItems" :count="itemCount"></slot>
6            <slot :fallback="defaultMessage" :error="errorState"></slot>
7        </div>
8    `,
9    data() {
10        return {
11            currentUser: { name: 'John', role: 'admin' },
12            isLoading: false,
13            filteredItems: ['item1', 'item2', 'item3'],
14            itemCount: 3,
15            defaultMessage: 'No data available',
16            errorState: null
17        }
18    }
19});
20
21Vue.component('parent-component', {
22    template: `
23        <data-provider>
24            <template v-slot:header="{ user, loading }">
25                <h1 v-if="!loading">Welcome {{ user.name }}</h1>
26                <span v-else>Loading...</span>
27            </template>
28            <template v-slot:content="slotProps">
29                <ul>
30                    <li v-for="item in slotProps.items" :key="item">
31                        {{ item }} ({{ slotProps.count }} total)
32                    </li>
33                </ul>
34            </template>
35
36
37            <template v-slot:default="defaultProps">
38                <p>{{ defaultProps.fallback }}</p>
39            </template>
40        </data-provider>
41    `
42});

1<div id="app">
2    <parent-component></parent-component>
3</div>

1const routes = [
2  {
3    path: '/',
4    name: 'Home',
5    component: HomeView
6  },
7  {
8    path: '/user/:id',
9    name: 'UserProfile',
10    component: UserProfile
11  },
12  {
13    path: '/product/:category/:id',
14    name: 'ProductDetail',
15    component: ProductDetail
16  }
17];

1<template>
2  <div>
3    <button @click="goToUser">View User</button>
4    <button @click="goToProduct">View Product</button>
5    <router-link :to="{ name: 'Home' }">Home</router-link>
6  </div>
7</template>
8
9<script>
10export default {
11  methods: {
12    goToUser() {
13      this.$router.push({ name: 'UserProfile', params: { id: 123 } });
14    },
15    goToProduct() {
16      this.$router.push({ name: 'ProductDetail',
17                          params: { category: 'electronics', id: 456}
18                        });
19    },
20    navigateOne() {
21      this.$router.push({ name: 'UserProfile', params: { id: 555 },
22                          query: { tab: 'settings'}
23                        });
24    },
25    navigateTwo() {
26      this.$router.replace({ name: 'Home' });
27    },
28    goBack() {
29      this.$router.go(-1);
30    }
31}
32</script>

1function simulateTasks() {
2  const prashant = new Promise(resolve => setTimeout(() =>
3resolve("Prashant"), 3000));
4  const nikita = new Promise(resolve => setTimeout(() =>
5resolve("Nikita"), 2000));
6  const mayur = new Promise(resolve => setTimeout(() =>
7resolve("Mayur"), 4000));
8
9  const team = Promise.all([prashant, nikita]).then(() =>
10"Team");
11
12  Promise.race([team, mayur]).then(winner => {
13    console.log("Winner is:", winner);
14  });
15}

1function simulateTasks() {
2  const prashant = new Promise(resolve => setTimeout(() =>
3resolve("Prashant"), 3000));
4  const nikita = new Promise(resolve => setTimeout(() =>
5resolve("Nikita"), 2000));
6  const mayur = new Promise(resolve => setTimeout(() =>
7resolve("Mayur"), 4000));
8
9  const team = Promise.all([prashant, nikita]).then(() =>
10"Team");
11
12  Promise.race([team, mayur]).then(winner => {
13    console.log("Winner is:", winner);
14  });
15}

1async function playGame() {
2  const start = Date.now();
3
4  const prashantPromise = new Promise(resolve => setTimeout(resolve, 3000));
5  const nikitaPromise = new Promise(resolve => setTimeout(resolve, 2000));
6  const mayurPromise = new Promise(resolve => setTimeout(resolve, 2000));
7
8  await Promise.all([prashantPromise, nikitaPromise]);
9  const teamTime = Date.now() - start;
10
11  await mayurPromise;
12  const mayurTime = Date.now() - start;
13
14  const winner = (teamTime < mayurTime) ? "Team" : "Mayur";
15  console.log(`Winner is: ${winner}`);
16}