<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script data-require="angular-route@*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
</head>
<body ng-app="SuggestionBox" ng-controller="HomeController">
<div class="header">
<img src="https://img.clipartfest.com/e6cb6f17699254806f08def516ffdf2f_-latest-lightbulb-idea-light-bulb-idea-clipart_200-200.jpeg" height="156" />
<h1>Suggestion<br />Box</h1>
</div>
<div class="main">
<div class="container">
<div ng-view=""></div>
</div>
</div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/HomeController.js"></script>
<script type="text/javascript" src="js/controllers/SuggestionController.js"></script>
<!-- Services -->
<script type="text/javascript" src="js/services/suggestions.js"></script>
</body>
</html>
app.factory('suggestions', [function() {
var demoSuggestions = {
posts: [
{
id: 1,
title: 'Free pizza at club meetings',
upvotes: 15,
comments: [
{
body:'I love Pizza',
upvotes: 0,
},
{
body:"I've got a coupon!",
upvotes: 1,
}
]
},
{
id: 2,
title: 'End all club emails with Laffy Taffy jokes',
upvotes: 9,
comments: [
{
body: "I hate laffy taffy",
upvotes: 0
}
],
},
{
id: 3,
title: 'Retrofit water fountain with Gatorade',
upvotes: 7,
comments: [
{
body: 'I love gatorade',
upvotes: 0
}
],
},
{
id: 4,
title: 'Sing Bon Jovi\'s "Living on a Prayer" halfway through meetings',
upvotes: 3,
comments: [],
}
]
}
return demoSuggestions
}]);
app.controller('SuggestionController', [
'$scope',
'$routeParams',
'suggestions',
function($scope, $routeParams, suggestions) {
// $scope.post = suggestions.posts[$routeParams.id];
$scope.post = suggestions.posts.filter(function(a) {
return (a.id == $routeParams.id);
})[0];
$scope.addComment = function() {
var comment = $scope.comment;
$scope.post.comments.push({
body: comment,
upvotes: 0
});
};
$scope.upvoteComment = function(comment) {
$scope.post.comments.upvotes += 1;
};
}]);
app.controller('HomeController', [
'$scope',
'suggestions',
function($scope, suggestions) {
$scope.posts = suggestions.posts
$scope.addSuggestion = function() {
// Add a suggestion to $scope.posts
var newSuggestion = $scope.title;
if (!$scope.title || $scope.title === "") {
return
}
$scope.posts.push({
id: $scope.posts.length +1,
title: newSuggestion,
upvotes: 0,
comments: [],
});
$scope.title = "";
};
$scope.upVote = function(post) {
// Increase the upvote of the post by 1.
post.upvotes += 1;
};
}]);
var app = angular.module('SuggestionBox', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix(''); // magic line
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/suggestion/:id', {
controller: 'SuggestionController',
templateUrl: 'views/suggestion.html'
})
.otherwise({
redirectTo: '/',
});
});
<div class="col-md-6">
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<div class="suggestion">
<h3>{{ post.title }}</h3>
<div class="upvotes">
<span class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)"></span>
Upvotes: {{ post.upvotes }}
</div>
<div class="comments">
<a href="#/suggestion/{{ post.id }}">
Comments</a>
<div ng-repeat="comment in post.comments"><span> - "{{ comment.body }}"</span></div>
</div>
</div>
</div>
</div>
<!-- Suggestion submit form -->
<div class="col-md-6">
<div class="form">
<div class="container" id="suggestform">
<form ng-submit="addSuggestion()" style="margin-top: 50px">
<h2> Submit Your Suggestion </h2>
<div class="form-group">
<input ng-model="title" type="text" class="form-control" placeholder="Your suggestion here"/>
</div>
<button type="submit" class="btn">Suggest</button>
</form>
</div>
</div>
</div>
<div class="suggestion">
<h3>{{ post.title }}</h3>
<div class="comments">
<div class="container" ng-repeat="comment in post.comments">
<span>"{{ comment.body }}"</span>
<span class="glyphicon glyphicon-plus-sign" ng-click="upVote(comment)"></span> {{ comment.upvotes }}
</div>
</div>
<div class="container">
<a href="#/">Back</a>
</div>
</div>
<!-- Suggestion submit form -->
<div class="form">
<form ng-submit="addComment()" style="margin-top: 50px">
<h1> Submit Your Comment </h1>
<div class="form-group">
<input ng-model="comment" type="text" class="form-control" placeholder="Your suggestion here" />
</div>
<button type="submit" class="btn">Comment</button>
</form>
</div>
body {
background-color: green;
color: white;
}
a {
color: #c4ad66;
text-transform: uppercase;
font-weight: bold;
}
a:hover {
color: #e3b54b;
text-decoration: none;
font-weight: bolder;
}
.header {
margin: 50px 80px 50px 80px;
text-align:center;
background-color: inherit;
color: #e3b54b;
text-transform: uppercase;
font-family: helvetica;
letter-spacing: 5px;
padding: 50px;
}
.suggestion {
background-color: #2d005a;
border-radius: 20px;
padding: 20px;
margin: 20px 40px 20px 40px;
}
.main {
margin: 0 auto;
}
.main h3 {
color: white;
margin: auto;
}
.upvotes {
margin: auto;
padding: 10px;
}
.comments {
margin: 10px 20px 10px 0px;
padding: 10px;
}
.btn {
color: #384157;
border-radius: 10px;
background-color: #8f8f8f;
}
.btn:hover {
background-color: #E3B54B;
color: #312947;
}
.form {
margin-bottom: 50px;
}
#suggestform {
width: 400px;
}