- Handling click and submit events
- Event delegation and propagation
- .preventDefault()
- HTML forms
-
When someone clicks on the
X
button it "closes" the messenger by removing it from the DOM -
When the
<span>
forFile
is clicked aconsole.log
happens that reads:Hello world
-
When the
<span>
forProfile
is hovered over aconsole.log
appears that reads:Welcome current user! We value your patronage!
-
When the
<span>
forHelp
is clicked analert
appears that reads:Clippy is unavailable right now
-
BONUS: When the
<span>
forHelp
is clicked, instead of the above a message appears in the messages area that readsHi! I am clippy your office assistant. Would you like some assistance today?
-
When the
message-form
is submitted add a new<p>
to themessages
div with whatever was typed into the input -
BONUS: The new
<p>
for the message is prepended with a<span>
that includes the timestamp and the class nameblue-text
-
SUPER BONUS: When a
<p>
message is clicked, remove the message from the DOM