Skip to content

Task Completed #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 14, 2024
Merged

Task Completed #1

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
88eb937
Task Completed
Gopika4112 Apr 13, 2024
dcb82b8
Merge branch 'main' into main
Dexters-Hub Apr 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 29 additions & 20 deletions sandbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,24 @@
<title>Vue.js Study Jam</title>
</head>
<body>
<h1>Welcome to the Study Jam - How nice of you to join!!</h1>
<h1>Favourite Movie Series: Harry Potter</h1>
<div id="app">
<h1 v-if="message.length % 2 == 0">{{ message }}</h1>
<p v-else>There is nothing</p>

<button @click="show = !show">Toggle List</button>
<button @click="list.push(list.length + 1)">Push Number</button>
<button @click="list.pop()">Pop Number</button>
<button @click="list.reverse()">Reverse List</button>

<ul v-if="show && list.length">
<li v-for="item of list">{{ item }}</li>
<h2>Characters</h2>
<ul>
<li v-for="(item, index) in list" :key="index">
{{ item }}
<button @click="addToFavorites(item)">Add to Favorites</button>
</li>
</ul>

<p v-else-if="list.length">List is not empty, but hidden.</p>
<p v-else>List is empty.</p>
<h2>Favorites List</h2>
<ul v-if="favoriteList.length">
<li v-for="(item, index) in favoriteList" :key="index">{{ item }}</li>
Copy link
Owner

@Dexters-Hub Dexters-Hub Apr 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The :key is a shorthand version of the v-bind:key directive. Similar to v-on:click - @click

</ul>
<form @submit.prevent="addItem">
Copy link
Owner

@Dexters-Hub Dexters-Hub Apr 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code uses the concept of modifiers - the same concept as to how to react to an event in more detail.

<label for="newItem">Add new item:</label>
<input type="text" id="newItem" v-model="newItem">
Copy link
Owner

@Dexters-Hub Dexters-Hub Apr 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

v-modal is a new way for two-way binding. It's majorly used for forms - It automatically handles what to look at and what to change. It's a handy directive.

Here

This is same as:

<input v-model="searchText">

as this:

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

<button type="submit">Add</button>
</form>


</div>
Expand All @@ -32,21 +34,28 @@ <h1 v-if="message.length % 2 == 0">{{ message }}</h1>
const app = createApp({
data() {
return {
message: 'Hello World!',
show: true,
list: [1, 2, 3]
message: 'Favourite Movie Series: Harry Potter',
list: ['Harry', 'Ron','Hermione'],
favoriteList: [],
newItem: ''
}
},
methods: {
evaluate() {
console.log('Evaluate')
addItem() {
if (this.newItem.trim() !== '') {
Copy link
Owner

@Dexters-Hub Dexters-Hub Apr 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Normally this refers to the current object - so it looks for the newItem - It is the only way to to track the variables inside data in methods. But this will be changed when we look at composition API :D

this.list.push(this.newItem);
this.newItem = '';
}
},
addToFavorites(item) {
this.favoriteList.push(item);
}
}

}).mount('#app')

</script>

<!-- Task to be done - fav movie/anime/series ola characters oru list - faviortie list -->
</body>
</html>