Modern Application Development II End Term: 31 August 2025, Set QDB1 (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");

1<div id="app"></div>
2<script src="script.js"></script>

1new Vue({
2    el: '#app',
3    template: `<div>
4                    Process: {{process}}<br>
5                    Count: {{count}}
6               </div>`,
7    data: {
8        process: "Start",
9        count: 5,
10    },
11    beforeCreate() {
12        this.process = this.process + " -> Init"
13        this.count = this.count + 2
14    },
15    created() {
16        this.process = this.process + " -> Ready"
17        this.count = this.count * 2
18    },
19    beforeMount() {
20        this.process = this.process + " -> Render"
21        this.count = this.count - 3
22    },
23
24    mounted() {
25        this.process = this.process + " -> Complete"
26        this.count = this.count / 2
27    },
28})

1<script>
2    for (let j = 1; j <= 4; j++) {
3        setTimeout(() => console.log(j * 2), j * 1000);
4    }
5</script>

1const routes = [
2  { path: '/admin', component: Admin },
3  { path: '/unauthorized', component: Unauthorized },
4];
5
6const router = new VueRouter({ routes });
7
8new Vue({
9  el: '#app',
10  data: {
11    userRole: 'user'
12  },
13  mounted() {
14    if (this.userRole !== 'admin') {
15      this.$router.push('/unauthorized');
16    } else {
17      this.$router.push('/admin');
18    }
19  },
20  router
21});

1class Vehicle {
2    constructor(brand) {
3        this.brand = brand;
4    }
5    start() {
6        console.log(`${this.brand} vehicle is starting`);
7    }
8    getInfo() {
9        return `This is a ${this.brand} vehicle`;
10    }
11}
12
13class Car extends Vehicle {
14    constructor(brand, model) {
15        super(brand);
16        this.model = model;
17    }
18    start() {
19        console.log(`${this.brand} ${this.model} engine started`);
20    }
21}
22const myCar = new Car('Toyota', 'Camry');
23myCar.start();
24console.log(myCar.getInfo());
25console.log(myCar instanceof Car);
26console.log(myCar instanceof Vehicle);
27console.log(Car.prototype.__proto__ === Vehicle.prototype);

1<template>
2  <div>
3    <h2>Selected Tasks</h2>
4    <task-list :tasks="tasks" @task-selected="addToSelection" />
5    <p>Total Selected: {{ selectedTasks.length }}</p>
6    <ul>
7      <li v-for="task in selectedTasks" :key="task.id">{{ task.name }}</li>
8    </ul>
9  </div>
10</template>
11
12<script>
13import TaskList from './TaskList.vue';
14
15export default {
16  components: { TaskList },
17  data() {
18    return {
19      tasks: [
20        { id: 1, name: 'Design UI' },
21        { id: 2, name: 'Write Backend' },
22        { id: 3, name: 'Write Tests' }
23      ],
24      selectedTasks: []
25    };
26
27  },
28  methods: {
29    addToSelection(task) {
30      const exists = this.selectedTasks.some(t => t.id === task.id);
31      if (!exists) {
32        this.selectedTasks.push(task);
33      }
34    }
35  }
36};
37</script>

1<template>
2  <div>
3    <h3>All Tasks</h3>
4    <ul>
5      <li v-for="task in tasks" :key="task.id">
6        {{ task.name }}
7        <button @click="select(task)">Select</button>
8      </li>
9    </ul>
10  </div>
11</template>
12
13<script>
14export default {
15  props: ['tasks'],
16  methods: {
17    select(task) {
18      this.$emit('task-selected', task);
19    }
20  }
21};
22</script>

1<template>
2  <div>
3    <h2>Selected Tasks</h2>
4    <task-list :tasks="tasks" @task-selected="addToSelection" />
5    <p>Total Selected: {{ selectedTasks.length }}</p>
6    <ul>
7      <li v-for="task in selectedTasks" :key="task.id">{{ task.name }}</li>
8    </ul>
9  </div>
10</template>
11
12<script>
13import TaskList from './TaskList.vue';
14
15export default {
16  components: { TaskList },
17  data() {
18    return {
19      tasks: [
20        { id: 1, name: 'Design UI' },
21        { id: 2, name: 'Write Backend' },
22        { id: 3, name: 'Write Tests' }
23      ],
24      selectedTasks: []
25    };
26
27  },
28  methods: {
29    addToSelection(task) {
30      const exists = this.selectedTasks.some(t => t.id === task.id);
31      if (!exists) {
32        this.selectedTasks.push(task);
33      }
34    }
35  }
36};
37</script>

1<template>
2  <div>
3    <h3>All Tasks</h3>
4    <ul>
5      <li v-for="task in tasks" :key="task.id">
6        {{ task.name }}
7        <button @click="select(task)">Select</button>
8      </li>
9    </ul>
10  </div>
11</template>
12
13<script>
14export default {
15  props: ['tasks'],
16  methods: {
17    select(task) {
18      this.$emit('task-selected', task);
19    }
20  }
21};
22</script>

1<template>
2  <div>
3    <h2>Selected Tasks</h2>
4    <task-list :tasks="tasks" @task-selected="addToSelection" />
5    <p>Total Selected: {{ selectedTasks.length }}</p>
6    <ul>
7      <li v-for="task in selectedTasks" :key="task.id">{{ task.name }}</li>
8    </ul>
9  </div>
10</template>
11
12<script>
13import TaskList from './TaskList.vue';
14
15export default {
16  components: { TaskList },
17  data() {
18    return {
19      tasks: [
20        { id: 1, name: 'Design UI' },
21        { id: 2, name: 'Write Backend' },
22        { id: 3, name: 'Write Tests' }
23      ],
24      selectedTasks: []
25    };
26
27  },
28  methods: {
29    addToSelection(task) {
30      const exists = this.selectedTasks.some(t => t.id === task.id);
31      if (!exists) {
32        this.selectedTasks.push(task);
33      }
34    }
35  }
36};
37</script>

1<template>
2  <div>
3    <h3>All Tasks</h3>
4    <ul>
5      <li v-for="task in tasks" :key="task.id">
6        {{ task.name }}
7        <button @click="select(task)">Select</button>
8      </li>
9    </ul>
10  </div>
11</template>
12
13<script>
14export default {
15  props: ['tasks'],
16  methods: {
17    select(task) {
18      this.$emit('task-selected', task);
19    }
20  }
21};
22</script>

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);

