# CHANGE THE ANGULAR JAVASCRIPT TO NORMAL EVENT DRIVEN JAVASRIPT # <!DOCTYPE htm
ID: 3832241 • Letter: #
Question
# CHANGE THE ANGULAR JAVASCRIPT TO NORMAL EVENT DRIVEN JAVASRIPT
#
<!DOCTYPE html>
<html ng-app="fly">
<head>
<meta name="viewport" content="width=device-width, height=device-height initial-scale=1.0" />
<title>Rocket Flight</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- css3-->
<style>
.navbar-brand{
color:#ffffff !important;
}
.main{
margin-top:50px;
}
body{
background: url('http://www.technocrazed.com/wp-content/uploads/2015/12/Airplane-wallpaper-17.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fly-form-bg{
margin-top:5%;
background-color: rgba(0, 0, 0, 0.4);
height:auto;
width:100%;
border-radius:0 5px;
padding:3% 5%;
}
</style>
<!--./css3 -->
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<a class="navbar-brand" href="">Rocket FlY</a>
</div>
</div>
<main>
<div class="container main">
<div class="row" ng-controller="mainController">
<div class="col-md-12 col-xs-12">
<form class="fly-form-bg form-inline">
<div class="form-group">
<select class="form-control" ng-model="fromPlace">
<option value="0" selected disabled>FROM</option>
<option ng-repeat="item in places" value="{{item}}">{{item}}</option>
</select>
</div>
<div class="form-group">
<select class="form-control" ng-model="toPlace" >
<option value="0" selected disabled>TO</option>
<option ng-repeat="item in places" value="{{item}}">{{item}}</option>
</select>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Depart" uib-datepicker-popup="{{format}}" ng-model="fromDate" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Return" uib-datepicker-popup="{{format}}" ng-model="reDate" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
<div class="form-group">
<select class="form-control" ng-model="noTickets">
<option ng-repeat="item in numberTickets" value="{{item}}" >{{item}}</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-danger" ng-click="submit
()">Submit</button>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<iframe width="560" height="315" src="https://www.youtube.com/embed/7nle5Yk7oEU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</main>
<!-- <div class=""></div>-->
<!-- scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript">
angular.module('fly',['ui.bootstrap'])
.controller('mainController',fnMainCode);
function fnMainCode($log, $scope){
$scope.details = {};
$scope.places = ['HYDERABAD','BANGALORE','PUNE'];
$scope.numberTickets = ['1','2','3','4','5','6'];
$scope.submit = function(){
$scope.details.from = $scope.fromPlace;
$scope.details.to = $scope.toPlace;
$scope.details.departDate = $scope.fromDate;
$scope.details.returnDate = $scope.reDate;
$scope.details.numbertickes = $scope.noTickets;
console.log($scope.details);
}
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function() {
$scope.dt = null;
};
$scope.inlineOptions = {
customClass: getDayClass,
minDate: new Date(),
showWeeks: true
};
$scope.dateOptions = {
dateDisabled: disabled,
formatYear: 'yy',
maxDate: new Date(2020, 5, 22),
minDate: new Date(),
startingDay: 1
};
// Disable weekend selection
function disabled(data) {
var date = data.date,
mode = data.mode;
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
}
$scope.toggleMin = function() {
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
};
$scope.toggleMin();
$scope.open1 = function() {
$scope.popup1.opened = true;
};
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.setDate = function(year, month, day) {
$scope.dt = new Date(year, month, day);
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.altInputFormats = ['M!/d!/yyyy'];
$scope.popup1 = {
opened: false
};
$scope.popup2 = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
}
}
</script>
<!-- ./scripts -->
</body>
</html>
Explanation / Answer
1. Event Driven Javascript Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height initial-scale=1.0" />
<title>Rocket Flight</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- css3-->
<style>
.navbar-brand {
color: #ffffff !important;
}
.main {
margin-top: 50px;
}
body {
background: url('http://www.technocrazed.com/wp-content/uploads/2015/12/Airplane-wallpaper-17.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fly-form-bg {
margin-top: 5%;
background-color: rgba(0, 0, 0, 0.4);
height: auto;
width: 100%;
border-radius: 0 5px;
padding: 3% 5%;
}
</style>
<!--./css3 -->
<script type="text/javascript">
$(document).ready(function() {
/**
* Function for Depart Time Datepicker
*/
$("#depart_datepicker").datepicker({
showButtonPanel: true,
dateFormat: 'dd-MM-yy',
onSelect: function(selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#return_datepicker").datepicker("option", "minDate", dt);
}
});
/**
* Function for Return Time Datepicker
*/
$("#return_datepicker").datepicker({
showButtonPanel: true,
dateFormat: 'dd-MM-yy',
onSelect: function(selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#depart_datepicker").datepicker("option", "maxDate", dt);
}
});
});
/**
* Function to show Depart Time Datepicker on button click
*/
function show_depart_dp() {
$("#depart_datepicker").datepicker('show'); //Show on click of button
} // end show_depart_dp()
/**
* Function to show Return Time Datepicker on button click
*/
function show_return_dp() {
$("#return_datepicker").datepicker('show'); //Show on click of button
} // end show_return_dp()
/**
* Function to show Travel details on button click
*/
function travelDetails() {
var myObject = new Object();
myObject.from = $(".depart_place").val();
myObject.to = $(".return_place").val();
myObject.numbertickets = $(".number_of_tickets").val();
myObject.departDate = $("#depart_datepicker").val();
myObject.returnDate = $("#return_datepicker").val();
console.log(myObject);
return false;
} // end travelDetails()
</script>
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<a class="navbar-brand" href="">Rocket FlY</a>
</div>
</div>
<div class="container main">
<div class="row">
<div class="col-md-12 col-xs-12">
<form class="fly-form-bg form-inline">
<div class="form-group">
<select class="form-control depart_place">
<option value="0" selected disabled>FROM</option>
<option value="HYDERABAD"> Hyderabad </option>
<option value="BANGALORE"> Bangalore </option>
<option value="PUNE"> Pune </option>
</select>
</div>
<div class="form-group">
<select class="form-control return_place" required>
<option value="0" disabled>TO</option>
<option value="HYDERABAD"> Hyderabad </option>
<option value="BANGALORE"> Bangalore </option>
<option value="PUNE"> Pune </option>
</select>
</div>
<div class="input-group">
<input type="text" class="form-control" id="depart_datepicker" placeholder="Depart" required />
<span class="input-group-btn">
<button type="button" class="btn btn-default depart_date"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
<div class="input-group">
<input type="text" class="form-control" id="return_datepicker" placeholder="Return" required />
<span class="input-group-btn">
<button type="button" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
<div class="form-group">
<select class="form-control number_of_tickets">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
<option value="6"> 6 </option>
</select>
</div>
<div class="form-group">
<button class="btn btn-danger submit_travel_details" type="submit">Submit</button>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<iframe width="560" height="315" src="https://www.youtube.com/embed/7nle5Yk7oEU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.