blog main image

User Platform in Angular

Going into this project I had little (and I'm talking LITTLE) experience with HTML and CSS. I wanted to gain experience in Javascript and specifically Angular so I didn't fidle much with backend code, although I learned a bit of Node.js.

Although I did do the design of the site, I wouldn't necessarily it was one of my "design porfolio" pieces. I was mainly focused on functionality of adding users, tracking, and displaying their information.

"Shows that I can learn new technologies and skills rapidly. Learned completely new tools and systems with a little in-class instruction, and a whole lot of outside of class experimenting. Loved it. " John D. Storey (me)
Libraries/Technologies include Angular, Firebase, jQuery, completely custom CSS and HTML, here is a little sample:

<!-- TAG BOX-->
  <div class='tagBox'>
    <span>Other Tags </span><i>(click to vote up)</i>: 
    <p ng-repeat="tag in selectedPerson.votes | object2Array | orderBy:'value':true" ng-click='upVote(tag.tagName, selectedPerson, userID)'>
<!-- INPUT TAG -->
    <form ng-submit="tagCreate(tagFromView, selectedPerson, userID)" id='tagCreateForm'>
      <input class='tagName' type='text' name='tagFromView' placeholder='Create new tag' ng-model="tagFromView">
      <button type='submit'class='btn btn-xs tagBtns' id='submitBtnMinimal'>create</button>


$scope.upVote = function (tagName, selectedPerson, userID, $filter) {
    console.log('You clicked for up vote');
    if (userID){
            // tell them they can't vote
            if ( selectedPerson.votes[tagName][userID].type === 1){
                alert('you already voted on this');
            } else {
        } else {
            //create the userId for this tagName
            selectedPerson.lastVote = new Date();
            selectedPerson.votes[tagName][userID] = {type:1};
        //rewards user for engagment
    } else {

Basically I learned alot about how to pass parameters, how to interact with Firebase, and how to manipulate values inside of javascript objects.