IIT M IMPROVEMENT AN EXAM ADI4 24 Dec 2023 - 24 Dec 2023

Suppose an application is loaded from an origin "https://abc.com". Which of the following origins will result in a CORS error, while making a fetch call, by default?

```javascript
function goUpDown(num) {
  return new Promise((res, rej) => {
    setTimeout(() => {
      if (num < 20) {
        return num > 10 ? res('Go Up') : res('Go Down')
      } else {
        return rej('Number Too Large')
      }
    }, 1000)
  })
}

async function getData() {
  const data3 = await goUpDown(8)
  const data2 = await goUpDown(15)
  const data1 = await goUpDown(12)
}

getData().then(
  (data) => {
    console.log(data)
  },
  (err) => {
    console.log(err)
  }
)
```

What will be logged on to console, if executed?

```javascript
async function getResponse(url) {
  try {
    const response = await fetch(url)
    try {
      const data = await response.json()
      if (response.ok) {
        return data
      } else {
        return response.status
      }
    } catch {
      return 'Network Error'
    }
  } catch {
    return 'Response is not json'
  }
}

getResponse('url').then((data) => {
  console.log(data)
})
```

```javascript
async function getResponse(url) {
  try {
    const response = await fetch(url)
    try {
      const data = await response.json()
      if (response.ok) {
        return data
      } else {
        return response.status
      }
    } catch {
      return 'Network Error'
    }
  } catch {
    return 'Response is not json'
  }
}

getResponse('url').then((data) => {
  console.log(data)
})
```

```javascript
class Tshirt {
  constructor(size, price) {
    this.size = size
    this.price = price
  }
}

class LargeTshirt extends Tshirt {
  constructor() {
    super('large', 500)
  }
}

class MediumTshirt extends Tshirt {
  constructor() {
    super('medium')
  }
}

class Order {
  constructor(item, count) {
    this.item = item
    this.count = count
  }

  totalPrice() {
    try {
      return this.item.price * this.count
    } catch {
      return 'Some Error'
    }
  }
}

const t1 = new MediumTshirt()
const order = new Order(t1, 5)
console.log(order.totalPrice())
```

```javascript
app.js
new Vue({
  el: '#app',
  template: `<div>
    <div v-for="item in items">
      Name: {{item.name}},Count:{{item.count}}, Price:
      {{item.price*item.count}}
      <button @click="inscreeseCount (item)">Increase Count</button>
      <button @click="addToCart(item)">Add To Cart</button>
    </div>
    Total Amount: {{amount}} <button @click="buy"> Buy </button>
  </div>`,
  data: {
    cart: [],
    totalAmount: 50,
    items: [
      { name: 'Apple', count: 1, price: 10},
      { name: 'Orange', count: 1, price: 5},
    ],
  },
  methods: {
    buy() {
      if (this.amount > this.totalAmount) {
        console.log('Failure')
      } else {
        console.log('Success')
        this.cart = []
      }
    },
    inscreeseCount (item) {
      item.count += 2
    },
    addToCart (item) {
      this.cart.push(item)
    },
  },
  computed: {
    amount() {
      let total = 0
      this.cart.forEach((item) => {
        total += item.count * item.price
      })
      return total
    },
  },
})
```
index.html
```html
<body>
    <div id="app"></div>
</body>
```

Suppose the application is running on "http://127.0.0.1:8080/". If the user clicks on "Increase Count" and "Add to cart" button associated with the item name "Apple" once. Then user clicks on "Increase Count" and "Add to cart" button associated with the item name "Orange" once and then clicks on the button "Buy". What will be logged on to console?

app.js
```javascript
const Error = {
    template: `<div>Result Not Found</div>`,
}

const Dashboard = {
    template: `<div> This is dashboard of {{user}}</div>`,
    props: ['user'],
}

const routes = [
    { path: '/dashboard/:user', component: Dashboard, props: true },
    { path: '*', component: Error },
]

const router = new VueRouter({
    routes,
})

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

index.html
```html
<body>
    <div id="app"></div>
</body>
```
What will be rendered by the browser for the URL http://127.0.0.1:8080/#/dashboard/7"?

app.js
```javascript
const Home = {
  template: `<div>
    <slot name="navbar"> This is navbar</slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>`,
}

new Vue({
  el: '#app',
  template: `<Home>
    <template slot="footer">This is Footer</template>
    <template slot="navbar"> This is header</template>
    <div>Welcome to exam</div>
  </Home>`,
  components: {
    Home,
  },
})
```

index.html
```html
<body>
  <div id="app"></div>
</body>
```

Suppose the application is running on “http://127.0.0.1:8080/”. What will be rendered by the browser for the URL “http://127.0.0.1:8080/”?

app.py
```python
from flask import Flask
from flask_caching import Cache
from time import sleep

config = {
    "CACHE_TYPE": "RedisCache",
    "CACHE_REDIS_HOST": "localhost",
    "CACHE_REDIS_PORT": 6379,
    "CACHE_REDIS_DB": 1
}

app = Flask(__name__)
app.config.from_mapping(config)
cache = Cache(app)

@app.get('/')
@cache.cached(timeout=40)
def home():
    sleep(30)
    return "hello world"

if __name__ == "__main__":
    app.run(debug=True)
```
Suppose the application is running on "http://localhost:5000". If user1
visits the URL "http://localhost:5000" and after 3 minutes user2 visits the same URL.
What will be the approx difference between the response time for user1 and user2?

Consider the below javascript program.

```javascript
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), (i+1)*1000);
}
```

What will be the output of the above program, if executed? Also, predict the minimum number of seconds the program will take to complete the execution?

```javascript
async function func() {
  const num = await Promise.resolve(2);
  console.log("Second");
  return num;
}

