Skip to content

Commit

Permalink
Merge branch 'master' into Philip-Django-Lab03_Pokedex
Browse files Browse the repository at this point in the history
  • Loading branch information
@perennialAutodidact
perennialAutodidact committed Jan 20, 2022
2 parents 45cd017 + 3616a56 commit b980317
Show file tree
Hide file tree
Showing 164 changed files with 7,332 additions and 85 deletions.
5 changes: 5 additions & 0 deletions 3 JavaScript/demo/vueIntro/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

* {
font-family: 'Montserrat', sans-serif;
}
108 changes: 108 additions & 0 deletions 3 JavaScript/demo/vueIntro/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="index.css">

<!-- VUE JS -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<title>Vue Intro</title>
</head>

<body>

<div id="app">
<h1>{{ headerText }}</h1>


<h2>
<button v-on:click="increaseCount">++</button>
<button v-on:click="decreaseCount">- -</button>

The number {{ counter }} is

<span v-if="counter % 2 === 0">Even</span>
<span v-if="counter % 2 === 1">Odd</span>
</h2>

<div>
<button v-on:click="generateRandomNumber">Random!</button><br />
{{ randomNumber }} is

<span v-if="randomNumber < 5">less than 5</span>
<span v-else-if="randomNumber == 5">equal to 5</span>
<span v-else>greater than 5</span>
<div>
<h4>Previous numbers:</h4>
<ul>
<!-- loop through the generatedNumbers array and display each in an <li> -->
<li v-for="number in generatedNumbers">{{number}}</li>
</ul>
</div>
</div>


<pre>{{userData}}</pre>

</div>


<script>

const app = new Vue({
// define the app's container element
el: '#app',
// data is the app's state
data: {
headerText: 'Welcome to Vue JS!!!',
counter: 0,
randomNumber: null,
generatedNumbers: [],
userData: null
},
methods: {
increaseCount: function () {
this.counter++;
},
decreaseCount: function () {
if (this.counter > 0) {
this.counter--;
}
},
generateRandomNumber: function () {
this.generatedNumbers.push(this.randomNumber)

// change the Vue component's randomNumber
this.randomNumber = Math.round(1 + Math.random() * 10)
}
},
// lifecycle methods
created: function () {
// run this method when the app is created

// set the randomNumber for the first time
this.randomNumber = Math.round(1 + Math.random() * 10)

// when the app is created, call an api to get some data
fetch('https://jsonplaceholder.typicode.com/users/1')
.then(response => response.json())
.then(data => {
this.userData = data
})
.catch(error => console.log(error))
},
updated: function () {
// run this method whenever the component's data changes
console.log('The app was updated!');
}
})
// console.log(app)
</script>
</body>

</html>
123 changes: 123 additions & 0 deletions 4 Django/demo/drf_vue_todo_app/vueTodoApp.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- BOOTSTRAP -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<!-- VueJS -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<style>
.strikeThrough {
text-decoration: line-through;
}
</style>

<title>Vue To Do</title>
</head>
<body class="bg-light p-5">

<div id="app" class='container'>
<h1 class="text-center">{{ headerText }}</h1>

<div class="row">

<div class="col-4 offset-4 d-flex mb-5 justify-content-center">
<input type="text" class="form-control" v-model="newTodoText">
<button class="btn btn-success" v-on:click="addTodo">Add</button>
</div>

<!-- INCOMPLETE LIST -->
<div class="col-4 offset-2">
<h3 class="text-center">Incomplete</h3>
<div v-for="todo in incompleteTodos"
class="card p-4 mt-3 flex-row justify-content-between"
>
{{todo.id}}. {{todo.text}}
<div class="buttons">
<button class="btn btn-sm btn-success" v-on:click="toggleComplete(todo.id)">Complete</button>
<button class="btn btn-sm btn-danger" v-on:click="deleteTodo(todo.id)">Delete</button>
</div>
</div>
</div>

<!-- COMPLETE LIST -->
<div class="col-4">
<h3 class="text-center">Complete</h3>
<div v-for="todo in completeTodos"
class="card p-4 mt-3 flex-row justify-content-between"
>
<span v-bind:class="{strikeThrough: todo.complete}">
{{todo.id}}. {{todo.text}}
</span>
<div class="buttons">
<button class="btn btn-sm btn-success" v-on:click="toggleComplete(todo.id)">Complete</button>
<button class="btn btn-sm btn-danger" v-on:click="deleteTodo(todo.id)">Delete</button>
</div>
</div>
</div>
</div>
</div>


<!-- v-model - bind the value of an input to a variable in state -->
<!-- v-bind:class - conditionally render a class or id on an element-->

<script>
const app = new Vue({
el: '#app',
data: {
idCount: 1,
headerText: 'Vue To Do',
completeTodos: [],
incompleteTodos: [],
newTodoText: ''
},
methods: {
updateTodos: function(todos){
// split the todos into two lists again
this.completeTodos = todos.filter(todo=>todo.complete)
this.incompleteTodos = todos.filter(todo=>!todo.complete)
},
// add a new todo to the array
addTodo: function(){
// concate a new todo item into the array
this.incompleteTodos = this.incompleteTodos.concat({
id: this.idCount,
text: this.newTodoText,
complete: false
})
this.idCount++
this.newTodoText = ''
},
// toggle the complete value for the given todo
toggleComplete: function(todoId){
// combine the complete and incomplete arrays
let todos = this.completeTodos.concat(this.incompleteTodos)

// change the target todo item's complete value
todos = todos.map((todo)=> todo.id !== todoId ? todo : {...todo, complete: !todo.complete})

this.updateTodos(todos)
},
deleteTodo: function(todoId){
// combine the complete and incomplete arrays
let todos = this.completeTodos.concat(this.incompleteTodos)

todos = todos.filter(todo => todo.id !== todoId)

this.updateTodos(todos)

}
}
})

</script>

</body>
</html>
Loading

0 comments on commit b980317

Please sign in to comment.