├── img ├── alagoon.jpg ├── jennyshen.jpg ├── vklimenko.jpg ├── damenleeturks.jpg └── funwatercat.jpg ├── Twitter Clone Example.png ├── README.md ├── css └── styles.css ├── index.html └── js └── jquery-2.0.3.min.js /img/alagoon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevMountain/twitter-clone/HEAD/img/alagoon.jpg -------------------------------------------------------------------------------- /img/jennyshen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevMountain/twitter-clone/HEAD/img/jennyshen.jpg -------------------------------------------------------------------------------- /img/vklimenko.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevMountain/twitter-clone/HEAD/img/vklimenko.jpg -------------------------------------------------------------------------------- /img/damenleeturks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevMountain/twitter-clone/HEAD/img/damenleeturks.jpg -------------------------------------------------------------------------------- /img/funwatercat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevMountain/twitter-clone/HEAD/img/funwatercat.jpg -------------------------------------------------------------------------------- /Twitter Clone Example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevMountain/twitter-clone/HEAD/Twitter Clone Example.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | Twitter Clone 4 | ============= 5 | 6 | ##Objective 7 | Use jQuery to create a "clone" that mimicks how the Twitter web application functions 8 | 9 | Use this repo as the starting point for the Twitter clone project: 10 | 11 | ![alt text](https://github.com/DevMountain/twitter-clone/blob/master/Twitter%20Clone%20Example.png?raw=true,"Twitter Clone Example") 12 | 13 | ## Part One 14 | * Fork the repo 15 | * Get familiar with the html/css 16 | * Right before your closing body tag, link to your jQuery found in the js folder. 17 | * Create a animations.js file and then link to it right before your the closing body tag 18 | * Use jQuery to add the following features: 19 | * Initially, the Tweet button and the character count button should be hidden (CSS). 20 | * When the user clicks on the textarea, the textarea should double in size and the character count and Tweet buttons should be revealed. 21 | * As the user types, the character count should decrease. 22 | * When there are 10 or less characters, the character counter should turn red. 23 | * If the user puts in more than 140 characters, the tweet button should be disabled (and re-enabled when there are <= 140 chars). 24 | * When the user successfully inputs characters and clicks the “Tweet” button, a new tweet should be created and added to the tweet stream in the main column, using the user’s fake profile image in the top left and username/fullname. 25 | 26 | ## Part Two 27 | * The tweet actions (Reply, Retweet, etc) should only show up when you hover over that individual tweet. Otherwise, they should be hidden. 28 | * 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 29 | 30 | ## Black Diamond 31 | * Make timestamps similar to how they look on Twitter (1h, 18m, 1m) and use the jQuery "timeago" plugin to make them automatic. 32 | * Implement the icons for when a tweet is favorited/retweeted in the upper right of the tweet. 33 | - Clicking favorite should increase the favorite count. 34 | - Clicking retweet should increase the retweet count and take the text of the tweet and retweet it. 35 | * Implement the Bootstrap tooltips for when you hover over a user’s avatar image 36 | * Persist new tweets using local storage 37 | * Persist new tweets using a service like firebase https://firebase.google.com/ 38 | 39 | 40 | ### Here's a list of the jQuery 'Need to Knows' 41 | 42 | Window Ready Event 43 | 44 | * `$(function () {});` 45 | * also `$(document).ready(function(){});` 46 | 47 | Selectors 48 | 49 | * `$(".some-class") // select by classname` 50 | * `$(this) // the element which created the event` 51 | * `$('.some-class').find('.some-child-class');` 52 | * `$('.some-class').closest('.some-parent-class');` 53 | * See also 54 | 55 | Events 56 | 57 | * `$('body').on('someEvent', '.some-class', function() {});` 58 | * 59 | * 60 | * click 61 | * keyup 62 | * change 63 | * load 64 | * error 65 | 66 | Create Element 67 | 68 | * Be cautious 69 | * `var $myNewElement = $('Tyler McGinnis')` 70 | * `$('.some-class').html('Tyler McGinnis')` 71 | 72 | Manipulate Elements 73 | 74 | * `$('.some-class').text("my