Fire Table - Firebase & Angular

Developer
David
Size
4,062 Kb
Views
18,216
  1. Fire Table - Firebase & Angular Previews
  2. Fire Table - Firebase & Angular HTML Codes
  3. Fire Table - Firebase & Angular CSS Codes
  4. Fire Table - Firebase & Angular JS Codes

How do I make an fire table - firebase & angular?

Open in two browsers, then click a square. What is a fire table - firebase & angular? How do you make a fire table - firebase & angular? This script and codes were developed by David on 02 November 2022, Wednesday.

Fire Table - Firebase & Angular Previews
IQ Test

Fire Table - Firebase & Angular - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fire Table - Firebase & Angular</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap" data-ng-app="firetable"> <div data-ng-controller="TableCtrl"> <hgroup> <h2>Firebase Rocks</h2> <h5>Open in two browsers, then click a square</h5> </hgroup> <div class="fire-table"> <div class="fire-square" data-ng-repeat="square in squares" data-ng-click="updateColor($event, square)" data-ng-style="{ background: square.hex }"> </div> </div> </div> <a class="btn" href="http://davidea.st/firebase-my-new-bestfriend/"> Find out more here </a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.6/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fire Table - Firebase & Angular - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Montserrat);
* { box-sizing: border-box;
}
body { background: #1A1A1A;
}
a { color: #ECE9E2;
}
.wrap { margin: 0 auto; text-align: center; font-family: 'Montserrat'; color: #ECE9E2;
}
.wrap hgroup h2 { margin-bottom: -15px;
}
.wrap hgroup h5 { margin-bottom: 10px;
}
.fire-table { margin: 0 auto; width: 304px; display: block; height: 320px;
}
.fire-table .fire-square { border-top: 4px solid #ECE9E2; border-right: 2px solid #ECE9E2; border-bottom: 2px solid #ECE9E2; border-left: 4px solid #ECE9E2; height: 150px; width: 150px; float: left; cursor: pointer;
}
.btn { background: #17805b; padding: 8px; text-decoration: none;
}

Fire Table - Firebase & Angular - Script Codes JS Codes

/*global Firebase*/
(function (angular) { var app = angular.module('firetable', ['firebase']); // Store the firebase url as a constant app.constant('FBURL', 'https://tictacfire.firebaseio.com/table'); // Return the $firebase module as a service, this loosely couples // angularfire from your controller. app.service('TableRef', function ($firebase, FBURL) { return { create: function () { return new $firebase(new Firebase(FBURL)); } }; }); // Dummy service that returns local data app.service('CoolHex', function() { return { load: function() { return [ '#FB5959', '#A38FFC', '#17805B', '#6B5A8E', '#589AA9', '#265259', '#E0864A', '#1A1A1A', '#5BC4BE', '#345C97', '#008BC3', '#06644A', '#BD5653', '#B2835C', '#3A5F66', '#ECE9E2', '#79B0AF', '#8D5E78', '#393939', '#E0E0E0', '#C0C0C0', '#81B4A0', '#ABA3B6', '#446CB3' ]; } }; }); // Returns a promise of the squares in the table. // Takes a firebase reference as a parameter in the // load function so it can share it in the Facade. app.factory('TableLoader', function ($q) { return { load: function (tableRef) { var squares = []; var deferred = $q.defer(); tableRef.$on('loaded', function (children) { angular.forEach(children, function (child) { squares.push(child); }); deferred.resolve(squares); }); return deferred.promise; } }; }); // Handles the changing of the child squares in the table. // Takes a firebase reference as a parameter in the // load function so it can share it in the Facade app.factory('TableChanger', function ($q) { return { childChanging: function(tableRef, localArray) { tableRef.$on('child_changed', function (child) { var square = child.snapshot.value; localArray[square.id - 1].hex = square.hex; }); } }; }); // This Facade will limit the amount of dependencies injected into the // controller. It will call on the factories created above and expose // a function to save squares in the firebase by using angularfire bindings. app.factory('TableStore', function(TableRef, TableLoader, TableChanger) { var tableRef = TableRef.create(); return { load: function() { return TableLoader.load(tableRef); }, childChanging: function(localArray) { return TableChanger.childChanging(tableRef, localArray); }, saveSquare: function(square) { tableRef.$child(square.id).$set({ id: square.id, hex: square.hex }); } }; }); // This controller is light, because we're only relying on the TableStore // and the CoolHex service. No where in this controller are we directly // calling into Firebase. Yet, we still get the real-time updates. app.controller('TableCtrl', ['$scope', 'TableStore', 'CoolHex', function ($scope, TableStore, CoolHex) { var coolHexes = CoolHex.load(); var hexLength = coolHexes.length - 1; $scope.squares = []; TableStore.load().then(function (squares) { $scope.squares = squares; TableStore.childChanging($scope.squares); }); function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function getRandomHex() { return coolHexes[getRandomInt(0, hexLength)]; } $scope.updateColor = function updateColor(event, square) { TableStore.saveSquare({ id: square.id, hex: getRandomHex() }); }; } ]);
})(window.angular);
Fire Table - Firebase & Angular - Script Codes
Fire Table - Firebase & Angular - Script Codes
Home Page Home
Developer David
Username david-east
Uploaded November 02, 2022
Rating 4.5
Size 4,062 Kb
Views 18,216
Do you need developer help for Fire Table - Firebase & Angular?

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!

David (david-east) Script Codes
Name
HTML5 Geolocation
Restrictive Queries with Firebase
IPhone Targeting
Polaroid Fade-in
Flat UI Login Form
A Pen by David
Mobile Disabled Animation
LESS - Nesting
Create amazing sales emails 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!