One Problem. Please Help

Recreate functionality to post a tweet. Using HTML and JavaScript . Mockup provided at the end of instuction.

Create a website in HTML, JavaScript or JQuery where a user can write a tweet and see it appear below in a list of their own tweets.

This is similar to the functionality of twitter described in class regarding execution and evaluation. Dont replicate the Twitter design, just the basic functionality of writing and posting a tweet with a max of 30 characters and providing feedback to help users evaluate the goal of posting a tweet and the subgoal of writing a tweet that is within the max number of characters.

The following is the functionality you need to replicate:

0. There needs to be a place to write the tweet and a button to press to post the tweet.

1. There needs to be a number that shows how many characters the user has remaining (call it characters_remaining). The max length can be hard coded in JavaScript (but not in HTML).

2. user writes their tweet text, the following must happen:

   1. The characters_remaining number must change to reflect the current number of characters left.

   2. If the user exceeds the number of characters, a negative number must be shown for characters_remaining.

   3. Negative characters_remaining numbers must be red and bold

   4. Non-negative characters_remaining must be light grey and normal font weight.

   5. If the number of characters_remaining is negative, the post tweet button must not be clickable (disabled).

   6. If the user presses enter the post tweet action is taken.

3. When the user presses the post tweet button the following things must happen:

   1. The post must appear with the posters username. The username can be hard coded in JavaScript (but not in HTML).

   2. New posts must appear at the top of the list of posts, so that users see the latest tweets at the top of the list.

   3. The text in the text input element must disappear.

   4. The number that counts the number of characters remaining must return to

      the maximum number.

   5. The cursor must return to the box where the user writes tweets (so that

      they can immediately start writing another tweet!)

   6. If there is no text in the text input element, or all the text is blank space, do

      not post the tweet.

Obviously, posting a tweet will only work on your computer. Youre not putting it on a server to broadcast it to the world at least not just yet :-)

For this problem you only need to turn in your code, there is no write up. Use a single HTML file with the following link to include jQuery:

You do not need bootstrap, but if you want to use it, please use the same link from previous assignments.

This assignment is about functionality and not design. As long as we can see and read all the elements and they have appropriate sizes and positions, the design is fine. Below is a screenshot of a reference solution. You do not need to copy it, it is only here to convey that having very basic design is fine.

Mock up:

When the tweet is post-able:

When the tweet is NOT post-able: (the text continues past where you can read it)