MAD2 week 1 - real exam questions

index.html
app.js
```html
<div id="app">
  <router-view></router-view>
</div>
```
```javascript
const Flights = {
  template: `<h2>{{ result }}</h2>`,

  data() {
    return {
      routes: [
        { city: "Delhi", connectedTo: ["Mumbai", "Pune"] },
        { city: "Indore", connectedTo: ["Bhopal", "Jaipur"] },
        { city: "Raipur", connectedTo: ["Nagpur", "Hyderabad"] },
        { city: "Rewa", connectedTo: ["Delhi", "Indore", "Raipur"] }
      ],
      result: ""
    };
  },

  created() {
    const destination = this.$route.params.city.toLowerCase();

    for (let i = 0; i < this.routes.length; i++) {
      const connections = this.routes[i].connectedTo;

      for (let j = 0; j < connections.length; j++) {
        if (connections[j].toLowerCase() === destination) {
          this.result = this.routes[i].city;
          break;
        }
      }

      if (this.result) {
        break;
      }
    }
  }
};
```
```
http://localhost:8080
```
```
http://localhost:8080/#/raipur
```
app.js
```javascript
const router = new VueRouter({
  routes: [
    {
      path: "/:city",
      component: Flights
    }
  ]
});

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

```javascript
const store = new Vuex.Store({
  state: {
    temperature: 30
  },
  getters: {
    weatherStatus(state) {
      return state.temperature >= 35 ? "Hot" : "Normal"
    }
  }
})
```
weatherStatus
```javascript
computed: {
  weatherStatus() {
    return this.$store.getters.weatherStatus
  }
}
```
weatherStatus
weatherStatus
temperature

```javascript
function outerFunc() {
  const val1 = 10;
  var val2 = 20;

  function innerFunc() {
    var val2 = 30;
    console.log(val1)
    console.log(val2)
  }
  innerFunc()
  console.log(val1)
  console.log(val2)
}
outerFunc()
```

```javascript
const numbers = [10, 20, 30, 40, 50];
const [num1, , num2, ...rest] = numbers;
const [a = 100, b = 200] = [undefined, 0];

console.log(num1, num2, rest);
console.log(a, b);
```

```javascript
const user = {
  id: 1,
  profile: {
    name: "Riya",
    address: {
      city: "Pune",
      zip: "411001"
    }
  }
};

const {
  profile: {
    name,
    address: { city, state = "Maharashtra" }
  },
  role = "guest",
  profile
} = user;

console.log(name, city, state, role);
console.log(profile);
```

```javascript
console.log("1");
setTimeout(() => console.log("2"), 0);
Promise.resolve().then(() => console.log("3"));
console.log("4");
Promise.resolve().then(() => {
  console.log("5");
  setTimeout(() => console.log("6"), 0);
});
```

| Directive | Description |
|---|---|
| 1. v-if | A. Two-way binding between input and data |
| 2. v-for | B. Conditionally renders DOM elements |
| 3. v-bind | C. Binds HTML attributes dynamically |
| 4. v-model | D. Renders a list of items |

```javascript
const calculator = {
  value: 10,
  add(a, b) {
    return this.value + a + b;
  }
};

const rawAdd = calculator.add;
const boundAdd = calculator.add.bind({ value: 100 }, 5);

console.log(rawAdd(1, 2));
console.log(boundAdd(10));
console.log(calculator.add.apply({ value: 50 }, [1, 2]));
```

TRUE
```javascript
const value = "global";

const obj = {
  value: "objectValue",
  regularMethod: function () {
    console.log(this.value);
  },
  arrowMethod: () => {
    console.log(this.value);
  },
  nested: {
    value: "nestedValue",
    regularInNested: function () {
      console.log(this.value);
    },
    arrowInNested: () => {
      console.log(this.value);
    },
  },
  delayedRegular: function () {
    setTimeout(function () {
      console.log(this.value);
    }, 100);
  },
  delayedArrow: function () {
    setTimeout(() => {
      console.log(this.value);
    }, 100);
  },
};
```
```javascript
obj.regularMethod();
obj.arrowMethod();
obj.nested.regularInNested();
obj.nested.arrowInNested();
obj.delayedRegular();
obj.delayedArrow();
```

```javascript
const cloned = { ...user }

