MAD2 week 3 - real exam questions

```json
{
  "name": "my-vue-app",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-service": "^5.0.0",
    "babel-eslint": "^10.1.0"
  }
}
```
```
npm run build
```

```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
console.log(typeof setTimeout)
console.log(typeof document)
```

```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
mounted() {
  const storedToken = localStorage.getItem('userToken');
  if (storedToken) {
    this.validateToken(storedToken)
      .then(user => {
        this.user = user;
        this.isAuthenticated = true;
      })
      .catch(err => {
        localStorage.removeItem('userToken');
        this.isAuthenticated = false;
      });
  }
}
```

```javascript
function addItemToCart(item) {
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    cart.push(item);
    localStorage.setItem('cart', JSON.stringify(cart));
}

function getCartItems() {
    return localStorage.getItem('cart') || [];
}

addItemToCart({ id: 1, name: 'Laptop' }.name);

console.log(getCartItems());
```

```html
<div id="app">
  <my-comp>
    <h3>Exploring Vue Js</h3>

    <slot v-slot:last>
      <h3>Learning App Dev 2</h3>
    </slot>
  </my-comp>
</div>
```
```javascript
const MyComp = {
  name: 'my-comp',
  props: ['tech'],
  template: `
    <div class="container">
      <slot name="complete">
        <h3>Learned DBMS</h3>
      </slot>

      <slot>
        Exploring Frontend
      </slot>

      <slot name="last"></slot>
    </div>
  `
};

const app = new Vue({
  el: '#app',
  components: {
    MyComp
  }
});
```

Code:
```javascript
const setTheme = (theme) => {
  localStorage.setItem('theme', theme);
  console.log('Theme set to:', theme);
};

const getTheme = () => {
  return localStorage.getItem('theme') || 'light';
};

setTheme('dark');
console.log(getTheme());
```

```javascript
const saveToken = (token) => {
  sessionStorage.setItem('authToken', token);
};

const getToken = () => {
  return sessionStorage.getItem('authToken') || null;
};
```

Consider the following JavaScript code running in a browser:

```javascript
localStorage.setItem('score', '10');
sessionStorage.setItem('multiplier', '3');

for (let i = 0; i < 2; i++) {
    let score = localStorage.getItem('score');
    let multiplier = sessionStorage.getItem('multiplier');

    score = score + 5;
    multiplier = multiplier * 2;

    localStorage.setItem('score', score);
    sessionStorage.setItem('multiplier', multiplier);
}

console.log(localStorage.getItem('score'));
console.log(sessionStorage.getItem('multiplier'));
```

What will be the output in the browser console?

Given the Flask app:

```python
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "http://localhost:3000"}})

@app.route('/api/data')
def data():
    return {"msg": "Success"}
```

frontend code:

```javascript
fetch("http://localhost:5000/api/data")
    .then(res => res.json())
    .then(data => console.log(data));
```

What will happen when run from a Vue app hosted at http://localhost:5173?

Consider the below CORS enabled flask app.

```python
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "http://localhost:5000"}})

@app.route("/api/data")
def data():
    return {"message": "Hello from Flask"}
```

If a Vue.js frontend (simulation given below) at "http://localhost:3000" tries to fetch data, what will happen?

```javascript
fetch("http://localhost:5000/api/data")
    .then(response => response.json())
    .then(data => console.log(data));
```

script.js
```javascript
const app1 = new Vue({
  el: '#app1',
  data: {
    value1: "VueJS",
    value2: "Frontend"
  }
})
const app2 = new Vue({
  el: '#app2',
  data: {
    value3: "JavaScript"
  }
})
```

index.html
```html
<div id="app2">
  {{value1}}
  <div id="app1">
    {{value2}}
  </div>
  {{value3}}
</div>
<script src="./script.js"></script>
```

index.html
```html
<div id="app">
    <my-comp>
        <slot>Hello Frontend</slot>
        <slot>Hello VueJS</slot>
    </my-comp>
</div>
<script src="script.js"></script>
```

