IIT M FOUNDATION AN4 EXAM QPF4 16 JULY 2023 - 16 Jul 2023

```html
<body>
    <p id = "id1" class = "class1">Content A</p> <!-- Statement 1 -->
    <p id = "id2" class = "class1">Content B</p> <!-- Statement 2 -->
</body>
```

Which of the following statements is correct regarding "<noscript>" tag in HTML?

```javascript
class Person {
    constructor(name) {
        this.name = name;
        this.age = 23;
    }

    static fromJson(obj) {
        let new_obj = new Person(obj.name);
        new_obj.sound = obj.sound;
        return new_obj;
    }
}

result = new Person('Abhi');
console.log(Person.fromJson(JSON.parse(JSON.stringify(result))).constructor.name);
```

```javascript
let x = 50;
const obj1 = {
    x : 10,
    func : function () {
        console.log(this.x)
    }
}

const obj2 = {
    x : 20,
    func : () => {
        function abc () {
            console.log(x, "and", this.x)
            obj1.func.call(this)
        }
        abc()
    }
}

obj2.func()
```

index.html:

```html
<body>
    <div id = "app">
        <ol>
            <li v-for="item in items" :key="item.id">{{ item.name }}</li>
        </ol>
    </div>
</body>
<script src = "app.js"> </script>
```
app.js:

```javascript
const a = new Vue({
    el : '#app',
    data : {
        items: [
            { id: 1, name: 'App Dev I Theory' },
            { id: 2, name: 'App Dev I Project' },
            { id: 3, name: 'App Dev II Theory' },
            { id: 4, name: 'App Dev II Project' }
        ]
    },
})
```

index.html:

```html
<body>
    <div id = "app">
        <ol>
            <li v-for="item in items" :key="item.id">
                <blog-post :post-title = "item.name" :post-content =
"item.message"></blog-post>
            </li>
        </ol>
    </div>
</body>
<script src = "app.js"></script>
```
app.js:

```javascript
Vue.component('blog-post', {
    props: {
        'postTitle' : String,
        'postContent' : String
    },
    template: `
        <div>
            <h3>{{ postTitle }}</h3>
            <p>{{ postContent }}</p>
        </div>
    `
})

const a = new Vue({
    el : '#app',
    data : {
        items: [
            { id: 1, name: 'IITM BS', message: "The World's first
4-year BS degree in DS and Applications"},
            { id: 2, name: 'IITM ES', message: "Learn Electronic
Systems from top-notch IIT Madras faculty"},
            { id: 3, name: 'NPTEL', message: "Online Learning
Initiatives by IITs and IISc"}
        ]
    },
})
```

```javascript
function doSomething(n, ...params) {
  return params
    .map((x) => {
      return x ** n
    })
    .sort()
}

console.log(doSomething(2, 5, 10))
```

```javascript
function coolerPlace({ ...obj }) {
  let tmp = 0
  let cty = null
  Object.entries(obj).forEach((([city, temp]) => {
    if (temp > tmp) {
      cty = city
    }
  }))
  return cty
}
console.log(coolerPlace({ UP: 37, Delhi: 40 }))
```

```javascript
const address1 = {
    state: 'Tamil Nadu',
    city: 'Chennai',
    place: 'IIT Madras',
    getAddress() {
        return `State: ${this.state}, city: ${this.city}, place:${this.place}`
    },
}

const address3 = {
    place: 'Taramani',
    __proto__: address1,
}

console.log(address3.getAddress())
```

```javascript
let x = 1
let y = 2
{
    let x = 4
    let y = 5
}
function outer() {
    function inner() {
        return x + y
    }
    return inner
}
console.log(outer() ())
```

```javascript
function do_something(arr, val){
    var i1 = 0;
    var i2 = arr.length;
    while(i2 > i1){
        var i3 = Math.floor((i1 + i2)/2);
        if(val > arr[i3]){
            i1 = i3 + 1;
        }
        else if(val < arr[i3]){
            i2 = i3;
        }
        else{
            return true;
        }
    }
    return false;
}

result = do_something([3, 6, 34, 39, 48, 56, 78, 87], 40)
console.log(result)
```

```javascript
app.js
new Vue({
  el: '#app',
  template: `<div> The nearest city to you is: {{minDistance}}
</div>`,
  data: {
    userCoordinate: [1, 2],
    allCooridates: [
      { name: 'City1', coodinate: [1, 7] },
      { name: 'City2', coodinate: [2, 4] },
      { name: 'City3', coodinate: [3, 5] },
      { name: 'City4', coodinate: [1, 4] },
    ],
  },
  methods: {
    calculateDistance(x, y) {
      return Math.abs(x[0] - y[0]) + Math.abs(x[1] - y[1])
    },
  },
  computed: {
    minDistance() {
      let minDist = Infinity
      let city = null
      this.allCooridates.forEach((cord) => {
        let d = this.calculateDistance(cord.coodinate,
          this.userCoordinate)
        if (d < minDist) {
          minDist = d
          city = cord.name
        }
      })
      return city
    },
  },
})
```
index.html
```html
<div id="app"></div>
<script
  src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./app.js"></script>
```
Suppose the application is running on http://localhost:8080.
What will be rendered by the browser?

```javascript
app.js
new Vue({
  el: '#app',
  template: `<div>
    <input type='text' v-model='num'></input>
    <div id='lon'>Lucky or not? {{lucky?'Lucky':'Not Lucky'}}</div>
  </div>`,
  data: {
    num: 1,
    prev: 0,
    current: 1,
    lucky: false,
  },
  watch: {
    num(num1, num2) {
      if (num1 == '') {
        return
      }
      this.prev = this.current
      this.current = Number(num1)
      this.current > this.prev ? (this.lucky = true) : (this.lucky =
        false)
    },
  },
})
```
index.html

```html
<div id="app"></div>
<script
  src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./app.js"></script>
```

Suppose the application is running on 'http://localhost:8080'. Suppose the user inputs 7 and then 5. What will be rendered inside the div with id 'lon'?

```javascript
app.js
const Sender = {
  template: '<div> Message: <input type=\'text\'
  v-model=\'message\'></input> </div>',
  data() {
    return {
      message: null,
    }
  },
  watch: {
    message(msg) {
      this.$emit('newmsg', this.message)
    },
  },
}

const Receiver = {
  template: '<div id="msg"> {{msg}} </div>',
  props: ['msg'],
}

new Vue({
  el: '#app',
  template: '<div>
  <Sender @newmsg = \'updateMessage\'/>
  <Receiver :msg=\'message\' />
  </div>',
  data: {
    message: null,
  },
  methods: {
    updateMessage(msg) {
      this.message = msg.split('').reverse().join('').toUpperCase()
    },
  },
  components: {
    Sender,
    Receiver,
  },
})
```
index.html
```html
<div id="app"></div>
<script
  src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./app.js"></script>
```
Suppose the application is running on 'http://localhost:8080'. If the user inputs 'hello' inside the input box, what will be rendered inside the div with ID 'msg'?