Modern Application Development II Quiz 2: 24 March 2024 (January 2024 term)

1var first = 30
2const obj1 = {
3    first: 50,
4    second: () => {
5        console.log("Value:", this.first);
6    }
7}
8
9const obj2 = {
10    first: 80,
11    second: function () {
12        console.log("Value:", this.first);
13        this.second();
14    }
15}
16
17obj2.second.call(obj1);

1function isValidAge(age) {
2    return !(age > 18)
3}
4
5const validAgeParams = {
6    voter_id: 123,
7    constituency: 'New Delhi'
8}
9
10const teenageParams = {
11    age_criteria: '<18',
12}
13
14let some_value;
15
16console.log(
17    isValidAge(some_value) ? {
18        'name': 'ABC',
19        ...(!isValidAge(19) && validAgeParams)
20    } : {
21        'name': 'XYZ',
22        ...(isValidAge(19) && teenageParams)
23    }
24);

1const promise1 = new Promise((resolve, reject) => {
2    setTimeout(() => {
3        resolve('First promise resolved');
4    }, 1000);
5});
6
7promise1
8    .then((result) => {
9        console.log(result);
10        return new Promise((resolve, reject) => {
11            setTimeout(() => {
12                resolve('Second promise resolved');
13            }, 3000);
14        });
15    })
16    .then((result) => {
17        console.log(result);
18        return new Promise((resolve, reject) => {
19            setTimeout(() => {
20                reject('Third promise resolved');
21            }, 3000);
22        });
23    })
24    .then((result) => {
25        console.log(result);
26    })
27    .catch((error) => {
28        console.log("Promise chain interrupted. Reason:", error);
29    });

1const store = new Vuex.Store({
2    state:{
3        foods:[
4                {"name":"Sandwich", "calories":100},
5                {"name":"Pizza", "calories": 1250},
6                {"name":"Chips", "calories": 700}
7              ],
8        best_food: []
9    },
10    =property_name=:{
11        get_best_food: function(state) {
12
13            =========== definition ============
14
15        }
16    },
17
18})

1// Code Snippet 1
2sessionStorage.setItem('username', 'course_user');
3let storedUsername = sessionStorage.getItem('username');
4
5// Code Snippet 2
6sessionStorage.removeItem('username');
7let removedUsername = sessionStorage.getItem('username');
8
9// Code Snippet 3
10sessionStorage.clear();
11let clearedStorage = sessionStorage.username;

1const promise1 = new Promise((resolve, reject) => {
2    setTimeout(() => {
3        resolve('First promise resolved');
4    }, 1000);
5});
6
7promise1
8    .then((result) => {
9        console.log(result);
10        return new Promise((resolve, reject) => {
11            setTimeout(() => {
12                resolve('Second promise resolved');
13            }, 3000);
14        });
15    })
16    .then((result) => {
17        console.log(result);
18        return new Promise((resolve, reject) => {
19            setTimeout(() => {
20                resolve('Third promise resolved');
21            }, 3000);
22        });
23    })
24    .then((result) => {
25        console.log(result);
26    })
27    .catch((error) => {
28        console.log("Promise chain interrupted. Reason:", error);
29    });

1<div id = "app">
2    <input v-model = "course" @input = "do_something">
3    <p> {{role}} </p>
4</div>

1new Vue({
2    el : "#app",
3    data : {
4        course : "#app",
5        role : "user",
6    },
7
8    mounted () {
9        try {
10            this.course = localStorage.getItem("course").split(" ")[0];
11            this.role = localStorage.getItem("course").split(" ")[1];
12            localStorage.setItem("course",
13                localStorage.getItem("course").split(" ")[0] + " " +
14this.course);
15        }
16        catch {
17            this.course = "MAD_II";
18            this.role = "admin";
19        }
20    },
21
22    methods : {
23        do_something() {
24            localStorage.setItem("course", this.course);
25            localStorage.setItem("role", this.role);
26        }
27    }
28})

1var app = new Vue({
2    el: '#app',
3    data : {
4        classObj : {
5            is_active: true,
6            completed: false
7        },
8        myClass: 'is_active',
9        status: true
10    }
11})

1<div :class="classObj"></div>

1<div :class="[status ? myClass : '']"></div>

1<template>
2  <div>
3    <h1>{{ pageTitle }}</h1>
4    <router-link to="/home" v-if="showHomeLink">Home</router-link>
5    <router-link to="/about" v-if="showAboutLink">About</router-link>
6    <router-view></router-view>
7  </div>
8</template>

1<script>
2export default {
3  name: 'App',
4  data() {
5    return {
6      pageTitle: 'Vue Router Demo',
7      showHomeLink: true,
8      showAboutLink: false,
9    };
10  },
11  watch: {
12  '$route.path'() {
13    if (this.$route.path === '/home') {
14      this.showAboutLink = true;
15      this.showHomeLink = false;
16      this.pageTitle = 'Home Page';
17    } else if (this.$route.path === '/about') {
18     this.showAboutLink = false;
19     this.showHomeLink = true;
20     this.pageTitle = 'About Page';
21   } else {
22     this.pageTitle = 'Vue Router Demo';
23      }
24   },
25  },
26};
27</script>

1<body>
2    <div id="app"></div>
3    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
4    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
5    <script src="app.js"></script>
6</body>

1const records = {
2                  1: {albums: "Heartrisers", songs: 20, genre: 4},
3                  2: {albums: "Pianobind", songs: 13, genre: 5}
4                }
5
6const notFound = { template: `<h1>Unknown record!</h1>` }
7const myRecords = {
8    template: `<h1>{{record.albums}} has {{record.songs}} songs across
9               {{record.genre}} genres.</h1>`,
10    data() {
11        return {record: records[this.$route.params.id]}
12        },
13    }
14
15const router = new VueRouter({
16routes: [
17    { path: '/records/:id', component: myRecords },
18    { path: '*', component: notFound },
19],
20})
21
22new Vue({
23el: '#app',
24template: '<div><router-view /></div>',
25router,
26})