forked from llamasoft-dotcom-demo/message-demo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmsg.html
43 lines (38 loc) · 1.84 KB
/
msg.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<title>Message Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="msg.js"></script>
<link href="msg.css" rel="stylesheet">
</head>
<body>
<h1>LLamasoft Message Exercise
</h1>
<div>
<p>
Implement a messaging system to replace the random alert boxes that come up. The messaging system
should meet the following criteria
<ul>
<li>Messages should appear near the top of the page</li>
<li>Messages should fade out after 3 seconds</li>
<li>If a new message appears before the previous message fades out, it should appear below the most recent visible message.</li>
<li>Messages should have a close or delete box to dismiss the message before the fade out</li>
</ul>
</p>
<p>
In addition to the above features, implement other updates you think might be helpful. E.g. Add an indicator
to let the user know that the messages are running in addition to the text change on the button, update the
layout to make the page more readable, etc. Feel free to use
any third party libraries you find helpful. jQuery and underscore are already referenced.
</p>
</div>
<div>
<button type="button" id="msgButton">Start Messages</button>
</div>
<div class="footer">
<span>© LLamasoft 2016</span>
</div>
</body>
</html>