Prediction Application made with Vue js

    By: Manu
    4 years ago

    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>