script.js
```javascript
const myComp = {
    template: `
        <div>
            <slot></slot>
            <slot></slot>
        </div>
    `
}

const app = new Vue({
    components: {
        "my-comp": myComp
    }
}).$mount('#app')
```

```
{
  token: 112,
  userRole: "manager"
}
```

Consider the following JavaScript code.

```javascript
export default {
  data() {
    return {
      loginToken: '',
    };
  },
  mounted() {
    this.loginToken = sessionStorage.getItem('authToken') || '';
  },
  methods: {
    updateToken(newToken) {
      this.loginToken = newToken;
      sessionStorage.setItem('authToken', newToken);
    }
  }
};
```

What will happen when a user calls the updateToken method with a new value and then refreshes the page?

Consider the below flask SSE implementation.

```python
from flask import Flask, Response
import time

app = Flask(__name__)

def event_stream():
    for i in range(5):
        yield f"data: Message {i}"
        time.sleep(1)

@app.route('/events')
def sse():
    return Response(event_stream(), mimetype="text/event-stream")
```

And the Vue.js frontend:

```html
<template>
  <div>
    <p v-for="msg in messages" :key="msg">{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return { messages: [] };
  },
  mounted() {
    const eventSource = new EventSource("http://localhost:5000/events");
    eventSource.onmessage = (event) => {
      this.messages.push(event.data);
    };
  },
};
</script>
```

What will happen when a user opens this page?

Consider the following Vue apps in script.js and the index.html file.

script.js

```javascript
const app1 = new Vue({
  el: '#app1',
  data: {
    value1: "VueJS",
    value2: "Frontend"
  }
})

const app2 = new Vue({
  el: '#app2',
  data: {
    value3: "JavaScript"
  }
})
```

index.html

```html
<div id="app2">
  {{value1}}
  <div id="app1">
    {{value2}}
  </div>
  {{value3}}
</div>
<script src="./script.js"></script>
```

What will be rendered on the browser?

Consider the following Vue App and the HTML document given below.

index.html
```html
<div id="app">
  <my-comp>
    <slot>Hello Frontend</slot>
    <slot>Hello VueJS</slot>
  </my-comp>
</div>
<script src="script.js"></script>
```

script.js
```javascript
const myComp = {
  template: `
    <div>
      <slot></slot>
      <slot></slot>
    </div>
  `
}

const app = new Vue({
  components: {
    "my-comp": myComp
  }
}).$mount('#app')
```

What will be the output on the browser?

```json
{
  "token": 112,
  "userRole": "admin"
}
```

What distinguishes a Progressive Web App (PWA) from a traditional web application?

Consider the below Vue.js application.

```html
<template>
  <div>
    <button @click="goToPage('Home')">Go to Home</button>
    <button @click="goToPage('About')">Go to About</button>
    <button @click="goToPage('Contact')">Go to Contact</button>

    <div v-if="visitedPages.length">
      <h3>Visited Pages:</h3>
      <ul>
        <li v-for="(page, index) in visitedPages" :key="index">{{ page }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visitedPages: []
    };
  },
  mounted() {
    const storedPages = JSON.parse(sessionStorage.getItem('visitedPages')) || [];
    this.visitedPages = storedPages;
  },
  methods: {
    goToPage(page) {
      this.visitedPages.push(page);
      sessionStorage.setItem('visitedPages',
        JSON.stringify(this.visitedPages));
      this.$router.push(`/${page.toLowerCase()}`);
    }
  }
};
</script>
```

Consider the below Vue.js application.

```html
<template>
  <div>
    <input v-model="name" placeholder="Enter name">
    <input v-model="email" placeholder="Enter email">
    <button @click="submitForm">Submit</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  },
  mounted() {
    if (localStorage.getItem('formData')) {
      const savedData = JSON.parse(localStorage.getItem('formData'));
      this.name = savedData.name;
      this.email = savedData.email;
    }
  },
  watch: {
    name(newVal) {
      localStorage.setItem('formData', JSON.stringify({ name: newVal, email: localStorage.email }));
    },
    email(newVal) {
      localStorage.setItem('formData', JSON.stringify({ name: localStorage.name, email: newVal }));
    }
  },
  methods: {
    submitForm() {
      localStorage.removeItem('formData');
      this.name = '';
      this.email = '';
    }
  }
};
</script>
```