cloned.name = "Amit"
cloned.skills.push("JavaScript")

console.log(user.name)
console.log(user.skills.length)
```

```javascript
const cloned = {
  ...user,
  skills: [...user.skills]
}

cloned.skills.push("JavaScript")

console.log(user.skills.length)
console.log(cloned.skills.length)
```

```javascript
new Vue({
  el: "#app",
  data: {
    message: "Hello"
  },
  beforeCreate() {
    console.log("1:", this.message);
  },
  created() {
    console.log("2:", this.message);
  },
  beforeMount() {
    console.log("3:", this.$el.textContent);
  },
  mounted() {
    console.log("4:", this.$el.textContent);
  }
});
```
```html
<div id="app">{{ message }}</div>
```

```html
<div id="app">
  <ul>
    <!-- Missing Code -->
  </ul>
</div>

<script>
  new Vue({
    el: '#app',

    data: {
      courses: []
    },

    async mounted() {
      const response = await fetch('https://example.com/api/courses')
      this.courses = await response.json()
    }
  })
</script>
```
```json
[
  { "id": 1, "name": "MAD-2" },
  { "id": 2, "name": "DBMS" }
]
```
```html
<!-- Missing Code -->
```

```javascript
const products = [
  { name: "Laptop", price: 1200, inStock: true },
  { name: "Mouse", price: 25, inStock: false },
  { name: "Keyboard", price: 75, inStock: true },
  { name: "Monitor", price: 300, inStock: false }
];

const result = products.filter(item => item.inStock && item.price < 500);
```

```javascript
// Executed in Tab 1
localStorage.setItem("theme", "dark");
sessionStorage.setItem("cart", "3-items");
```

```javascript
const heading = document.querySelector("h1")
```

```javascript
function addProduct(product) {
    let products = JSON.parse(localStorage.getItem('products')) || [];
    products.push(product);
    localStorage.setItem('products', JSON.stringify(products));
}

function getProducts() {
    return JSON.parse(localStorage.getItem('products')) || [];
}

addProduct({ id: 3, name: 'Tablet' }.name);
console.log(getProducts());
```

```javascript
async function getUser() {
  const response = await fetch("https://api.example.com/user/1");

  if (!response.ok) {
    throw new Error("Request failed");
  }

  const data = await response.json();
  console.log(data.name);
}

getUser();
```

```javascript
console.log("A")
setTimeout(() => console.log("B"), 0)
Promise.resolve().then(() => console.log("C"))
console.log("D")
```

```javascript
const settings = { theme: "light", layout: { sidebar: true } }
const copy = { ...settings }
copy.layout.sidebar = false
```
```
settings.layout.sidebar
```

```javascript
async function fetchData() {
  console.log("1");
  const result = await new Promise((resolve) => {
    setTimeout(() => resolve("done"), 1000);
    console.log("2");
  });

  console.log("3:", result);
}

fetchData();
console.log("4");
```

```html
<div class="card" data-price="499">
    <span id="title">Vue Book</span>
