</div>
<div class="form-row small right">
- <button id="safety" type="button">Safety prompt</button>
+ <button id="safety" class="right" type="button">Safety prompt</button>
<script>
const prompt = document.querySelector("#prompt");
const safety= document.querySelector("#safety");
</div>
<div class="form-row large">
- <button type="submit">Make the infinite possible</button>
+ <button id="generate" type="submit">Make the infinite possible</button>
</div>
</form>
</p>
+ <ul id="comments">
+ </ul>
+
+ <p>
+ <form action="" id="comment-form">
+ <input id="comment" type="text" style="width:100%" autocomplete="off" placeholder="Add a comment" />
+ </form>
+ </p>
+
<div align="center">
<div class="animate-flicker">
<p>
</button>
</div>
+
+ <script src="/socket.io/socket.io.js"></script>
+ <script>
+ var socket = io();
+
+ var comments = document.querySelector("#comments");
+ var form = document.querySelector("#comment-form");
+ var comment = document.querySelector("#comment");
+
+ form.addEventListener('submit', function(e) {
+ e.preventDefault();
+ if (comment.value) {
+ socket.emit('comment', comment.value);
+ comment.value = '';
+ }
+ });
+
+ socket.on('comment', function(msg) {
+ var item = document.createElement('li');
+ item.textContent = msg;
+ comments.appendChild(item);
+ });
+ </script>
</body>
</html>