What will happen if the user submits the form and reloads the page?

Consider the following Vue2 app and the index file given below.

index.html

```html
<body>
    <div id="app">
        <h4>{{ state }}</h4>
    </div>
    <script
        src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"
    ></script>
    <script src="./script.js"></script>
</body>
</html>
```

script.js

```javascript
const app = new Vue({
    el: '#app',
    data: {
        terminal: ['3', '2', '1'],
        curr_status: ["arrived", "departed", "delayed"]
    },
    computed: {
        state: () => {
            return `The flight 103 has ${this.curr_status[1]} from terminal ${this.terminal[2]}.`
        }
    }
})
```

What will be the output on the browser?

Consider the following Vue App and the HTML document given below.

index.html
```html
<body>
    <div id="app">
        <my-comp>
            <h3>Exploring Vue JS</h3>
            <template v-slot:ongoing>
                <h3>Learning App Dev 2</h3>
            </template>
        </my-comp>
    </div>
    <script src="./script.js"></script>
</body>
```

script.js
```javascript
const MyComp = {
    name: 'my-comp',
    props: ['tech'],
    template: `<div class="container">
        <slot name="complete"><h3>Learned DBMS</h3></slot>
        <slot name="ongoing"></slot>
        <slot>Exploring Frontend</slot>
    </div>`
}

const app = new Vue({
    el: '#app',
    components: {
        MyComp
    }
})
```

What will be rendered on the browser for code setup given above?

Consider the following JavaScript code.

```javascript
function addItemToCart(item) {
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  cart.push(item);
  localStorage.setItem('cart', JSON.stringify(cart));
}

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

addItemToCart({ id: 1, name: 'Laptop' }.name);
console.log(getCartItems());
```

The above code is initially loaded on the browser and then the browser is refreshed two times.
What will be the final output?

Consider the below Vue component.

```javascript
export default {
  data() {
    return {
      userName: '',
    };
  },
  mounted() {
    this.userName = sessionStorage.getItem('userName') || '';
  },
  watch: {
    userName(newVal) {
      sessionStorage.setItem('userName', newVal);
    }
  }
};
```

What will happen when the user enters a new value for "userName" and refreshes the page?

Consider the below Vuex implementation.

```javascript
const store = new Vuex.Store({
  state: {
    token: sessionStorage.getItem('authToken') || null
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
      sessionStorage.setItem('authToken', token);
    },
    clearToken(state) {
      state.token = null;
      sessionStorage.removeItem('authToken');
    }
  },
  actions: {
    login({ commit }, token) {
      commit('setToken', token);
    },
    logout({ commit }) {
      commit('clearToken');
    }
  }
});
```

After the user logs in with a token and refreshes the page, what will happen to the Vuex state and the session storage?

Consider the below Vue component.

```html
<template>
  <div>
    <button @click="setDarkMode">Dark Mode</button>
    <button @click="setLightMode">Light Mode</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: localStorage.getItem('theme') || 'light'
    };
  },
  methods: {
    setDarkMode() {
      this.theme = 'dark';
      localStorage.setItem('theme', 'dark');
    },
    setLightMode() {
      this.theme = 'light';
      localStorage.setItem('theme', 'light');
    }
  }
};
</script>
```

Which of the following statement(s) is/are correct about the behavior of the above component?

Consider the following JavaScript code snippet.

```javascript
// Code Snippet 1
sessionStorage.setItem('username', 'course_user');
let storedUsername = sessionStorage.getItem('username');

// Code Snippet 2
sessionStorage.removeItem('username');
let removedUsername = sessionStorage.getItem('username');

// Code Snippet 3
sessionStorage.clear();
let clearedStorage = sessionStorage.username;
```

What will be the values of 'storedUsername', 'removedUsername', and 'clearedStorage' after the execution of the above code snippets?

