IIT M DIPLOMA QUIZ2 EXAM QPE1 10 July 2022 - 10 Jul 2022

THIS IS QUESTION PAPER FOR THE SUBJECT "MODERN APPLICATION DEVELOPMENT 2"

ARE YOU SURE YOU HAVE TO WRITE EXAM FOR THIS SUBJECT?
CROSS CHECK YOUR HALL TICKET TO CONFIRM THE SUBJECTS TO BE WRITTEN.

(IF IT IS NOT THE CORRECT SUBJECT, PLS CHECK THE SECTION AT THE TOP FOR THE SUBJECTS REGISTERED BY YOU)

```html
<div id = "app">
    <input v-model = "data" />
    <p> Number of refreshes: {{ refreshes }} </p>
    <button @click = "do_something"> Click Me</button>
</div>
<script src = "app.js"></script>
```
```javascript
const a = new Vue({
    el : '#app',
    data : {
        data : "",
        refreshes : 0,
    },
    methods: {
        do_something() {
            if (isNaN(this.refreshes)) this.refreshes = 0;
            if (this.data.length % 2) {
                sessionStorage.data = "prefix" + this.data;
                sessionStorage.refreshes = this.refreshes * 2 + 1;
            }
            else {
```
```javascript
sessionStorage.data = this.data + "suffix";
sessionStorage.refresh = this.refreshes * 2 - 1;
},
},
mounted: function () {
if (sessionStorage.data) {
this.data = "suffix" + sessionStorage.data;
this.refreshes = Number(sessionStorage.refreshes) % 3 - 1;
}
else {
this.data = sessionStorage.data + "prefix";
this.refreshes = Number(sessionStorage.refreshes) % 3 + 1;
}
sessionStorage.data = this.data;
sessionStorage.refreshes = this.refreshes;
}
})
```

```javascript
const store = new Vuex.Store({
  state: {
    companies: [{
      name: 'sample1',
      website: 'sample1.com',
      capital: 50000
    }, {
      name: 'sample2',
      website: null,
      capital: 75000
    }, {
      name: 'sample3',
      website: 'sample3.com',
      capital: 42000
    }, {
      name: 'sample4',
      website: 'sample4.com',
      capital: 38000
    }, ],
    awardees: []
  },

  mutations: {
    update_final(state, minimum) {

      for (company of state.companies) {
        code2
      }
    }
  },
  actions: {
    send_task: function(context) {
      code1
    }
  }
})
```

```javascript
async function FetchFunct (ApiUrl) {
  const response = await fetch(ApiUrl).catch(() => {
    throw new Error('Network Error')
  })

  if (response) {
    if (response.ok) {
      const data = await response.json().catch(() => {
        throw new Error('Unexpected Error')
      })
      if (data) {
        return data
      }
    } else {
      throw new Error(response.statusText)
    }
  }
}

Const url = 'dummyUrl'
FetchFunct (url)
  .then((data) => {
    console.log(data)
  })
  .catch((err) => {
    console.log(err.message)
  })
```

```html
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="app.js" type="module"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
</body>
```
```javascript
const Create = {
  template: `<div>{{ message }}</div>`,
  computed: {
    message() {
      return this.$route.query.update
        ? 'This is create page'
        : 'This is update page'
    }
  }
}

const router = new VueRouter({
  routes: [{ path: '/', component: Create }],
})

new Vue({
  el: '#app',
  router,
})
```

```html
<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <script src="app.js" type="module"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
</body>
```
```javascript
const home = { template: `<div> This is home page</div>`, name: 'home' }
const profile = {
  template: `<div> This is profile page of {{this.$route.params.name}}</div>`,
}
const user = {
  template: `<div> Welcome {{this.$route.params.name}}
<div><router-view></router-view></div>
</div>`,
}
const router = new VueRouter({
  routes: [
    { path: '/', component: home },
    {
      path: '/user/:name',
      component: user,
      children: [
        { path: '', component: home },
        { path: 'home', component: home },
        { path: 'profile', component: profile },
      ],
    },
  ],
})

new Vue({
  el: '#app',
  router,
})
```
Suppose the application is running on "http://127.0.0.1:8080". What will be displayed by the browser for "http://127.0.0.1:8080/#/user/mohan/profile"?

index.html:

```html
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="app.js" type="module"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
</body>
```
app.js:

```javascript
const home = { template: `<div> This is home page</div>`, name: 'home' }
const profile = {
  template: `<div> This is profile page of {{this.$route.params.name}}</div>`,
}
const user = {
  template: `<div> Welcome {{this.$route.params.name}}
<div><router-view></router-view></div>
</div>`,
}

const router = new VueRouter({
  routes: [
    { path: '/', component: home },
    {
      path: '/user/:name',
      component: user,
      children: [
        { path: '', component: home },
        { path: 'home', component: home },
        { path: 'profile', component: profile },
      ],
    },
  ],
})

new Vue({
  el: '#app',
  router,
})
```

What will be displayed by the browser for "http://127.0.0.1:8080/#/user/mohan"?

```javascript
async function test() {
    let a = await new Promise(r => r(2 && 4))).catch(e => e);
    let b = await new Promise((res, rej) => {
        if (a <= 2) res(a && 5);
        else rej(5 && a);
    })).catch(e => e);
    console.log(a, b);
}
test();
```

```javascript
new Promise((reject, resolve) => {

  function test(input1, input2, data) {
    let obj = {
      input1: input1,
      input2: input2
    }

    if (data.find(el => el.input1 == obj.input1 && el.input2 != obj.input2))
      resolve("Element Found")
    else
      reject("Element Missing")
  }

  data = [{
    'input1': 4,
    'input2': 'input2'
  }]
  test(4, 4, data)

}).then(data => console.log("Test failed !!", data))
  .catch(error => console.log("Test Passed !!", error))
```

```html
<div id = "app">
    <input v-model = "data" />
    <p> Number of refreshes: {{refreshes}} </p>
    <button @click = "do_something"> Click Me</button>
</div>
<script src = "app.js"></script>
```
```javascript
const a = new Vue({
  el: '#app',
  data: {
    data: "",
    refreshes: 0,
  },
  methods: {
    do_something() {
      if (isNaN(this.refreshes)) this.refreshes = 0;
      if (this.data.length % 2) {
        sessionStorage.data = "prefix" + this.data;
        sessionStorage.refreshes = this.refreshes * 2 + 1;
      } else {
        sessionStorage.data = this.data + "suffix";
        sessionStorage.refreshes = this.refreshes * 2 - 1;
      }
    },
  },
  mounted: function() {
    if (sessionStorage.data) {
      this.data = "suffix" + sessionStorage.data;
      this.refreshes = Number(sessionStorage.refreshes) % 3 - 1;
    } else {
      this.data = sessionStorage.data + "prefix";
      this.refreshes = Number(sessionStorage.refreshes) % 3 + 1;
    }
    sessionStorage.data = this.data;
    sessionStorage.refreshes = this.refreshes;
  }
})
```

```javascript
function PromiseConstructor(t) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(t)
    }, t * 1000)
  })
}

async function test() {
  const x1 = await PromiseConstructor(1)
  console.log(2)
  const x2 = await PromiseConstructor(3)
  console.log(x1)
  console.log(x2)
}

test()
console.log(4)
```