</div>
```

children
```
{ path: '*', component: NotFound }
```
```javascript
this.$router.go(-1)
```

```javascript
const store = new Vuex.Store({
  state: {
    discount: 10,
    products: [
      {name: 'apple',
        price: 120
      },
      {
        name: 'banana',
        price: 60
      }
    ]
  },
  mutations: {
    reducePrice: state=>{
      // Code1
    }
  }
})
```

```javascript
const store = new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    ADD_TO_CART(state, product) {
      state.cart.push(product)
    }
  },
  actions: {
    addToCart({ commit }, product) {
      setTimeout(() => {
        commit('ADD_TO_CART', product)
      }, 500)
    }
  }
})
```
```javascript
methods: {
  addItem_A(product) {
    this.$store.commit('ADD_TO_CART', product)
  },
  addItem_B(product) {
    this.$store.dispatch('addToCart', product)
  },
  addItem_C(product) {
    this.$store.state.cart.push(product)
  }
}
```
addItem_A
addItem_B
addItem_C

```html
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    };
  },
  beforeCreate() {
    console.log("A:", this.message);
  },
  created() {
    console.log("B:", this.message);
    this.message = "Hello from Vue!";
  },
  mounted() {
    console.log("C:", document.querySelector("p").textContent);
  }
};
</script>
```

```javascript
console.log(typeof setTimeout)
console.log(typeof document)
```

```javascript
console.log("1")

setTimeout(() => {
  console.log("2")
  setTimeout(() => console.log("3"), 0)
}, 0)

console.log("4")
```

```javascript
let var1 = 20;
var var2 = 30;
const val = 10;

{
    let var1 = 40;
    console.log(var1 + val);
}

console.log(var1 + val);

{
    var var2 = 50;
    console.log(var2 + val);
}

console.log(var2 + val);
```

```javascript
const obj1 = {
    prop1: "Germany",
    prop2: "Spain",
    prop3: 50,
    method1: function(){
        console.log(`The European countries are ${this.prop2} and ${this.prop1}.`)
    },
    method2: function(param){
        let value = param + 2*this.prop3;
        console.log(`The final numerical value is: ${value}.`)
    }
}

const obj2 = {
    prop1: "England",
    prop2: "Italy",
    prop3: "25"
}

const func1 = obj1.method1;
const func2 = obj1.method2;

func1.apply(obj1);
func2.bind(obj2)(15);
```

```javascript
const obj1 = {
    prop1: "Aluminium",
    prop2: "Gold",
    prop3: "Silver"
}

const obj2 = {
    propA: "Argon",
    propB: "Neon"
}

const {prop2: element1, propA: element2} = {...obj2, ...obj1};

console.log(`The selected elements are: ${element1} and ${element2}`);
```

```html
<child-box :message="parentMsg" @reply="handleReply"></child-box>
```
```javascript
this.$emit('reply', 'ok')
```

```html
<div id="app">
  <p>{{ message }}</p>
  <button @click="changeMessage">Click</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: "Hello"
    },
    methods: {
      changeMessage: () => {
        this.message = "Updated"
      }
    }
  })
</script>
```
message

```javascript
class MathUtils {
  static add(a, b) {
    return a + b;
  }
  multiply(a, b) {
    return a * b;
  }
}

const utils = new MathUtils();
```

```javascript
var var1 = 25;
var var2 = 35;

const obj = {
    var1: 45,
    var2: 55,
    func1: function(){
        console.log(`You are accessing: ${var1}`)
    },
    func2: () => {
        console.log(`You are accessing: ${this.var2}`)
    },
}

obj.func1()
obj.func2()
```

```javascript
console.log(z);
var a = "alpha";
console.log(a);
let b = "beta"
console.log(b);
d();
console.log(c);
const c = "charlie"
function d(){
    console.log("delta")
}
var z = function(){
    console.log("zeta")
}
```

```javascript
let myArr = ["January", "March", "April", "August", "September", "October"]

let modArr = myArr.map((m) => m.slice(2)).
    filter((m) => m.length < 5).
    sort();

console.log(modArr[1]);
```

```javascript
function first() {
  console.log("First start");
  setTimeout(function () {
    console.log("First timeout");
  }, 0);
  console.log("First end");
}

function second() {
  console.log("Second start");
  setTimeout(function () {
    console.log("Second timeout");
  }, 0);
}