1async function process() {
2    console.log("A");
3    const result = await Promise.resolve("Data");
4    console.log("B");
5    console.log(result);
6    return "Complete";
7}
8
9console.log("X");
10process().then(value => console.log(value));
11console.log("Y");
12setTimeout(() => console.log("Z"), 0);
13console.log("W");

1Promise.resolve(15)
2  .then(x => {
3    console.log("Step 1:", x);
4    return x * 2;
5  })
6  .then(x => {
7    console.log("Step 2:", x);
8    throw new Error("Oops!");
9  })
10  .catch(err => {
11    console.log("Caught:", err.message);
12    return 100;
13  })
14  .then(x => {
15    console.log("Step 3:", x);
16  });

1from flask import Flask
2from flask_caching import Cache
3import time
4
5app = Flask(__name__)
6app.config['CACHE_TYPE'] = 'SimpleCache'
7app.config['CACHE_DEFAULT_TIMEOUT'] = 300
8
9cache = Cache(app)
10
11@cache.memoize(timeout=300)
12def expensive_calculation(user_id):
13    time.sleep(5)
14    return f"Result for user {user_id}"
15
16@app.route('/api/data/<int:user_id>')
17def get_data(user_id):
18    return expensive_calculation(user_id)

1new Vue({
2      el: '#app',
3      data: {
4        items: ['apple', 'banana']
5      },
6      beforeCreate() {
7        console.log('Before:', this.items);
8        this.items.push('orange');
9      },
10      created() {
11        console.log('Created:', this.items);
12        this.items.push('grape');
13      },
14      template: '<div v-for="item in items">{{ item }}</div>'
15    });

1async function fetchUserData(userId) {
2    try {
3        const response = await fetch(`/api/user/${userId}`);
4        if (!response.ok) {
5            throw new Error(`HTTP ${response.status}`);
6        }
7        const data = await response.json();
8        return data;
9    } catch (error) {
10        console.log('Error:', error.message);
11        return null;
12    }
13}
14
15fetchUserData(123).then(result => console.log('Result:', result));

1localStorage.setItem('user', 'Alice');
2localStorage.setItem('theme', 'dark');
3sessionStorage.setItem('user', 'Bob');
4sessionStorage.setItem('cart', 'item1,item2');
5
6console.log("A:", localStorage.getItem('user'));
7console.log("B:", sessionStorage.getItem('user'));
8
9localStorage.setItem('user', JSON.stringify({name: 'Charlie', age: 25}));
10sessionStorage.removeItem('user');
11
12console.log("C:", localStorage.getItem('user'));
13console.log("D:", sessionStorage.getItem('user'));
14console.log("E:", sessionStorage.getItem('cart'));
15
16console.log("F:", localStorage.length);
17console.log("G:", sessionStorage.length);
18
19localStorage.removeItem('theme');
20sessionStorage.clear();
21
22console.log("H:", localStorage.length);
23console.log("I:", sessionStorage.length);

1class LocalDevelopmentConfig(Config):
2    SQLALCHEMY_DATABASE_URI = "sqlite:///securedb.sqlite3"
3    DEBUG = True
4    SECRET_KEY = "this-is-a-secret-key"
5    SECURITY_PASSWORD_HASH = "bcrypt"
6    SECURITY_PASSWORD_SALT = "this-is-a-salt-key"
7    WTF_CSRF_ENABLED = False
8    SECURITY_TOKEN_AUTHENTICATION_HEADER = "Authentication-Token"

1@app.route('/api/public')
2def public_endpoint():
3    return jsonify({'message': 'Public access', 'status': 'success'})
4
5@app.route('/api/protected')
6@auth_required('token')
7def protected_endpoint():
8    return jsonify({'message': 'Protected access', 'status': 'authenticated'})
9
10@app.route('/api/admin')
11@auth_required('token')
12@roles_required('admin')
13def admin_endpoint():
14    return jsonify({'message': 'Admin access', 'status': 'authorized'})