console.log("First");
func().then((data) => console.log(data));
console.log("Third");
```

```javascript
class TShirt {
  constructor(size, price) {
    this.size = size
    this.price = price
  }
}

class LargeTShirt extends TShirt {
  constructor() {
    super('large', 500)
  }
}

class MediumTShirt extends TShirt {
  constructor() {
    super('medium')
  }
}

class Order {
  constructor(item, count) {
    this.item = item
    this.count = count
  }

  totalPrice() {
    try {
      return this.item.price * this.count * 2
    } catch {
      return 'Some Error'
    }
  }
}

const tl = new LargeTShirt()
const order = new Order(tl, 5)
console.log(order.totalPrice())
```

```javascript
app.js
new Vue({
  el: '#app',
  template: `<div>
    <div v-for="item in items">
      Name:{{item.name}},Count:{{item.count}}, Price:
      {{item.price*item.count}}
      <button @click="inscreeseCount(item)">Increase Count</button>
      <button @click="addToCart(item)">Add To Cart</button>
    </div>
    Total Amount: {{amount}} <button @click="buy"> Buy </button>
  </div>`,
  data: {
    cart: [],
    totalAmount: 50,
    items: [
      { name: 'Apple', count: 1, price: 10},
      { name: 'Orange', count: 1, price: 5},
    ],
  },
  methods: {
    buy() {
      if (this.amount > this.totalAmount) {
        console.log('Failure')
      } else {
        console.log('Success')
        this.cart = []
      }
    },
    inscreeseCount(item) {
      item.count += 2
    },
    addToCart(item) {
      this.cart.push(item)
    },
  },
  computed: {
    amount() {
      let total = 0
      this.cart.forEach((item) => {
        total += item.count * item.price
      })
      return total
    },
  },
})
```
index.html
```html
<body>
    <div id="app"></div>
</body>
```

Suppose the application is running on "http://127.0.0.1:8080". Suppose the user clicks on "Increase Count" button associated with the item name "Apple" 5 times and then clicks on "Increase Count" button associated with the item name "Orange" once and then clicks on the button "Buy". What will be logged on to console?

app.js
```javascript
const Error = {
  template: `<div>Result Not Found</div>`,
}

const Dashboard = {
  template: `<div> This is dashboard of {{user}}</div>`,
  props: ['user'],
}

const routes = [
  { path: '/dashboard/:user', component: Dashboard, props: true },
  { path: '*', component: Error },
]

const router = new VueRouter({
  routes,
})

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

index.html
```html
<body>
  <div id="app"></div>
</body>
```

Suppose the application is running on “http://127.0.0.1:8080/”. What will be rendered by the browser for “http://127.0.0.1:8080/#/user”?

app.py
```python
from flask import Flask
from flask_caching import Cache
from time import sleep

config = {
    "CACHE_TYPE": "RedisCache",
    "CACHE_REDIS_HOST": "localhost",
    "CACHE_REDIS_PORT": 6379,
    "CACHE_REDIS_DB": 1
}

app = Flask(__name__)
app.config.from_mapping(config)
cache = Cache(app)

@app.get('/')
@cache.cached(timeout=40)
def home():
    sleep(30)
    return "hello world"

if __name__ == "__main__":
    app.run(debug=True)
```
Suppose the application is running on "http://localhost:5000". If user1 visits the URL "http://localhost:5000" and after 50 seconds user2 visits the same URL. What will be the approx difference between the response time for user1 and user2?

```javascript
var first = 1;
obj1 = {
    'first' : 2,
    'second' : function some () {
        console.log(this.first);
    }
}
obj2 = {
    'first' : 3,
    'second' : () => {
        console.log("Function Invoked !!");
        this.second();
    }
}
obj2.second();
```

```javascript
exams = ['Jan 2023', 'May 2023', 'Sep 2023']

new Promise((rej, res) => {
    let count = 2
    let a = setInterval(() => {
        count += 3;
        const last = exams.pop();
        if (count % 2) {
            exams.push('May 2023')
        }

        else if (count % 5 == 0) {
            clearInterval(a);
            rej(last);
        }
    }, 1000)
}).then(d => console.log("Resolved", exams, d))
  .catch(e => console.log("Rejected", exams, d))
```

index.html:

```html
<div id = "app">
  <input v-model = "name" @input = "do_something">
  <p> {{age}} </p>
</div>
<script scr = "app.js"></script>
```

app.js:

```javascript
new Vue({
  el : "#app",
  data : {
    name : "#app",
    age : 0,
  },

  mounted () {
    try {
      this.name = localStorage.getItem("name").split(" ")[0];
      this.age = localStorage.getItem("name").split(" ")[1];
      localStorage.setItem("name",
        localStorage.getItem("name").split(" ")[0] + " " + this.name);
    }
    catch {
      this.name = "Default";
      this.age = "Default";
    }
  },

  methods : {
    do_something() {
      localStorage.setItem("name", this.name);
      localStorage.setItem("age", this.age);
    }
  }
})
```

```javascript
const store= new Vuex.Store({
    state:{
        student_total:0,
        students:[
            {
                name : 'Akshay',
                marks : 52
            },
            {
                name : 'Vishwajeet',
                marks : 78
            },
            {
                name : 'Sonali',
                marks : 43
            }
        ],
        below_average:[]
    },
    code1:{
        belowAverageStudents(state){
            code2
        }
    }
})
```