IIT M QUIZ 1 FOUNDATION DAD DIPLOMA QPD1 16 Oct 2022 - 16 Oct 2022

THIS IS QUESTION PAPER FOR THE SUBJECT "DIPLOMA LEVEL: MODERN APPLICATION DEVELOPMENT 2"

ARE YOU SURE YOU HAVE TO WRITE EXAM FOR THIS SUBJECT?
CROSS CHECK YOUR HALL TICKET TO CONFIRM THE SUBJECTS TO BE WRITTEN.

(IF IT IS NOT THE CORRECT SUBJECT, PLS CHECK THE SECTION AT THE TOP FOR THE SUBJECTS REGISTERED BY YOU)

index.html:

```html
<div id = "app">
    <h3> Header Content </h3>
    <main></main>
    <h3> Footer Content </h3>
</div>
<script src="app.js"></script>
```

app.js:

```javascript
const main = {
    template : `
        <div>
            <h3> Main Content </h3>
        </div>
    `
}

const comp = {
    'main' : main
}

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

```javascript
var num = 20;

function demo () {
    num = 50;

    function num () {
        console.log("Number is:", num)
    }
}
demo()
console.log("Number is:", num)
```

index.html:

```html
<div id = "app">
    <h3>Number : {{total_num}}</h3>
    <button @click = "update_num"> Click Me </button>
</div>
<script src="app.js"></script>
```

app.js:

```javascript
new Vue({
    el : "#app",
    data : {
        num : 10
    },
    computed : {
        total_num : function () {
            return this.num % 3 == 0 ? this.num * 3 + 5 : this.num / 4 + 6;
        }
    },
    methods : {
        update_num : function () {
            this.num = this.num < 10 ? this.num * 4 + 1 : this.num * 3 - 5;
        }
    }
})
```

```javascript
{
    let x = 10
    {
        let getNum = () => {
            return x + 10
        }
    }
    console.log(getNum())
}
```

```javascript
function outer(x) {
    let a = 2
    function inner(y) {
        function innerMost(z) {
            return x + y + z + a
        }
        return innerMost
    }
    return inner
}
console.log(outer(19)(20)(30))
```

```javascript
let x = 10
var y = 10,
    z = 10
{
    let x = 20
    var y = 20
    function test() {
        var z = 20
    }
}
console.log(x, y, z)
```

```javascript
const obj1 = { x: 10, y: 20 },
obj2 = { x: 30, y: 40 }

function area() {
  return this.x * this.y
}

function test() {
  return area.call(obj2)
}

console.log(test.call(obj1), test.call(obj2))
```

```javascript
class Circle {
  constructor(r) {
    this.r = r
  }
}

Circle.prototype.area = function () {
  return 3.14 * this.r
}

const obj1 = new Circle(2)
console.log(
  Circle.prototype === obj1.__proto__.__proto__,
  Circle.prototype === obj1.__proto__
)
```

index.html:

```html
<html lang="en">
<head>
    <style>
        .dark-mode {
            color: white;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1 :class="{'dark-mode': darkMode}">IITM online degree</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>
```

app.js:

```javascript
new Vue({
    el: '#app',
    name: 'app',
    data: {
        darkMode: false,
    },
    beforeCreate() {
        this.darkMode = true
    },
})
```

```javascript
var num = 10

const obj1 = {
    num : 20,
    func : function (key) {
        let temp = () => {
            console.log("Number 1:", num, "Number 2:", this.num, "Sum:",
            this.num + num + key)
        }
        temp()
    }
}

const obj2 = {
    num : 30,
    func : function (key) {
        console.log("Function Called !!", key)
    }
}

new_func = obj1.func.bind(obj2, 40)
new_func()
```

```javascript
function getY() {
  return () => this.y
}

const Obj1 = {
  y: 15,
  getY: getY,
  obj3: {
    y: 45,
    getY: getY,
  },
}

console.log(Obj1.obj3.getY()(), Obj1.getY()())
```

```html
index.html:
<body>
    <div id="app">
        <h3 id="total">Total: {{total}}</h3>
        <h4 id="strike">{{batsmans.strike.name}}: {{batsmans.strike.run}}</h4>
        <h4 id="non-strike">{{batsmans.nonStrike.name}}:
            {{batsmans.nonStrike.run}}</h4>
        <div>
            <button @click="total+=1">1</button>
            <button @click="total+=2">2</button>
        </div>
    </div>
    <script
        src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <script src="app.js"></script>
</body>

app.js:
class Player {
    constructor(name) {
        this.name = name
        this.run = 0
    }
}

new Vue({
    el: '#app',
    data: {
        batsmans: {
            strike: new Player('Rohit Sharma'),
            nonStrike: new Player('Virat Kohli'),
        },
        total: 30,
    },
    watch: {
        total(newRun, oldRun) {
            change = newRun - oldRun
            this.batsmans.strike.run += change
            if (change % 2 == 0) {
                this.changeStrike()
            }
        },
    },
    methods: {
        changeStrike() {
            temp = this.batsmans.strike
            this.batsmans.strike = this.batsmans.nonStrike
            this.batsmans.nonStrike = temp
        },
    }
})
```

index.html:
```html
<html lang="en">
<head>
    <style>
        .sold {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <Product
            v-for="(product, index) in products"
            :product="product"
            @buy="buy"
            :key="index"
        />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>
```

app.js:
```javascript
const Product = {
    template: `<div :class="{sold:product.sold}">
        <h4>{{product.name}}</h4>
        <h3>Price:{{product.price}}</h3>
        <div><button @click="$emit('buy', product.id)"> Buy </button></div>
    </div>`,
    props: ['product'],
}

new Vue({
    el: '#app',
    components: { Product },
    data() {
        return {
            products: [
                { id: 1, name: 'Watch', price: '200', sold: true },
                { id: 2, name: 'Mobile', price: '4000', sold: true },
            ],
        }
    },
    methods: {
        buy(id) {
            prod = this.products.find((prod) => {
                return prod.id == id
            })
            prod.sold = false
        },
    },
})
```