Skip to content
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

Andy lab04 vueredo completed #278

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Andy lab04 vueredo completed #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4d7140d
saving
andy2124 Oct 5, 2022
149f70d
saving
andy2124 Oct 6, 2022
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
118 changes: 118 additions & 0 deletions code/Andy/javascript/nums_redo_vue/nums.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script defer src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script defer src="./nums.js"></script>

</head>

<body>
<div id="app">
<!-- display 'message' from the 'data' part of the app in the page -->
<!-- allow the user to set the value of the input -->
<!-- handle a click event of a button - calls the method sayHello -->
<div>
<!-- v- model watch user input and renders the varible -->
<input type="text" placeholder="Enter a number" v-model="userinput" >
<button v-on:click='convert' >submit</button>
</div>
{{ userinput }}
<span>

{{ result }}
</span>
<div>
<ul>
<li v-for="num in low_numbers">{{ num }}</li>
</ul>
<ul>
<li v-for="(num, index) in low_numbers">{{ index }}) {{ num }}</li>
</ul>
</div>
<div>
<ul>
<li v-for="ten in tens">{{ ten }}</li>
</ul>
<ul>
<li v-for="(ten, index) in tens">{{ index }}) {{ ten }}</li>
</ul>
</div>
<div>
<ul>
<li v-for="hundred in hundreds">{{ hundred }}</li>
</ul>
<ul>
<li v-for="(hundred, index) in hundreds">{{ index }}) {{ hundred }}</li>
</ul>
</div>
</div>


<!-- <div id="app">
<div>
v- model watch user input and renders the varible
<input type="text" placeholder="Enter a number" v-model="userinput" >
<button>submit</button>
</div>
{{ userinput }}
{{ number }}
<div>
<span v-if ='number < 5' >less than 5</span>
<span v-else-if = 'number = 5'>equal to 5</span>
<span v-else >greater than 5</span>
</div>
</div> -->

<!-- <script>
var app = new Vue({
el: '#app',
data: { // data object
userinput: '', //user key
number : 5,
low_numbers : [

"zero",
"one",
"two",
"three",
"four",
"five",
"six",
"seven",
"eight",
'nine',
'ten',
'eleven',
'tweleve',
'thirteen',
'fourteen',
'fifteen',
'sixteen',
'seventeen',
'eighteen',
'nineteen',


],



},
methods: {
convertNum: function(){
this.number > userinput
}
},
created: function() {

}
})
</script> -->

</body>

</html>
120 changes: 120 additions & 0 deletions code/Andy/javascript/nums_redo_vue/nums.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
// var app = new Vue({
// el: '#app',
// data: { // data object
// userinput: '', //user key
// number : 6,




// },
// methods: {
// convertNum: function(){
// this.number > userinput
// }
// },
// created: function() {

// }
// })
let app = new Vue({
// query selector of the html element representing the app
el: '#app',
// app data
// data stored with the app
// for displaying in the page: {{message}}
// for getting input from the user: v-model="message"
// for modifying in methods: this.message
data: {
userinput: '',
result: 0,
// return ,
low_numbers: {
0: "zero",
1: "one",
2: "two",
3: "three",
4: "four",
5: "five",
6: "six",
7: "seven",
8: "eight",
9: 'nine',
10: 'ten',
11: 'eleven',
12: 'tweleve',
13: 'thirteen',
14: 'fourteen',
15: 'fifteen',
16: 'sixteen',
17: 'seventeen',
18: 'eighteen',
19: 'nineteen',
},
tens: {
2: "twenty",
3: "thirty",
4: "forty",
5: "fifty",
6: "sixty",
7: "seventy",
8: "eighty",
9: "nintey",
},
hundreds: {

1: "one hundred",
2: "two hundred",
3: "three hundred",
4: 'four hundred',
5: 'five hundred',
6: 'six hundred',
7: 'seven hundred',
8: 'eight hundred',
9: 'nine hundred',
},


},
// app methods
// can be called from events in the page: v-on:click="method"
// can be called from other methods: this.method()
// can be called from outside the app: app.method()
methods: {
convert: function (event) {
let result
let lastOne
let user = this.userinput
// userTwo = user
console.log(typeof(parseInt(user)), 'user')
// let result = this.low_numbers[user]
// this.result = this.result
this.result = this.low_numbers[user]
lastOne = user.slice(-1)
console.log(lastOne, 'last one')
// 654 : 654/10 = 65.4 /10 = 6.54 how we get the 6 for hundreds digit
hundredsDigit = parseInt((user/10)/10)
// 654/10 = 65.4 /10 = 6.54 % 10=
unitsDigit = parseInt(((user/10)%10))
console.log(unitsDigit, 'units digit')
console.log(hundredsDigit, 'testing hundreds digit')
console.log(user,'testing users')
console.log(this.low_numbers[user],'testing' )
console.log(this.low_numbers[lastOne],'testing v2' )
console.log(this.tens[unitsDigit],'testing v2' )
console.log(this.hundreds[hundredsDigit],'testing v2' )
this.userinput = ''
return result
},
},
})

// created - a lifecycle hook
// called when the app is created
// useful for setting up app data

// tens_digit = number // 10
// new_tens = tens_digit % 10
// ones_digit = number % 10
// tens_word = ten[new_tens]
// ones_word = low_numbers[ones_digit]