MAD2 week 2 - 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
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);
});
```

```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]));
```

```python
from flask import Flask, jsonify
from flask_jwt_extended import JWTManager, create_access_token, \
    jwt_required

app = Flask(__name__)
app.config["JWT_SECRET_KEY"] = "secret"
jwt = JWTManager(app)

@app.route("/token")
def token():
    access_token = create_access_token(identity="Ravi")
    return jsonify(access_token=access_token)

@app.route("/dashboard")
@jwt_required()
def dashboard():
    return jsonify(message="Dashboard Access Granted")
```
/token
/dashboard

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();
```

SearchResults
keyword

```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);
```

```
increment
```
mutation
```
incrementAsync
```
action

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

```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
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);
```

```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
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
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);
    },
  },
});
```

```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);
```

```python
from flask import Flask
from flask_caching import Cache
import time

app = Flask(__name__)
app.config['CACHE_TYPE'] = 'SimpleCache'
app.config['CACHE_DEFAULT_TIMEOUT'] = 300

cache = Cache(app)

@cache.memoize(timeout=300)
def compute_data(user_id):
    time.sleep(5)
    return f"Data for user {user_id}"

@app.route('/api/info/<int:user_id>')
def get_info(user_id):
    return compute_data(user_id)
```

```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();
```

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
  },
})
```

```python
@app.route('/api/open')
def open_endpoint():
    return jsonify({'message': 'Open access', 'status': 'success'})

@app.route('/api/secure')
@auth_required('token')
def secure_endpoint():
    return jsonify({'message': 'Secure access', 'status': 'authenticated'})

@app.route('/api/superuser')
@auth_required('token')
@roles_required('superuser')
def superuser_endpoint():
    return jsonify({'message': 'Superuser access', 'status': 'authorized'})
```

```javascript
const obj = {
  value: 100,
  outerFunc: function () {
    const innerFunc = () => {
      console.log(this.value);
    };
    return innerFunc;
  },
  otherFunc: function () {
    console.log(this.value);
  }
};

const func1 = obj.outerFunc();
const func2 = obj.outerFunc;
const func3 = obj.otherFunc;

func1();     // #1
func2()();   // #2
func3();     // #3
```

app.py:
```python
from flask import Flask, jsonify
from datetime import datetime
import time

app = Flask(__name__)

@app.route('/')
def home():
    time.sleep(10)
    return jsonify(datetime.now().second), 200, \
        {'Access-Control-Allow-Origin': '*'}

@app.route('/profile')
def profile():
    time.sleep(30)
    return jsonify(datetime.now().second), 200, \
        {'Access-Control-Allow-Origin': '*'}

if __name__ == "__main__":
    app.run(debug=True)
```
index.html:
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <script>
        function test() {
            const res1 = fetch('http://127.0.0.1:5000')
            const res2 = fetch('http://127.0.0.1:5000/profile')
            res1
                .then((res) => {
                    return res.json()
                })
                .then((data) => {
                    console.log(data)
                })

            res2
                .then((res) => {
                    return res.json()
                })
                .then((data) => {
                    console.log(data)
                })
        }
        test()
    </script>
</body>
</html>
```

```html
<div id="app">
  <h3>Trip Essentials</h3>

  <ul>
    <li v-for="item in packedItems" :key="item">
      {{ item }}
    </li>
  </ul>

  <button @click="packItem('Passport')">Pack Passport</button>
</div>

<script>
  const store = new Vuex.Store({
    state: {
      packed: []
    },
    mutations: {
      ADD_ITEM(state, item) {
        state.packed.push(item);
      }
    }
  });

  new Vue({
    el: "#app",
    store,
    computed: {
      /* Line X */
    },
    methods: {
      packItem(item) {
        /* Line Y */
      }
    }
  });
</script>
```

```python
from flask import Flask, jsonify, request
from flask_jwt_extended import JWTManager, create_access_token, \
    jwt_required, get_jwt_identity

app = Flask(__name__)
app.config["JWT_SECRET_KEY"] = "secret"
jwt = JWTManager(app)

@app.route("/login", methods=["POST"])
def login():
    username = request.json.get("username")
    access_token = create_access_token(identity=username)
    return jsonify(access_token=access_token)

@app.route("/stats")
@jwt_required()
def stats():
    current_user = get_jwt_identity()
    return jsonify(message=f"Welcome {current_user}")
```
/login
```json
{ "username": "Jassi" }
```
/stats

```javascript
export default {
  data() {
    return {
      assignments: []
    }
  },
  created() {
    fetch("/api/assignments")
      .then(res => res.json())
      .then(data => {
        this.assignments = data;
      });
  }
}
```

```
calculate()
```
```
calculate() {
  this.a = this.a + 1;
}
```

```
updated()
```

```javascript
methods: {
  async login() {
    const response = await fetch('/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: this.email, password: this.password })
    });
    const data = await response.json();
    console.log(data.message);
  }
}
```
```python
@app.route('/login', methods=['POST'])
def login():
    email = request.json['email']
    password = request.json['password']
    query = f"SELECT * FROM users WHERE email = '{email}'" \
            f" AND password = '{password}'"
    result = db.execute(query)
    if result:
        return jsonify({"message": "Login successful"})
    return jsonify({"message": "Invalid credentials"})
```

```javascript
const store = new Vuex.Store({
  state: { todos: [] },
  mutations: {
    addTodo(state, todo) { state.todos.push(todo) }
  },
  actions: {
    async addTodoAsync({ commit }, todo) {
      commit('addTodo', { text: todo, done: false });
      return 'done';
    }
  }
});

store.dispatch('addTodoAsync', 'Learn Vuex')
  .then(msg => console.log(msg));

console.log(store.state.todos.length);
```

```javascript
const ProductList = {
  template: `<div>{{ filteredProducts }}</div>`,
  data() {
    return {
      allProducts: [
        { id: 1, name: 'Laptop', category: 'electronics' },
        { id: 2, name: 'Novel', category: 'books' },
        { id: 3, name: 'Phone', category: 'electronics' }
      ],
      displayedProducts: null
    }
  },
  computed: {
    filteredProducts() {
      return this.allProducts.filter(p => p.category ===
        this.$route.params.category);
    }
  },
  watch: {
    '$route.params.category': function(newCategory) {
      this.displayedProducts = this.filteredProducts;
    }
  }
}
```

```javascript
function task(value) {
  return new Promise((resolve, reject) => {
    if (value > 5) {
      resolve(value + 2);
    } else {
      reject(value - 2);
    }
  });
}

async function execute() {
  try {
    const a = await task(7);
    const b = await task(a - 4);
    return a + b;
  } catch (err) {
    return err;
  }
}

execute().then(result => console.log(result));
```

```javascript
const store = new Vuex.Store({
  state: {
    users: [
      { id: 1, name: 'Alice', status: 'active', role: 'admin' },
      { id: 2, name: 'Bob', status: 'inactive', role: 'user' },
      { id: 3, name: 'Charlie', status: 'active', role: 'user' }
    ]
  },
  getters: {
    activeUsers(state) {
      return state.users.filter(user => user.status === 'active');
    },
    activeUserCount(state, getters) {
      return getters.activeUsers.length;
    },
    adminUsers(state) {
      return state.users.filter(user => user.role === 'admin');
    }
  },
  mutations: {
    updateUserStatus(state, { userId, status }) {
      const user = state.users.find(u => u.id === userId);
      if (user) {
        user.status = status;
      }
    }
  }
});
```