Dragonboat App

Developer
Chris Wachtman
Size
2,832 Kb
Views
4,048
  1. Dragonboat App Previews
  2. Dragonboat App HTML Codes
  3. Dragonboat App CSS Codes
  4. Dragonboat App JS Codes

How do I make an dragonboat app?

What is a dragonboat app? How do you make a dragonboat app? This script and codes were developed by Chris Wachtman on 13 January 2023, Friday.

Dragonboat App Previews
IQ Test

Dragonboat App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dragonboat App</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<script src="//cdn.firebase.com/v0/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.3.0/angularfire.min.js"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app" ng-app="myApp" ng-controller="myCtrl"> <div class="paddlerlist"> <div class="paddler" ng-repeat="paddler in paddlers" my-Dir="my-Dir" ng-click="update()"> <div class="name">{{paddler.name}}</div> <div class="weight">{{paddler.weight}}</div> <div class="gender">{{paddler.gender}}</div> <div class="side">{{paddler.side}}</div> </div> </div> <div class="boatContainer"> <div class="boat"> <div class="row" ng-repeat="row in rows"> <div class="seat" ng-repeat="seat in row.seats" seat-Dir="seat-Dir"> <div class="name">{{seat.name}}</div> </div> </div> </div> <div class="yBal"></div> <div class="xBal"></div> <div class="total"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dragonboat App - Script Codes CSS Codes

.paddler, .seat{ width: 100px; height: 100px; padding: 10px; margin: 10px; border: 1px solid #000;
}
.paddlerlist{ float: left;
}
.boat{ width: 300px; float: right;
}
.row{ display: block; white-space: no-wrap; text-align: center;
}
.seat{ display: inline-table;
}

Dragonboat App - Script Codes JS Codes

var data={ paddlers:[ { name:'Erin', weight:100, gender:'F', side:'both' }, { name:'Erin', weight:100, gender:'F', side:'both' }, { name:'Erin', weight:100, gender:'F', side:'both' }, { name:'Erin', weight:100, gender:'F', side:'both' }, { name:'Erin', weight:100, gender:'F', side:'both' }, { name:'Erin', weight:100, gender:'F', side:'both' }, ], rows:[ { seats:[ {name:'Drum'} ] }, { seats:[ {name:'Front Left'}, {name:'Front Right'} ] }, { seats:[ {name:'Front Left'}, {name:'Front Right'} ] }, { seats:[ {name:'Front Left'}, {name:'Front Right'} ] }, { seats:[ {name:'Engine Left'}, {name:'Engine Right'} ] }, { seats:[ {name:'Engine Left'}, {name:'Engine Right'} ] }, { seats:[ {name:'Engine Left'}, {name:'Engine Right'} ] }, { seats:[ {name:'Engine Left'}, {name:'Engine Right'} ] }, { seats:[ {name:'Back Left'}, {name:'Back Right'} ] }, { seats:[ {name:'Back Left'}, {name:'Back Right'} ] }, { seats:[ {name:'Back Left'}, {name:'Back Right'} ] }, { seats:[ {name:'Steer'} ] } ]
}
var total=0;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) { $scope.paddlers=data.paddlers; $scope.rows=data.rows; $scope.total=0; $scope.update = function(index) { //$scope.total++; }
});
app.directive('myDir', function() { return function(scope, element, attrs) { if (scope.$last){ } };
});
app.directive('seatDir', function() { return function(scope, element, attrs) { if (scope.$last){ $( ".seat" ).droppable({ drop: function( event, ui ) { $( "<div></div>" ).html( ui.draggable.html() ).appendTo( this ); updateBoat(); } }); $( ".paddler" ).draggable({ snap: ".seat", snapMode: "inner", helper: "clone" }); } };
});
function updateBoat(){ total=0; $('.boat .weight').each(function( index ) { total+= parseInt($( this ).text()) ; }); $('.total').html('Total: '+total);
}
Dragonboat App - Script Codes
Dragonboat App - Script Codes
Home Page Home
Developer Chris Wachtman
Username cwacht
Uploaded January 13, 2023
Rating 3
Size 2,832 Kb
Views 4,048
Do you need developer help for Dragonboat App?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Wachtman (cwacht) Script Codes
Name
Responsive Grid for Dynamic Layouts
Font Awesome Forever
NASA Responsive Mockup
What Does the Fox Say Soundboard
A Pen by Chris Wachtman
Angular-HAML
Icon Orb
Minimal Menu
CSS Pie Chart
NASA Concept
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!