console.log("Program start");
first();
second();
console.log("Program end");
```

```javascript
let arr = [1, 2, 3];
let sum = arr.reduce((acc, val, idx, array) => acc + val, 0);
console.log(sum);
```

```javascript
export const strikeRate = (runs, balls) => {
  return (runs / balls) * 100;
};

export const playerName = "Virat Kohli";
```

```javascript
const promise = new Promise((resolve, reject) => {
  resolve('Success!');
  reject('Error!');
});

promise.then(console.log).catch(console.log);
```

```javascript
const store = new Vuex.Store({
  state: {
    items: ['Angular', 'Vue'],
  },
  mutations: {
    addItem(state, item) {
      state.items.push(item);
    },
  },

  actions: {
    addItemAsync({ commit }, item) {
      setTimeout(() => {
        commit('addItem', item);
      }, 500);
    },
  },
});
```

```html
<div id="app">
  <router-link to="/about">Go to About</router-link>
  <router-view></router-view>
</div>

<script>
  const Home = { template: '<div>Home</div>' };
  const About = { template: '<div>About</div>' };

  const routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About },
    { path: '*', redirect: '/about' }
  ];

  const router = new VueRouter({ routes });

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

```javascript
console.log(typeof NaN);
console.log(typeof null);
console.log(NaN == null);
console.log(NaN === null);
```

```javascript
class Animal {
  constructor(type) {
    this.type = type;
  }
  speak() {
    console.log(`${this.type} makes a sound`);
  }
  getType() {
    return `This is a ${this.type}`;
  }
}

class Dog extends Animal {
  constructor(type, breed) {
    super(type);
    this.breed = breed;
  }
  speak() {
    console.log(`${this.type} ${this.breed} barks`);
  }
}

const myDog = new Dog('Dog', 'Labrador');
myDog.speak();
console.log(myDog.getType());
console.log(myDog instanceof Dog);
console.log(myDog instanceof Animal);
console.log(Dog.prototype.__proto__ === Animal.prototype);
```

```javascript
const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  city: 'New York'
};

const { firstName, city, ...rest } = person;
const newPerson = { firstName, location: city, ...rest };

console.log(firstName);
console.log(rest);
console.log(newPerson);
```

```javascript
const CAPACITY = 75;
const TOTAL_PEOPLE = 213;

function allocatePeople() {
  return new Promise((resolve, reject) => {
    let slots = [0, 0, 0];
    let remaining = TOTAL_PEOPLE;

    for (let i = 0; i < slots.length; i++) {
      if (remaining >= CAPACITY) {
        slots[i] = CAPACITY;
        remaining -= CAPACITY;
      } else {
        slots[i] = remaining;
        remaining = 0;
      }
    }

    reject(slots);
  });
}

async function startAllocation() {
  try {
    const result = await allocatePeople();
    console.log("Passed " + JSON.stringify(result));
  } catch (error) {
    console.log("Failed " + JSON.stringify(error));
  }
}

startAllocation();
```

| Directive | Description |
|---|---|
| 1. v-if | A. Two-way data binding between input and data |
| 2. v-for | B. Conditionally renders elements in the DOM |
| 3. v-bind | C. Binds HTML attributes dynamically |
| 4. v-model | D. Renders a list of items |

File: index.html

```html
<div id="app"></div>
<script src="script.js"></script>
```

File: script.js

```javascript
new Vue({
  el: '#app',
  template: `<div>
    Status: {{status}}<br>
    Value: {{value}}
  </div>`,
  data: {
    status: "Initial",
    value: 10,
  },
  beforeCreate() {
    this.status = this.status + " -> Created"
    this.value = this.value + 5
  },
  beforeMount() {
    this.status = this.status + " -> Ready"
    this.value = this.value - 2
  },
  created() {
    this.status = this.status + " -> Mounted"
    this.value = this.value * 2
  },
  mounted() {
    this.status = this.status + " -> Done"
    this.value = this.value / 2
  },
})
```