```html
<div id="app">
  <input v-model="newItem" placeholder="Add an item" />
  <button @click="addItem">Add</button>

  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index + 1 }}. {{ item }}
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      newItem: '',
      items: ['Apple', 'Banana']
    },
    methods: {
      addItem() {
        if (this.newItem) {
          this.items.push(this.newItem, this.newItem);
          this.newItem = '';
        }
      }
    }
  });
</script>
```

```javascript
localStorage.setItem('counter', '0');
sessionStorage.setItem('total', '5');

for (let i = 0; i < 3; i++) {
    let counter = localStorage.getItem('counter');
    let total = sessionStorage.getItem('total');

    counter += 2;
    total *= 2;

    localStorage.setItem('counter', counter);
    sessionStorage.setItem('total', total);
}

sessionStorage.clear();

console.log(localStorage.getItem('counter'));
console.log(sessionStorage.getItem('total'));
```

src/store/index.js:
```javascript
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    value: "",
  },
  mutations: {
    setValue(state, payload) {
      state.value = payload;
    }
  },
  actions: {
    async fetchValue({ commit }) {
      // Simulate async API call
      const response = await new Promise(resolve => setTimeout(() => 
        resolve('API Value'), 500));
      commit('setValue', response);
    }
  }
});
```
src/App.vue:
```html
<template>
  <div>
    <p>{{ value }}</p>
    <button @click="updateValue">Update Value</button>
  </div>
</template>

<script>
export default {
  computed: {
    value() {
      return this.$store.state.value;
    },
  },
  methods: {
    async updateValue() {
      await this.$store.dispatch('fetchValue');
    },
  },
};
</script>
```
After running "npm run serve", if you click the "Update Value" button, what will be displayed in the `<p>` tag?

Consider the following Vue application with markup "index.html" and JavaScript file "app.js".

index.html:

```html
<div id = "app">
    <input v-model = "phrase" @input = "compute_marks">
    <p>{{marks}}</p>
</div>
<script scr = "app.js"></script>
```

app.js:

```javascript
new Vue({
    el : "#app",
    data : {
        phrase : "AppDev",
        marks : 50,
    },

    mounted() {
        this.phrase = "Bravo";
        this.marks = 50;

        if (localStorage.marks) {
            this.phrase += "2";
            this.marks = parseInt(localStorage.marks) + 20;
        }
        else {
            this.phrase += "1";
            this.marks += 10;
        }
    },

    methods : {
        compute_marks() {
            localStorage.setItem("phrase", this.phrase);
            localStorage.setItem("marks", this.marks + 10);
        }
    }
})
```

Suppose you open "index.html" file in a browser, and type the text "Hurray" in the text box shown (after removing the previous text, if any), and hard refresh the page 7 times, without clicking anywhere. What will be the value shown in the text box, and the "marks" placeholder, respectively?

Tip: The "oninput" event occurs immediately after the value of an element has changed.

Consider the following Vue application with markup index.html and JavaScript file app.js.
File: index.html

```html
<div id = "app">
    <div>Welcome to Frontend Development</div>
    <new>Vue is a Frontend Framework</new>
</div>
<script src="script.js"></script>
```

File: script.js

```javascript
Vue.component('new', {
    template : `<div>
        <slot>Vue is JS Framework</slot>
        <div>Learn Vue 2 and Vue 3</div>
    </div>`
});

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

What will be rendered on the browser screen?

Consider the following Vue application with markup "index.html" and JavaScript file "app.js".

index.html:

```html
<div id = "app">
  <input v-model = "subject" @input = "compute_marks">
  <p> {{marks}} </p>
