IIT M DIPLOMA AN EXAM QDD3 24 Mar 2024 - 24 Mar 2024

```javascript
var first = 30
const obj1 = {
    first: 50,
    second: () => {
        console.log("Value:", this.first);
    }
}

const obj2 = {
    first: 80,
    second: function () {
        console.log("Value:", this.first);
        this.second();
    }
}

obj2.second.call(obj1);
```

```javascript
function isValidAge(age) {
  return !(age > 18)
}

const validAgeParams = {
  voter_id: 123,
  constituency: 'New Delhi'
}

const teenageParams = {
  age_criteria: '<18',
}

let some_value;

console.log(
  isValidAge(some_value) ? {
    'name': 'ABC',
    ...(!isValidAge(19) && validAgeParams)
  } : {
    'name': 'XYZ',
    ...(isValidAge(19) && teenageParams)
  }
);
```

```javascript
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('First promise resolved');
  }, 1000);
});

promise1
  .then((result) => {
    console.log(result);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Second promise resolved');
      }, 3000);
    });
  })
  .then((result) => {
    console.log(result);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject('Third promise resolved');
      }, 3000);
    });
  })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log("Promise chain interrupted. Reason:", error);
  });
```

```javascript
let Obj1 = {model: 'AIR101', brand: 'AIRBUS', type: 'Passenger'}
let Obj2 = {__proto__: Obj1, wheels: '36', engines: 4}

console.log(Obj2.model)
console.log(Object.keys(Obj2).length)
console.log(Obj1.engines)
```

Fill in property_name & definition, which can be used in Vuex Store to update the "best_food" state variable with the objects of those food items which have their calorific value less than 300.

```javascript
const store = new Vuex.Store({
  state: {
    foods: [
      { "name": "Sandwich", "calories": 100 },
      { "name": "Pizza", "calories": 1250 },
      { "name": "Chips", "calories": 700 }
    ],
    best_food: []
  },
  =property_name=: {
    get_best_food: function(state) {
      ======== definition ========
    }
  }
})
```

```javascript
// Code Snippet 1
sessionStorage.setItem('username', 'course_user');
let storedUsername = sessionStorage.getItem('username');

// Code Snippet 2
sessionStorage.removeItem('username');
let removedUsername = sessionStorage.getItem('username');

// Code Snippet 3
sessionStorage.clear();
let clearedStorage = sessionStorage.username;
```

```javascript
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('First promise resolved');
  }, 1000);
});

promise1
  .then((result) => {
    console.log(result);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Second promise resolved');
      }, 3000);
    });
  })
  .then((result) => {
    console.log(result);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Third promise resolved');
      }, 3000);
    });
  })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log("Promise chain interrupted. Reason:", error);
  });
```

index.html:
```html
<div id = "app">
    <input v-model = "course" @input = "do_something">
    <p> {{role}} </p>
</div>
```
app.js:
```javascript
new Vue({
    el : "#app",
    data : {
        course : "#app",
        role : "user",
    },

    mounted () {
        try {
            this.course = localStorage.getItem("course").split(" ")[0];
            this.role = localStorage.getItem("course").split(" ")[1];
            localStorage.setItem("course",
                localStorage.getItem("course").split(" ")[0] + " " +
                this.course);
        }
        catch {
            this.course = "MAD_II";
            this.role = "admin";
        }
    },

    methods : {
        do_something() {
            localStorage.setItem("course", this.course);
            localStorage.setItem("role", this.role);
        }
    }
})
```

Script.js:
```javascript
var app = new Vue({
  el: '#app',
  data: {
    classObj: {
      is_active: true,
      completed: false
    },
    myClass: 'is_active',
    status: true
  }
})
```

Code 1:
```html
<div :class="classObj"></div>
```

Code 2:
```html
<div :class="[status ? myClass : '']"></div>
```

Template:
```html
<template>
  <div>
    <h1>{{ pageTitle }}</h1>
    <router-link to="/home" v-if="showHomeLink">Home</router-link>
    <router-link to="/about" v-if="showAboutLink">About</router-link>
    <router-view></router-view>
  </div>
</template>
```

Script:
```html
<script>
export default {
  name: 'App',
  data() {
    return {
      pageTitle: 'Vue Router Demo',
      showHomeLink: true,
      showAboutLink: false,
    };
  },
  watch: {
    '$route.path'() {
      if (this.$route.path === '/home') {
        this.showAboutLink = true;
        this.showHomeLink = false;
        this.pageTitle = 'Home Page';
      } else if (this.$route.path === '/about') {
        this.showAboutLink = false;
        this.showHomeLink = true;
        this.pageTitle = 'About Page';
      } else {
        this.pageTitle = 'Vue Router Demo';
      }
    },
  },
};
</script>
```

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

Filename: app.js
```javascript
const records = {
    1: {albums: "Heartrisers", songs: 20, genre: 4},
    2: {albums: "Pianobind", songs: 13, genre: 5}
}

const notFound = { template: `<h1>Unknown record!</h1>` }
const myRecords = {
    template: `<h1>{{record.albums}} has {{record.songs}} songs across
    {{record.genre}} genres.</h1>`,

    data() {
        return {record: records[this.$route.params.id]}
    },
}

const router = new VueRouter({
    routes: [
        { path: '/records/:id', component: myRecords },
        { path: '*', component: notFound },
    ],
})

new Vue({
    el: '#app',
    template: '<div><router-view /></router-view></div>',
    router,
})
```