A Tribute To Kelley Liljegren
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet" />
body {
background-color: #f5f5f5;
font-size: 1.4em;
font-family: Quicksand;
margin-top: 20px;
margin-bottom: 40px;
}
p {
border: none;
marign: 0;
font-family: Quicksand;
overflow: auto;
}
.createBtn {
float: right;
position: relative;
margin-right: 3px;
margin-bottom: 3px;
d
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: right;
}
.title {
text-align: center;
font-size: 1.8em;
margin-bottom: 30px;
}
hr.s1 {
border-top: 4px double #8c8b8b;
text-align: center;
}
hr.s1:after {
content: '\002665';
display: inline-block;
position: relative;
top: -35px;
padding: 0 10px;
color: #8c8b8b;
font-size: 18px;
}
hr.s2 {
height: 30px;
border-style: solid;
border-color: #8c8b8b;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr.s2:before {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: #8c8b8b;
border-width: 0 0 1px 0;
border-radius: 20px;
}
.thanks {
text-align: center;
font-size: 1em;
}
pre {
font-size: .8em;
font-family: Quicksand;
display: flex;
white-space: normal;
word-break: break-word;
}
.center-text {
text-align: center;
}
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
var myApp = angular.module('kComments', ['firebase']);
myApp.constant("FIREBASE_URL", "https://liljegren-61aac.firebaseio.com/comments/" )
function KcomCtrl($scope, $firebase, FIREBASE_URL) {
// Get Stored TODOs
var todosRef = new Firebase(FIREBASE_URL);
$scope.todos = $firebase(todosRef);
// Update the "completed" status
$scope.changeStatus = function (item) {
// Get the Firebase reference of the item
var itemRef = new Firebase(FIREBASE_URL + item.id);
// Firebase : Update the item
$firebase(itemRef).$set({
id: item.id,
name : item.name,
completed: !item.completed
});
}
// Remove a Todo
$scope.removeItem = function (index, item, event) {
// Avoid wrong removing
if (item.id == undefined)return;
// Firebase: Remove item from the list
$scope.todos.$remove(item.id);
}
// Add new TODO
$scope.addItem = function () {
// Create a unique ID
var timestamp = new Date().valueOf()
// Get the Firebase reference of the item
var itemRef = new Firebase(FIREBASE_URL + timestamp);
$firebase(itemRef).$set({
id: timestamp,
name : $scope.todoName,
completed: false
});
$scope.todoName = "";
}
}
<div class="container">
<h2 class="title">Kelley Liljegren</h2>
<hr class="s1"/>
<p>
Wise, Kind, Awesome, Funny... These are all words that could be used to describe an amazing high school teacher. She taught more than numbers, each math lesson carried a life lesson.
</p>
<p>She wasn't your <em>average</em> woman, she was stronger. She lived a life that was tougher than most, but yet her smile was the brightest. Everyday in class we were greated with a smile and a story... These things will be missed</p>
<p>
It is important to realized that death is inevitable. We cannot escape it. This is why we must be strong and focus on the things Mrs. Liljegren has accomplished. Please leave a memory, a story, or just a comment below.
</p>
<p class="thanks">Thank you</p>
</div>
<div class="container comment-wrapper" ng-controller="KcomCtrl" class="container" ng-app="kComments">
<h2 class="title">Comments</h2>
<p class="center-text"><small>or <br /> you can <a href="/images">Upload and Image</a></small></p>
<p class="center-text"><small>Please Be Respectful</small></p>
<hr class="s2">
<!--ADD ITEM FORM-->
<form name="myForm">
<div>
<textarea name="todoNameField" ng-model="todoName" placeholder="Add new task (min 3 chars)" required ng-minlength="3" class="form-control" style="margin-bottom: 10px"></textarea>
<button ng-click="addItem()" ng-hide="myForm.todoNameField.$invalid" class="btn btn-success" type="button">Comment</button>
</div>
</form>
<br />
<!--TODO LIST-->
<div ng-repeat="item in todos" class=" list-group-item row">
<div class="col-md-6">
<pre>{{item.name}} </pre>
</div>
</div>