https://github.com/danseethaler/twitter-clone

https://github.com/danseethaler/twitter-clone

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/danseethaler/twitter-clone
• Owner: danseethaler
• Created: 2015-07-23T01:41:09.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-07-23T02:23:10.000Z (over 9 years ago)
• Last Synced: 2023-02-28T20:52:15.307Z (almost 2 years ago)
• Language: HTML
• Size: 195 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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

## PART ONE ##

* Fork the repo

* Get familiar with the html/css

* Right before your closing body tag, link to your jQuery found in the js folder.

* Create a animations.js file and then link to it right before your the closing body tag

* Use jQuery to add the following features:

  * Initially, the Tweet button and the character count button should be hidden (CSS).

  * When the user clicks on the textarea, the textarea should double in size and the character count and Tweet buttons should be revealed.

  * As the user types, the character count should decrease.

  * When there are 10 or less characters, the character counter should turn red.

  * If the user puts in more than 140 characters, the tweet button should be disabled (and re-enabled when there are <= 140 chars).

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

## PART TWO ##

* The tweet actions (Reply, Retweet, etc) should only show up when you hover over that individual tweet. Otherwise, they should be hidden.

* 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

### ADVANCED: (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.

* 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 parse https://parse.com/

### Here's a list of (in my opinion) the jQuery 'Need to Knows'

* $(document).ready(function(){});

* $(“element”)

* $(‘‘idOrClass”)

* $(“idOrClass, idOrClass”)

*  var myNameEle = $(‘\Tyler McGinnis \’)

* $(‘idOrClass’).prepend(myNameEle);

* $(‘idOrClass’).append(myNameEle) / myNameEle.$appendTo($(‘idOrClass’))

* $(‘idOrClass’).remove();

* $(‘idOrClass’).on(‘\’, function(){}); http://api.jquery.com/category/events/

* $(this)

* $(‘idOrClass’).val() //input, textarea, select

* $(‘idOrClass’).html()

* $('idOrClass').css()

* $(‘idOrClass’).text()

* $(‘idOrClass’).find()

* $(‘idOrClass’).show() // .hide();

* $(this).toggleClass(‘className’);