This repository has been archived by the owner on Jan 6, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (89 loc) · 4.91 KB
/
index.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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!doctype html>
<html>
<head>
<title>DRF Engineer-in-Residence Coding Challenge</title>
<style>
* {
box-sizing: border-box;
}
body {
font: 14pt "Helvetica Neue", Helvetica, Arial;
line-height: 1.3;
max-width: 40em;
margin: 0 auto;
padding: 20px;
}
form {
display: flex;
}
input {
flex-grow: 1;
margin-right: 10px;
}
input, button, textarea {
font-size: 18pt;
padding: 8px;
margin-bottom: 10px;
border: 1px solid gray;
}
#message-body {
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<h1>DRF Engineer-in-Residence Coding Challenge</h1>
<p>We have a fun coding challenge for you to complete! Unlike most coding challenges you might have encountered, we’ve left this one pretty open-ended, so feel free to show off your creativity and interpret it however you like. Keep it short and simple, and don't feel pressured to spend a lot of time on it.</p>
<h2>Part 1 (required)</h2>
<p>What's the most creative way you can get a circle to appear on the screen of a web browser?</p>
<h2>Part 2 (optional)</h2>
<p>Now extend your demo to be collaborative. How can one user trigger the circle to appear on another user’s browser in some way, and vice versa? You should use our provided server endpoint in your solution by following the instructions below.</p>
<p>We've set up a basic <a href="https://socket.io/" target="_blank">Socket.IO</a> server at this same URL. If you're not familiar with Socket.IO, it's a library for real-time event-based communication, meaning that it lets you easily send messages from one device to another. It comes with a JavaScript client which you can include in your app. Socket.IO communication works using events which you emit to the server and listen for on the client. Each event has a name, which is used to listen for specific types of events, and a body, which is used to include data.</p>
<p>Our server lets you broadcast messages to other devices in the same "room". First, your app needs to join a room by sending a "join" event with a unique key as the body, so that you only get your own broadcasts. Our server will then accept events with the name "message" and then broadcast that event and its body to everything else that's connected.</p>
<p>Below is a demo to show how this works. To try it out, open this page in multiple windows, enter the same key in each "room" box, and click "Join Room" in each window. After you've joined, typing a message and clicking "broadcast" will cause your message to appear in all other windows. Feel free to view the source of this page and copy the code embedded below as a starting point. This demo is also useful for debugging your submission.</p>
<p>Tips:</p>
<p>
<ul>
<li>Remember to "join" using a key unique to you, and use that same key here if you're trying to debug.</li>
<li>You can send seralizable JavaScript objects as the body of the message, not just strings as shown here.</li>
<li>Sending a message before joining a room won't work.</li>
<li>Note how the message you send gets broadcast to other connected devices, but not to yourself.</li>
</ul>
</p>
<form id="join-form" action="">
<input name="room" placeholder="Room Name" />
<button>Join Room</button>
</form>
<textarea disabled id="message-body" placeholder="Last Received Message"></textarea>
<form id="message-form" action="">
<input name="message" placeholder="Message Body" />
<button>Broadcast</button>
</form>
<!-- ----- Demo Code Begins ----- -->
<!-- Load client library from our server -->
<script src="https://drf-eng-app-2019.herokuapp.com/socket.io/socket.io.js"></script>
<script>
// Connect to Socket.IO server
var socket = io('https://drf-eng-app-2019.herokuapp.com/');
document.getElementById('join-form').onsubmit = function () {
// Emit the "join" event to join a room to share messages
socket.emit('join', this.room.value);
return false;
};
document.getElementById('message-form').onsubmit = function () {
// Emit the "message" event to send a new message
socket.emit('message', this.message.value);
return false;
};
// Listen to the "message" event to receive inbound messages
socket.on('message', function (message) {
document.getElementById('message-body').value = message;
});
</script>
<!-- ----- Demo Code Ends ----- -->
<h2>Questions?</h2>
<p>If you encounter any issues with the second half of the challenge, feel free to email <code>vinai</code> [at] <code>dormroomfund.com</code>.</p>
<p><a href="https://github.com/dormroomfund/drf-eng-challenge" target="_blank">View Source on GitHub</a></p>
</body>
</html>