Skip to content

This is the start environment for the Twitter clone project

Notifications You must be signed in to change notification settings

kurtcorbett/twitter-clone

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

PART ONE

  • Fork the repo
  • Get familiar with the html/css
  • Modify the HTML to use HTML5 elements where appropriate (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list)
  • 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

About

This is the start environment for the Twitter clone project

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 94.9%
  • JavaScript 5.1%