Prediction Application made with Vue js
DOWNLOAD ZIP FILE HERE
Check out Video Guide here
<!DOCTYPE html>
<html>
<head>
<title>Vue Project</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<style type="text/css">
.form{
margin-top: 200px;
}
.card{
margin-top: 100px;
}
</style>
</head>
<body>
<div class="container">
<div id="app">
<form class='form' v-on:submit.prevent="processForm()">
<div class="form-group">
<label>Name Here</label>
<input class="form-control" v-model="form.name" type="text"></input>
<div v-if="form.name !=''">{form.name}</div>
</div>
<div class="form-group">
<label>Age Here</label>
<input class="form-control" v-model="form.age" type='text'></input>
<div v-if="form.age !=''">{form.age}</div>
</div>
<hr>
<div class="form-group">
<input type='submit' class="btn btn-info" value="submit"></input>
</div>
</form>
<div class="card" v-if="personality != ''">
<div class="card-body" >
<div class="output">{personality}</div>
<div v-if="timer != 0">{timer}</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
const app1 = new Vue({
el:"#app",
data:{
form:{
name:'',
age:''
},
personality:'',
roles:[ 'CEO',
'Boss Material',
'Friendly',
'Bad Atitude',
'Confident',
'Player',
'Leader',
'Champion',
'Looser'
],
timer:0,
interval:''
},
methods:{
processForm(){
if(this.form.name != '' && this.form.age != ''){
let name = this.form.name.toLowerCase();
if(name[0]=='a' && this.form.age<20){
this.personality = this.roles[4]
}
if(name[0]=='a' && this.form.age>20){
this.personality = this.roles[6]
}
if(name[0]=='b' && this.form.age<20){
this.personality = this.roles[5]
}
if(name[0]=='b' && this.form.age>20){
this.personality = this.roles[6]
}
if(name[0]=='c' && this.form.age>20){
this.personality = this.roles[0]
}
if(name[0]=='c' && this.form.age<20){
this.personality = this.roles[7]
}
if(name[0]=='d' && this.form.age>20){
this.personality = this.roles[8]
}
if(name[0]=='d' && this.form.age<20){
this.personality = this.roles[3]
}
this.showRole();
}else{
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Fill Name and age before submitting!',
footer: '<a href>Why do I have this issue?</a>'
})
}
},
showRole(){
setTimeout(()=>{
this.interval = setInterval(()=>{
this.timer++;
if(this.timer == 5){
this.timer = 0;
this.clearAll();
}
},1000)
},5000);
},
clearAll(){
clearInterval(this.interval);
Swal.fire(
'You are a '+this.personality+' '+this.form.name.toUpperCase()+' !',
'Thank you for using our app',
'success'
)
this.form.name = '';
this.form.age = '';
this.personality = '';
}
}
});
</script>
</html>