Modern Application Development II Quiz 2: 16 March 2025 (January 2025 term)

1function testScope() {
2    if (true) {
3        var x = 10;
4        let y = 20;
5    }
6    console.log(x);
7    console.log(y);
8}
9testScope();

1let count = 0;
2
3async function increment() {
4    const incrementCount = () => {
5        return new Promise(resolve => {
6            setTimeout(() => {
7                count++;
8                resolve(count);
9            }, 100);
10        });
11    };
12
13    const results = await Promise.all([incrementCount(), incrementCount(),
14incrementCount()]);
15    console.log(results);
16}
17
18increment();
19console.log("Start");

1const Product = {
2  template: `<div><h1>Product {{ $route.params.id }}</h1></div>`
3};
4
5const ProductReviews = {
6  template: `<div><h2>Reviews for Product</h2></div>`
7};
8
9const routes = [
10  {
11    path: '/products/:id',
12    component: Product,
13    children: [
14      {
15        path: 'reviews',
16        component: ProductReviews
17      }
18    ]
19  }
20];
21
22const router = new VueRouter({
23  routes
24});

1const store = new Vuex.Store({
2  state: {
3    cart: [
4      { id: 1, name: 'Item 1', price: 100 },
5      { id: 2, name: 'Item 2', price: 200 }
6    ]
7  },
8  getters: {
9    totalPrice(state) {
10      return state.cart.reduce((total, item) => total + item.price, 0);
11    }
12  },
13  mutations: {
14    addToCart(state, item) {
15      state.cart.push(item);
16    }
17  },
18  actions: {
19    addItemToCart({ commit }, item) {
20      commit('addToCart', item);
21    }
22  }
23});

1async function fetchData() {
2    try {
3        const response = await fetch('https://api.example.com/data');
4        if (!response.ok) throw new Error('HTTP error');
5        const data = await response.json();
6        return data;
7    } catch (error) {
8        if (error.name === 'TypeError') {
9            return { status: 'network error' };
10        }
11        return { status: 'http error' };
12    }
13}

1function translateToEmoji(msg, dictionary, cb) {
2    const translated = msg
3        .split(' ')
4        .map(word => dictionary[word] || word);
5    cb(translated.join(' '));
6}
7
8translateToEmoji('i love code',
9    { heart: '🤎', code: '💻' },
10    result => console.log(result));

1<div id="app">
2        <button @click="addLike">Like</button>
3        <div>{{likes}}</div>
4    </div>
5    <script>
6        new Vue({
7            el: '#app',
8            data: () => ({
9                likes: 0,
10                lastClick: 0
11            }),
12            methods: {
13                addLike() {
14                    if (Date.now() - this.lastClick < 500) {
15                        this.likes += 2;
16                    } else {
17                        this.likes += 1;
18                    }
19                    this.lastClick = Date.now();
20                }
21
22            }
23        })
24    </script>

1<div id="app">
2        <async-component ref="child"></async-component>
3        <button @click="updateParent">Update Parent</button>
4    </div>
5
6    <script>
7        Vue.component('async-component', {
8            template: '<div>{{message}}</div>',
9            data() {
10                return {
11                    message: 'Initial'
12                }
13            },
14            mounted() {
15                setTimeout(() => {
16                    this.message = 'Updated in child'
17                }, 0)
18            }
19        })
20
21        new Vue({
22            el: '#app',
23            mounted() {
24                this.$refs.child.message = 'Updated in parent'
25            },
26            methods: {
27                updateParent() {
28                    this.$refs.child.message = 'Button clicked'
29                }
30            }
31        })
32    </script>

1const promiseChain = new Promise((resolve, reject) => {
2        console.log('Step 1');
3        resolve(1);
4    })
5    .then((value) => {
6        console.log('Step 2:', value);
7        return value + 1;
8    })
9    .then((value) => {
10        console.log('Step 3:', value);
11        throw new Error('Error in Step 3');
12    })
13    .then((value) => {
14        console.log('Step 4:', value);
15        return value * 2;
16    })
17    .catch((err) => {
18        console.log('Caught:', err.message);
19        return 5;
20    })
21    .then((value) => {
22        console.log('Step 5:', value);
23        return value + 1;
24    });
25
26console.log('End of Code');

1const UserProfile = {
2  template: `<div><h2>User Profile</h2><p>{{ user.name }}</p></div>`,
3  data() {
4    return {
5      user: {}
6    };
7  },
8  created() {
9    this.fetchUserData();
10  },
11  methods: {
12    async fetchUserData() {
13      const userId = this.$route.query.userId;
14      const response = await fetch(`/api/users/${userId}`);
15      this.user = await response.json();
16    }
17  }
18};
19
20const routes = [
21  { path: '/user', component: UserProfile }
22];
23
24const router = new VueRouter({
25  routes
26});

1<template>
2  <div>
3    <button @click="goToPage('Home')">Go to Home</button>
4    <button @click="goToPage('About')">Go to About</button>
5    <button @click="goToPage('Contact')">Go to Contact</button>
6
7    <div v-if="visitedPages.length">
8      <h3>Visited Pages:</h3>
9      <ul>
10        <li v-for="(page, index) in visitedPages" :key="index">{{ page
11}}</li>
12      </ul>
13    </div>
14  </div>
15</template>
16
17<script>
18export default {
19  data() {
20    return {
21      visitedPages: []
22    };
23  },
24  mounted() {
25    const storedPages = JSON.parse(sessionStorage.getItem('visitedPages'))
26|| [];
27    this.visitedPages = storedPages;
28  },
29  methods: {
30    goToPage(page) {
31      this.visitedPages.push(page);
32      sessionStorage.setItem('visitedPages',
33JSON.stringify(this.visitedPages));
34      this.$router.push(`/${page.toLowerCase()}`);
35    }
36  }
37};
38</script>

1<template>
2  <div>
3    <input v-model="name" placeholder="Enter name">
4    <input v-model="email" placeholder="Enter email">
5    <button @click="submitForm">Submit</button>
6  </div>
7</template>
8
9<script>
10export default {
11  data() {
12    return {
13      name: '',
14      email: ''
15    };
16  },
17  mounted() {
18    if (localStorage.getItem('formData')) {
19      const savedData = JSON.parse(localStorage.getItem('formData'));
20      this.name = savedData.name;
21      this.email = savedData.email;
22    }
23  },
24  watch: {
25    name(newVal) {
26      localStorage.setItem('formData', JSON.stringify({ name: newVal, email:
27localStorage.email }));
28    },
29    email(newVal) {
30      localStorage.setItem('formData', JSON.stringify({ name: localStorage.name,
31email: newVal }));
32    }
33  },
34  methods: {
35    submitForm() {
36      localStorage.removeItem('formData');
37      this.name = '';
38      this.email = '';
39    }
40  }
41};
42</script>