MAD 2 End Term: 22 December 2024, Set QDF3 (September 2024 term)

1 Vue.component('child', {
2    template: `
3        <div>
4            <slot name="header" :info="info"></slot>
5            <slot :info="info"></slot>
6        </div>
7    `,
8    data() {
9        return {
10            info: { title: 'Hello', desc: 'World' }
11        }
12    }
13})

1Promise.resolve(1)
2    .then(x => x + 1)
3    .then(x => Promise.resolve(x + 1))
4    .then(x => { throw 'error' })
5    .catch(e => e + 4)
6    .then(x => console.log(x))

1async function test() {
2    console.log("Start");
3    const val = await Promise.resolve(5);
4    console.log(val);
5    return "End";
6}
7
8console.log("Begin");
9test().then(data => console.log(data));
10console.log("Finish");

1Content-Security-Policy: default-src 'self';

1<script src="https://otherurl.com/code.js"></script>

1<template>
2  <div>
3      <p v-if="isVisible">This paragraph is visible</p>
4      <p v-else>This paragraph is hidden</p>
5  </div>
6</template>
7
8<script>
9export default {
10  data() {
11      return {
12          isVisible: true
13      };
14  }
15};
16</script>

1console.log("Start");
2
3setTimeout(function() {
4  console.log("Inside Timeout");
5}, 0);
6
7Promise.resolve().then(function() {
8  console.log("Inside Promise");
9});
10
11console.log("End");

1function Person(name) {
2  this.name = name;
3}
4
5Person.prototype.greet = function() {
6  console.log("Hello, " + this.name);
7};
8
9const john = new Person("John");
10john.greet();
11
12delete john.greet;
13john.greet();

1const routes = [
2  { path: '/', component: Home },
3  { path: '/profile/:userId', component: Profile },
4  { path: '/settings', component: Settings },
5  { path: '/settings/security', component: Security },
6  { path: '*', component: NotFound },
7];

1export default {
2  data() {
3    return {
4      userName: '',
5    };
6  },
7  mounted() {
8    this.userName = sessionStorage.getItem('userName') || '';
9  },
10  watch: {
11    userName(newVal) {
12      sessionStorage.setItem('userName', newVal);
13    }
14  }
15};

1const obj = {
2  name: "Abhi",
3  greet: function() {
4      console.log(this.name);
5  }
6};
7
8const greet = obj.greet;
9greet();

1function addItemToCart(item) {
2        let cart = JSON.parse(localStorage.getItem('cart')) || [];
3        cart.push(item);
4        localStorage.setItem('cart', JSON.stringify(cart));
5    }
6
7    function getCartItems() {
8        return JSON.parse(localStorage.getItem('cart')) || [];
9    }
10
11    addItemToCart({ id: 1, name: 'Laptop' }.name);
12    console.log(getCartItems());

1const store = new Vuex.Store({
2  state: {
3      counter: 0
4  },
5  mutations: {
6      increment(state) {
7          state.counter++;
8      }
9  },
10  actions: {
11      async incrementAsync({ commit }) {
12          await new Promise(resolve => setTimeout(resolve, 1000));
13          commit('increment');
14      }
15  }
16});

1this.$store.dispatch('incrementAsync');

1new Vue({
2  el: '#app',
3  data: {
4      user: {
5      name: 'Abhi',
6      age: 30
7      }
8  },
9  watch: {
10      user: {
11      handler(newValue, oldValue) {
12      console.log('User object changed:', newValue);
13      },
14      deep: true
15      }
16  }
17});

1<div id="app">{{doubledItems}}</div>
2    <script>
3        new Vue({
4            el: '#app',
5            data() {
6                return {
7                    items: [1, 2, 3],
8                    processed: []
9                };
10            },
11            computed: {
12                doubledItems() {
13                    return this.items.map(x => x * 2);
14                }
15            },
16            created() {
17                this.processItems();
18            },
19            methods: {
20                processItems() {
21                    this.items.push(4);
22                    this.processed = this.doubledItems;
23
24                    setTimeout(() => {
25                        this.processed = this.processed.map(x =>
26                            this.doubledItems.includes(x) ? x : x * 2
27                        );
28                    }, 0);
29                }
30            }
31        });
32    </script>

1<div id="app"></div>
2    <script>
3        new Vue({
4            el: '#app',
5            template: `
6                <div>
7                    <form @submit.prevent>
8                        <input v-model="email" @input="validateEmail">
9                        <button type="submit">Submit</button>
10                        <p>Errors: {{ displayErrors.join(', ') }}</p>
11                    </form>
12                </div>
13            `,
14            data() {
15                return {
16                    email: '',
17                    errors: [],
18                    validating: false,
19                    existingEmails: ['test@test.com',
20'example@example.com']
21                };
22            },
23            computed: {
24                displayErrors() {
25                    return this.validating ? ['Validating...'] :
26this.errors;
27                },
28            },
29            methods: {
30                validateEmail() {
31                    this.validating = true;
32                    this.errors = [];
33
34                    if (!this.email.includes('@')) {
35                        this.errors.push('@ not present');
36                    }
37                    if (!this.email.includes('.')) {
38                        this.errors.push('invalid format')
39                    }
40
41                    if (this.existingEmails.includes(this.email)) {
42                        this.errors.push('Email exists');
43                    }
44
45                    this.validating = false;
46                },
47            },
48            watch: {
49                email(value) {
50                    if (!value) this.errors = ['Required'];
51                },
52            },
53        });
54    </script>

1from flask import Flask, request
2from flask_caching import Cache
3import time
4
5app = Flask(__name__)
6
7app.config['CACHE_TYPE'] = 'RedisCache'
8app.config['CACHE_DEFAULT_TIMEOUT'] = 5
9cache = Cache(app)
10
11@app.route('/time')
12@cache.cached()
13def get_time():
14    return str(time.time())

1from celery import Celery
2import time
3
4app = Celery('tasks', broker='redis://localhost:6379/0')
5
6@app.task
7def long_task():
8    time.sleep(10)
9    return 'Task completed'

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

1new Vue({
2    el: '#app',
3    template: `<div>
4                    Status: {{message}}<br>
5                    ETA: {{ETA}}
6               </div>`,
7    data: {
8      message: "",
9      ETA: 10,
10    },
11    beforeCreate() {
12        this.message += "DOM Creating, "
13        this.ETA -= 1
14    },
15    created() {
16        this.message += "DOM Created, "
17        this.ETA -= 1
18    },
19    beforeMount() {
20        this.message += "DOM Mounting, "
21        this.ETA -= 1
22    },
23    mounted() {
24        this.message += "DOM Mounted"
25        this.ETA -= 1
26
27    },
28  })

1const routes = [
2  {
3      path: '/user/:id',
4      component: UserProfile
5  }
6];
7
8const router = new VueRouter({
9  routes
10});