Task :
Start with Index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rokitt</title>
<script src="js/angular.min.js"></script>
<script src="app.js"> </script>
<script src="controllers/cardsController.js"> </script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/layout.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="followersData">
<div ng-include ="'views/followersView.html'"> </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Step2:
Create a App.js file to define the module
var app = angular.module('myApp', []);
Step3:
Create a CardsController.js file to define the controller of module
app.controller('followersData', function($scope, $http) {
$http.get("data.json")
.success(function(response) {$scope.names = response;});
$scope.removeCards = function(x) {
angular.forEach($scope.names, function(checkCards, index) {
debugger;
if (checkCards.name === x.name) {
$scope.names.splice(index,1);
}
});
};
});
Step4:
Create a FollowersView.html file to define the controller of module
<header>
<h2> Followers ({{names.length}}) </h2>
</header>
<section>
<div class="row"> <!--row div starts here-->
<div class="col-md-4" ng-repeat="x in names">
<div class="cards">
<button class="glyphicon glyphicon-remove pull-right" ng-click="removeCards(x)"></button>
<h2> {{ x.name }} </h2>
<p> {{ x.Country }} </p>
</div>
</div>
</div>
<!--row div ends here-->
</section>
Step5:
Output:
when the Close button click on each card is supposed to remove the card from the view,
Once a card is removed the number shown in header (Followers(number)) should update accordingly.
Enjoy Folks
The
task is to design a single page, the layout of which is shown in the attached
pdf file.
The
data needed for the page is provided in the form of a JSON file (data.json) as
attached.
Page
basically displays the followers for a Facebook page, the data file contains
details of the followers (name,country).
The
page consists of two portions.
1. A header tab, displaying the number of cards (Followers (count)) on
the top.
2. And the lower panel displays followers in the form of cards.
One
card represents one follower. Each card is supposed to display follower details
(taken from data.json) as shown in the design.
Each
card has a close button on the top right corner.
You
are free to choose colors for background, borders etc throughout the page.
Functionality
wise, the close button on each card is supposed to remove the card from the
view,
and
once a card is removed the number shown in header (Followers(number)) should
update accordingly.
Each
row of cards display is supposed to contain maximum 3 cards.
For
icons you may use font-awesome.
Data.json File
[{
"name": "F1",
"Country": "India"
},
{
"name": "F2",
"Country": "China"
},
{
"name": "F3",
"Country": "Australia"
},
{
"name": "F4",
"Country": "South America"
},
{
"name": "F5",
"Country": "Canada"
},
{
"name": "F6",
"Country": "USA"
},
{
"name": "F7",
"Country": "Japan"
},
{
"name": "F8",
"Country": "Former Yugoslav Republic of Macedonia"
},
{
"name": "F9",
"Country": "Denmark"
}
]
Html Code :"name": "F1",
"Country": "India"
},
{
"name": "F2",
"Country": "China"
},
{
"name": "F3",
"Country": "Australia"
},
{
"name": "F4",
"Country": "South America"
},
{
"name": "F5",
"Country": "Canada"
},
{
"name": "F6",
"Country": "USA"
},
{
"name": "F7",
"Country": "Japan"
},
{
"name": "F8",
"Country": "Former Yugoslav Republic of Macedonia"
},
{
"name": "F9",
"Country": "Denmark"
}
]
Start with Index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rokitt</title>
<script src="js/angular.min.js"></script>
<script src="app.js"> </script>
<script src="controllers/cardsController.js"> </script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/layout.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="followersData">
<div ng-include ="'views/followersView.html'"> </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Step2:
Create a App.js file to define the module
var app = angular.module('myApp', []);
Step3:
Create a CardsController.js file to define the controller of module
app.controller('followersData', function($scope, $http) {
$http.get("data.json")
.success(function(response) {$scope.names = response;});
$scope.removeCards = function(x) {
angular.forEach($scope.names, function(checkCards, index) {
debugger;
if (checkCards.name === x.name) {
$scope.names.splice(index,1);
}
});
};
});
Step4:
Create a FollowersView.html file to define the controller of module
<header>
<h2> Followers ({{names.length}}) </h2>
</header>
<section>
<div class="row"> <!--row div starts here-->
<div class="col-md-4" ng-repeat="x in names">
<div class="cards">
<button class="glyphicon glyphicon-remove pull-right" ng-click="removeCards(x)"></button>
<h2> {{ x.name }} </h2>
<p> {{ x.Country }} </p>
</div>
</div>
</div>
<!--row div ends here-->
</section>
Step5:
Output:
when the Close button click on each card is supposed to remove the card from the view,
Once a card is removed the number shown in header (Followers(number)) should update accordingly.
Enjoy Folks
No comments:
Post a Comment