Modern Application Development Ii 06 Apr 26 - 12 Apr 2026

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

| Concept / Issue | Description |
|---|---|
| A. "Chatty" nature of REST APIs | 1. Static HTML is enhanced with event handlers after initial page load |
| B. Limitation of REST as a query mechanism | 2. May require multiple API calls to fetch data for a single view |
| C. JavaScript Hydration | 3. Focuses on decoupling storage, logic, and presentation using APIs |
| D. JAMStack approach | 4. Does not allow clients to specify exactly what data is required in one request |

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

```html
<button id="btn1" data-action="delete" data-id="42">Delete</button>
```
```javascript
const btn = document.getElementById('btn1');
const id = btn.dataset.id;
const action = btn.getAttribute('data-action');
```

```javascript
function inventory() {
  const weapon = { name: "Sword", stats: { damage: 10 } };

  const alias1 = weapon;
  const alias2 = { ...weapon };
  const alias3 = { name: weapon.name, stats: { ...weapon.stats } };

  alias1.name = "Shield";
  alias2.stats.damage = 99;
  alias3.stats.damage = 42;

  console.log(weapon.name);
  console.log(weapon.stats.damage);
  console.log(alias2.stats.damage);
  console.log(alias3.stats.damage);
}

inventory();
```

```javascript
const obj = {
  val: 42,
  outer: function() {
    const inner = () => {
      console.log(this.val);
    };
    return inner;
  },
  alt: function() {
    console.log(this.val);
  }
};

const fn1 = obj.outer();
const fn2 = obj.outer;
const fn3 = obj.alt;

fn1(); // #1
fn2()(); // #2
fn3(); // #3
```

```javascript
const player = {
  template: `<div>
    <h1> Name: {{ name }}</h1>
    <router-view />
  </div>`,
  props: ['name'],
}

const test = {
  template: '<div><h1> Test Runs: {{ runs }} </h1></div>',
  data() {
    return { runs: 5000 }
  },
}

const oneDay = {
  template: '<div><h1> Oneday Runs: {{ runs }} </h1></div>',
  data() {
    return { runs: 10000 }
  },
}

const routes = [
  {
    path: '/player/:name',
    component: player,
    children: [
      { path: '', component: oneDay },
      { path: 'test', component: test },
      { path: 'oneday', component: oneDay },
    ],
    props: true,
  },
  { path: '*', component: test },
]
const router = new VueRouter({
  routes,
  base: '/',
})

const app = new Vue({
  el: '#app',
  router
})
```
```html
<div id="app">
  <router-view></router-view>
</div>
<script src="app.js"></script>
```

```html
<div id="app">
  <router-view></router-view>
</div>
```
```javascript
const Waterfall = {
  template: `<p>{{ result }}</p>`,
  data() {
    return {
      districts: [
        { district: "Satara", waterfall: "Vajrai Waterfall" },
        { district: "Shivamogga", waterfall: "Kunchikal Waterfalls" },
        { district: "South Goa", waterfall: "Dudhsagar Falls" },
        { district: "Rewa", waterfall: "Bahuti Falls" }
      ],
      result: ""
    };
  },
  created() {
    const letter = this.$route.params.alpha.toLowerCase();

    for (let i = 0; i < this.districts.length; i++) {
      if (this.districts[i].waterfall[0].toLowerCase() === letter) {
        this.result = this.districts[i].district;
        break;
      }
    }
  }
};

const router = new VueRouter({
  routes: [
    {
      path: "/:alpha",
      component: Waterfall
    }
  ]
});

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

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

```html
<div id="app">
  <child-comp (Code1)></child-comp>
  <p>{{ message }}</p>
</div>
```
```javascript
Vue.component("child-comp", {
    template: `<button @click="send">Click</button>`,
    methods: {
        send() {
            (Code2)
        }
    }
});

new Vue({
    el: "#app",
    data: {
        message: "Waiting..."
    },
    methods: {
        updateMessage(msg) {
            this.message = msg;
        }
    }
});
```

```html
<div id="app">
  <p v-if="isVisible">Hello</p>
  <p v-show="isVisible">World</p>
  <button @click="toggle">Toggle</button>
</div>
```
```javascript
new Vue({
  el: "#app",
  data: {
    isVisible: false
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
});
```