A Tribute To Kelley Liljegren

In this example below you will see how to do a A Tribute To Kelley Liljegren with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by clarkhacks, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright clarkhacks ©
  • HTML
  • CSS
  • JavaScript
    <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>
</div>

/*Downloaded from https://www.codeseek.co/clarkhacks/a-tribute-to-kelley-liljegren-xqVmzL */
         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;
}


/*Downloaded from https://www.codeseek.co/clarkhacks/a-tribute-to-kelley-liljegren-xqVmzL */
    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 = "";

    };


}

Comments