daanishnasir / twitter-clone

This is the start environment for the Twitter clone project

Twitter Clone

##Objective Use jQuery to create a "clone" that mimicks how the Twitter web application functions

Use this repo as the starting point for the Twitter clone project:

![alt text](https://github.com/DevMountain/twitter-clone/blob/master/Twitter%20Clone%20Example.png?raw=true,"Twitter Clone Example")

Part One

Part Two

• The Retweets/timestamp/Reply areas should also be hidden by default. These should only expand if you click on the tweet. Have the students use a jQuery animation to accomplish the reveal, similar to how it’s done on Twitter.com

Black Diamond

• Make timestamps similar to how they look on Twitter (1h, 18m, 1m) and use the jQuery "timeago" plugin to make them automatic.
• Implement the icons for when a tweet is favorited/retweeted in the upper right of the tweet.

• Clicking favorite should increase the favorite count.
• Clicking retweet should increase the retweet count and take the text of the tweet and retweet it.

• Implement the Bootstrap tooltips for when you hover over a user’s avatar image
• Persist new tweets using local storage
• Persist new tweets using a service like firebase https://firebase.google.com/

Here's a list of the jQuery 'Need to Knows'

Window Ready Event

• $(function () {});
  • also $(document).ready(function(){});

Selectors

• $(".some-class") // select by classname
• $(this) // the element which created the event
• $('.some-class').find('.some-child-class');
• $('.some-class').closest('.some-parent-class');
• See also http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Events

• $('body').on('someEvent', '.some-class', function() {});
  • http://api.jquery.com/category/events/
  • https://en.wikipedia.org/wiki/DOM_events#Common.2FW3C_events
  • click
  • keyup
  • change
  • load
  • error

Create Element

• Be cautious https://www.box.com/blog/securing-jquery-against-unintended-xss/
• var $myNewElement = $('<span>Tyler McGinnis</span>')
• $('.some-class').html('<span>Tyler McGinnis</span>')

Manipulate Elements

• $('.some-class').text("my <script>-safe text");
• $('.some-class').val(); //input, textarea, select
• $('.some-class').prop('checked'); // checkbox
• $('.some-class').show();
• $('.some-class').hide();
• $('.some-class').prepend($myNewElement);
• $('.some-class').append($myNewElement);
  • also $myNewElement.appendTo($('.some-class'));
• $('.some-class').remove();;
• $(this).addClass('.style-class');
• $(this).removeClass('.style-class');
• $(this).toggleClass('.style-class');
• $('.some-class').css({}); // misnomer, actually changes 'style' attribute

Contributions

If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.

Copyright

© DevMountain LLC, 2015. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.