</div>
<script scr = "app.js"></script>
```

app.js:

```javascript
new Vue({
  el : "#app",
  data : {
    subject : "AppDev",
    marks : 50,
  },

  mounted () {
    this.subject = "AppDev";
    this.marks = 50;
    if (localStorage.marks) {
      this.subject += "1";
      this.marks = parseInt(localStorage.marks) + 20;
      localStorage.marks = this.marks;
      localStorage.subject = this.subject;
    }
    else {
      this.subject += "2";
      this.marks += 20;
    }
  },

  methods : {
    compute_marks() {
      localStorage.setItem("subject", this.subject);
      localStorage.setItem("marks", this.marks + 10);
    }
  }
})
```

Suppose you open "index.html" file in a browser, and type the text "EndTermExam" in the text box shown (after removing the previous text, if any), and hard refresh the page thrice, without clicking anywhere. What will be the value shown in the text box, and the "marks" placeholder, respectively?

```javascript
// Code Snippet 1
sessionStorage.setItem('username', 'course_user');
let storedUsername = sessionStorage.getItem('username');

// Code Snippet 2
sessionStorage.removeItem('username');
let removedUsername = sessionStorage.getItem('username');

// Code Snippet 3
sessionStorage.clear();
let clearedStorage = sessionStorage.username;
```

index.html:
```html
<div id = "app">
    <input v-model = "course" @input = "do_something">
    <p> {{role}} </p>
</div>
```
app.js:
```javascript
new Vue({
    el : "#app",
    data : {
        course : "#app",
        role : "user",
    },

    mounted () {
        try {
            this.course = localStorage.getItem("course").split(" ")[0];
            this.role = localStorage.getItem("course").split(" ")[1];
            localStorage.setItem("course",
                localStorage.getItem("course").split(" ")[0] + " " +
                this.course);
        }
        catch {
            this.course = "MAD_II";
            this.role = "admin";
        }
    },

    methods : {
        do_something() {
            localStorage.setItem("course", this.course);
            localStorage.setItem("role", this.role);
        }
    }
})
```

Filename: index.html
```html
<body>
    <div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
    <script src="app.js"></script>
</body>
```

Filename: app.js
```javascript
const records = {
    1: {albums: "Heartrisers", songs: 20, genre: 4},
    2: {albums: "Pianobind", songs: 13, genre: 5}
}

const notFound = { template: `<h1>Unknown record!</h1>` }
const myRecords = {
    template: `<h1>{{record.albums}} has {{record.songs}} songs across
    {{record.genre}} genres.</h1>`,

    data() {
        return {record: records[this.$route.params.id]}
    },
}

const router = new VueRouter({
    routes: [
        { path: '/records/:id', component: myRecords },
        { path: '*', component: notFound },
    ],
})

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

Consider the following Vue application with markup index.html and JavaScript
app.js

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

app.js
```javascript
new Vue({
    el: '#app',
    template: `
    <div>
        {{text}}
        <div>
            <input type="text" v-model="userInput" />
            <div id="match">
                {{hasMatched?"Not Matched":"Matched"}}
            </div>
        </div>
    </div>`,
    data: {
        text: 'This is text',
        userInput: null,
    },
    computed: {
        hasMatched() {
            return this.text.startsWith(this.userInput)
        },
    },
})
```

Suppose the application is running on "http://localhost:8080/". If the User inputs "This" in the input box. What will be rendered inside the div with id "match"?

```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?

index.html:
```html
<div id="app"></div>
<script
  src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script
  src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
<script src="app.js" type="module"></script>
```

app.js:
```javascript
const data = {
  1: { totalRun: 1000, totalMatches: 20 },
  2: { totalRun: 7000, totalMatches: 100 },
}
const NotFound = { template: '<div> Player Not Found</div>' }
const Profile = {
  template: `<div>Run: {{ {stat.totalRun}}, Matches:
{{stat.totalMatches}}, Average: {{average}}</div>`,
  data() {
    return {
      stat: data[this.$route.params.id],
    }
  },
  computed: {
    average() {
      return this.stat.totalRun / this.stat.totalMatches
    },
  },
}
const router = new VueRouter({
  routes: [
    { path: '/profile/:id', component: Profile },
    { path: '*', component: NotFound },
  ],
})
new Vue({
  el: '#app',
  template: '<div><router-view /></div>',
  router,
})
```

Suppose the application is running on "http://127.0.0.1:8080". What will be rendered inside the "router-view" component for the URL "http://127.0.0.1:8080/#/player"?