Skip to content

Task one is completed #2

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 one is completed #2

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
30d259a
Movie characters list is created
muhammedshibilm Apr 13, 2024
52c63b3
Buttons is edited
muhammedshibilm Apr 13, 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
53 changes: 26 additions & 27 deletions sandbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,51 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Study Jam</title>
</head>
<body>
<h1>Welcome to the Study Jam - How nice of you to join!!</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>
<body>

<ul v-if="show && list.length">
<li v-for="item of list">{{ item }}</li>
<div id="app">
<h1>{{message}}</h1>
<label for="">Enter characters name: </label>
Copy link
Owner

@Dexters-Hub Dexters-Hub Apr 14, 2024

Choose a reason for hiding this comment

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

missing for=""

<input v-model="txt" type="text" placeholder="Please enter name">
Copy link
Owner

@Dexters-Hub Dexters-Hub Apr 14, 2024

Choose a reason for hiding this comment

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

v-model is a two-way data binding mechanism it's similar as binding value attribute and checking the input event - it's a good directive used when dealing with forms

<button @click="list.push(txt)">Press me</button>
<p>Characters list</p>
<div v-if="list">
<ul v-for="items in list">
<li>{{items}} <button @click="fav.push(items)">⭐</button> <button @click="list.pop(items)">⛔</button></li>
</ul>
</div>
<button @click="fav.sort()">Sort A-Z</button>
<button @click="fav.reverse()">Sort Z-A</button>
<button @click="fav.splice(0, fav.length)">Clear</button>
<p>Faviortie Characters</p>
<ul v-for="values in fav">
<li>{{values}} <button @click="fav.pop(values)">⛔</button></li>
</ul>

<p v-else-if="list.length">List is not empty, but hidden.</p>
<p v-else>List is empty.</p>


</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
const app = createApp({
// "Mamooty", "Arjun Ashokan", "Siddharth", "Amalda Liz", "Manikanda Rajan"
data() {
return {
message: 'Hello World!',
show: true,
list: [1, 2, 3]
message: 'Bramayugam',
list: [],
fav: []
}
},
methods: {
evaluate() {
console.log('Evaluate')
}

}

}).mount('#app')

</script>

<!-- Task to be done - fav movie/anime/series ola characters oru list - faviortie list - when clicked on a button - it should go to fav list-->
</body>

</html>