IIT M IMPROVEMENT AN EXAM QIO3 13 July - 13 Jul 2025

Consider the following HTML, with the correct Vue 2 CDN links included:
Html code.

```html
<div id="app">
  <h3>Shopping Cart</h3>
  <p>Items: {{itemCount}}</p>
  <p>Total Cost: ${{totalCost}}</p>
  <button @click="addItem">Add Item ($15)</button>
  <button @click="removeItem">Remove Item</button>
  <p>Status: {{status}}</p>
</div>
```

script:

```javascript
const app = new Vue({
  el: '#app',
  data() {
    return {
      itemCount: 0,
      itemPrice: 15,
      totalCost: 0
    }
  },
  computed: {
    status() {
      if (this.itemCount === 0) {
        return 'Empty Cart';
      } else if (this.itemCount < 3) {
        return 'Few Items';
      } else {
        return 'Full Cart';
      }
    }
  },
  methods: {
    addItem() {
      this.itemCount++;
      this.totalCost += this.itemPrice;
    },
    removeItem() {
      if (this.itemCount > 0) {
        this.itemCount--;
        this.totalCost -= this.itemPrice;
      }
    }
  }
})
```

If the user clicks the "Add Item" button 3 times, then clicks the "Remove Item" button 1 time, what will be displayed for Items, Total Cost, and Status?

Consider the following code.

```javascript
const arr = [1, 2, 3];
const result = arr.map(function(item, index) {
  return this[index] * item;
}, [10, 20, 30]);
console.log(result);
```

What will be the output?

In Vue 2, which of the following will NOT trigger reactivity?
```javascript
data() {
  return {
    items: [1, 2, 3],
    obj: { a: 1 }
  }
}
```

What will be the output of this code?

```javascript
function createFunctions() {
  var funcs = [];
  for (var i = 0; i < 3; i++) {
    funcs.push(function() {
      return i;
    });
  }
  return funcs;
}

const functions = createFunctions();
console.log(functions[0](), functions[1](), functions[2]());
```

Consider the following JavaScript code:

```javascript
const products = [
  { id: 101, name: "laptop", price: 800 },
  { id: 102, name: "mouse", price: 25 },
  { id: 103, name: "keyboard", price: 60 },
  { id: 104, name: "monitor", price: 300 }
];

const priorities = { "102": 1, "104": 2, "101": 3, "103": 4 };

products
  .filter((product) => product.price > 50)
  .map((product) => {
    return { ...product, priority: priorities[product.id] }
  })
  .sort((a, b) => a.priority - b.priority)
  .forEach((product) => {
    console.log(product.name);
  });
```

What will be the output of the code?

Consider the following JavaScript code to answer the below question:

```javascript
const grandParent = {
    username: 'GrandParent',
    getName: function () {
        return this.username;
    },
    parent: {
        username: 'Parent',
        getName: function () {
            return this.username;
        },
        child: {
            username: 'Child',
            getNameArrow: () => {
                return this.username;
            },
            getNameFunc: function () {
                return this.username;
            }
        }
    }
};

console.log("A: " + grandParent.getName());
console.log("B: " + grandParent.parent.getName());
console.log("C: " + grandParent.parent.child.getNameFunc());
console.log("D: " + grandParent.parent.child.getNameArrow());
```

What will be the result of all the console.log after execution of the above code?

Consider the following Vue.js (Vue 2) code to answer the following question:

```html
<div id="app">
  <my-counter :start="5"></my-counter>
</div>

<script>
  Vue.component('my-counter', {
    props: ['start'],
    data: function () {
      return {
        count: this.start
      };
    },
    template: `
      <div>
        <p>{{ count }}</p>
        <button @click="increment">Increment</button>
      </div>
    `,
    methods: {
      increment() {
        this.count++;
      }
    }
  });

  new Vue({
    el: '#app',
    data: { start: 10 }
  });
</script>
```

What will be displayed when the page loads, and what happens when you click the button?

Consider the following JavaScript program:

```javascript
function createMultiplier(base) {
  let multiplier = base;

  function updateMultiplier(newValue) {
    multiplier = newValue;
    return multiplier;
  }

  function multiply(num) {
    return num * multiplier;
  }

  return {
    update: updateMultiplier,
    calculate: multiply,
    getMultiplier: function() { return multiplier; }
  };
}

const math1 = createMultiplier(3);
const math2 = createMultiplier(5);

console.log(math1.calculate(4));
console.log(math2.calculate(2));
console.log(math1.update(7));
console.log(math1.calculate(4));
console.log(math2.getMultiplier());
console.log(math1.getMultiplier());
```

What will be the output of the above program?

Consider the following JavaScript code snippet:

```javascript
var globalScore = 25;

const player1 = {
    score: 150,
    getScore: function() {
        return this.score;
    },
    displayScore: function(bonus) {
        return this.score + (bonus || 0);
    }
};

const player2 = { score: 200 };
const player3 = { score: 75 };

const method1 = player1.getScore;
const method2 = player1.getScore.bind(player2);
const method3 = player1.displayScore.bind(player3);

console.log(method1());
console.log(method2());
console.log(method3(50));
console.log(method3.call(player1, 25));
```

What will be the output of the above JavaScript code?

Consider the following JavaScript code to answer the below question:

```javascript
function normalFunc() {
  console.log(this.constructor.name);
}

const arrowFunc = () => {
  console.log(this.constructor.name);
};

const objj = {
  name: 'Test',
  normalMethod: normalFunc,
  arrowMethod: arrowFunc,
  outer: function () {
    return () => {
      console.log(this.name);
    };
  },
};

const inner = objj.outer();

objj.normalMethod();
objj.arrowMethod();
inner();
new arrowFunc();
```

Which of the following statements is/are TRUE?

If you wanted to make this app more
maintainable by moving logic to **methods**,
which line would you replace?

What classes will be applied to the
`<div>` initially (before any button
clicks)?

What classes will be applied to the
`<div>` after clicking the "Toggle State"
button once?