twittler

Question 1

What are the main functions / event-handlers / operations you will need to implement and perform?

Answer 1

1. Refresh/Display Tweets (whether all or individual user’s)
2. Username Event-Handler: click on username –> view that user’s tweets
3. ViewAllTweets Event-Handler: click on ViewAll button –> view all tweets
4. SubmitTweet Event-Handler: click on Submit button –> adds message tweet to array

Question 2

For each tweet - What are we trying to accomplish?

Answer 2

Store the current tweet

var tweet = current_stream[index]

Each individual tweet will have component parts (msg, username, timestamp), each part is worthy of its own DOM node/HTML element…

1. Create the DOM node/HTML element to house the content for each part (along with an identifying class). Store each one in a jQuery object
2. Fill the DOM node/jQuery object with appropriate content using .text()-method
3. Insert the jQuery object into appropriate DOM location using .prependTo() or .appendTo()

Question 3

DOM: What to do for each tweet?

Answer 3

Store in a jQuery variable

var $tweet =

Create appropriate DOM node (to house the entire tweet and its other component parts - tweet, timetsamp, username)

Question 4

What to do w/ the TWEET jQuery object?

Answer 4

Fill it, using the text() method, with the tweet’s message

$tweet.text(tweet.message);

-basically filling the tweet-DIV with the message

Question 5

So have a text-message in a div (have content in the jQuery object)–> What to do with that div?

Answer 5

Insert the tweet-jQuery-object into the main tweet display

$tweet.prependTo($(‘#tweets’));

// content.prependTo(targetContainer)

Question 6

DOM: What to do for the username?

Answer 6

Store in a jQuery variable

var $tweetuser =

Create the appropriate DOM element w/ class to house the username

Question 7

What to do w/ the USERNAME jQuery object?

Answer 7

Fill it with the tweet’s username

$tweetuser.text(tweet.user + “: “);

-basically filling the username-SPAN with the username

Question 8

So have apropriate username text in the $tweetuser object () –> What to do with the object?

Answer 8

Insert into the div that houses the entire tweet

$tweetuser.prependTo($tweet);

// content.prependTo(targetContainer)

Question 9

DOM: What to do for the timestamp?

Answer 9

Store in a variable

$tweetTimestamp =

Create a DOM element w/ a class to house the timestamp

Question 10

What to do w/ the TIMESTAMP jQuery object?

Answer 10

Fill it with the timestamp info

$tweetTimestamp.text(“Tweeted “ + $.timeago(tweet.created_at));

-basically filling the timeStamp-DIV with the timestamp info

Question 11

So have timestamp text in the appropriate DOM node / jQuery object –> What to do with that object?

Answer 11

Insert into (or at the end of) the tweet-object

$tweet_timestamp.appendTo($tweet);

// content.appendTo(targetContainer)

Question 12

How to make each tweet’s username-DOM-element correspond with the actual user who created the tweet?

Answer 12

Take the [tweetuser (DOM element/jQuery object)] and set its #id to the username.

$tweetuser.attr(‘id’, tweet.user);

Question 13

*What do you need the user-EH to do, step by step? Upon clicking the user’s name…

Answer 13

1. Prevent bubbling
2. Return the id of the closest span element, which should be the username.
   
   1. Set to a variable currentUser
3. Use that variable as the property name of the streams.users object. The property will contain an array of that user’s tweets.
   
   1. Set to the already-initiated variable currentStream (which is used by the *initiateTweet *display function)
4. Display the viewAll button
5. Hide the inputBox and submitButton
6. Execute the initiateTweet function to display the tweets (in this case, the user’s tweets only)

Question 14

How to implement the user-EH?

Answer 14

When clicking on [tweetDisplay DIV - particular SPAN-named-class]…

$(“#tweetDisplay”).on(“click”, “.user”, function(event) {

Prevent the screen from bubbling up

event.preventDefault();

Find & store the id of that SPAN - should be the username

var currentUser = $(this).closest(“span”).attr(“id”);

Set the currentStream to be that user’s stream

currentStream = streams.users[currentUser];

Display the viewAll-Button

$(“#viewAll”).css(“display”, “block”);

Hide the inputBox & submitButton

$(“#userTweet, #submitTweet).hide();

Display the stream of tweets (for current user)

initiateTweets();

});

Question 15

What do you need the viewAll-EH to do, step by step? Upon clicking the “View All” Button..

Answer 15

1. Set the currentStream variable back to streams.home
2. Hide the viewAll-button
3. Refresh and display the tweets (now set to all tweets) using initiateTweets
4. Show the inputBox and submitButton

Question 16

How to implement the viewAll-EH?

Answer 16

When the viewAll-button is clicked…

$(“#viewAll”).on(“click”, function() {

set the currentStream (used by display) back to streams.home

currentStream = streams.home;

hide the viewAll-button

$(“#viewAll”).hide();

refresh and display the tweets (will display all tweets now)

initiateTweets();

show the inputBox and submitBox

$(“#userTweet, #submitTweet”).show();

});

Question 17

What do you need to do to implement submitTweet-EH, step by step? Upon clicking the “SubmitTweet” button…

Answer 17

1. Retrieve the message inputted by the user
2. if no msg is inputted –> error msg
3. if yes msg is inputted –> execute the writeTweet function with the msg as an argument and then reset the inputbox to blank

Question 18

How to implement the submitTweet-EH?

Answer 18

Upon clicking the submitTweet button…

$(“submitTweet”).on(“click”, function(event) {

Take the input from the inputBox and store in variable msg

var msg = $(“#userTweet”).val();

if no inputted msg…

if (msg = null || msg = “”) {

provide a warning msg

alert(“Input something foo!”);

return false;

otherwise, if user did input a msg…

} else {

execute writeTweet, with inputted msg as argument

writeTweet(msg.slice(0, 160));

clear the input box

$(“#userTweet”).val(“”);

}

});