A Tribute To Kelley Liljegren

a-tribute-to-kelley-liljegren.markdown

A Tribute To Kelley Liljegren

A Pen by Clark Weckmann on CodePen.

License.

index.html

<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>

script.js

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 = "";

    }


}

scripts

<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>

style.css

     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;
}

styles

<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" />