JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<link rel="stylesheet" href="http://tapmodo.github.io/jsintro/project/chat.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:300,600,600italic,300italic"></script>
<script src="http://tapmodo.github.io/jsintro/js/underscore.js"></script>
<script src="http://jsintro.apps.tapmodo.net/socket.io/socket.io.js"></script>
<div class="canvas">
      <div id="output" class="content"></div>

      <div class="chat_input">
        <form class="input_container">
          <input type="text" id="message" autocomplete="off">
          <button id="send">Send</button>
        </form>
      </div>

      <div class="users">
        <div class="container">
          <h2>Chat Users</h2>
          <p id="userlist">
            not implemented<br>
            yet...
          </p>
        </div>
      </div>

    </div>

    <script type="html/template" id="messageTpl">
      <div class="message">
        <b class="from"><%= from %>:</b>
        <%= message %>
      </div>
    </script>

JavaScript

//Act 11.5 Chat cliieeent

    // Create socket connection
    var socket = io.connect('http://jsintro.apps.tapmodo.net');

    // THIS SECTION HAS BEEN COMPLETED FOR YOU (but read comments)
    // Socket receives a "connect" event when connected
    socket.on("connect",function(){
        // When we are connected, prompt for username
        // use socket.emit() to send it back to the server
        // the event type is "adduser"
        socket.emit("adduser", prompt("What is your name?"));
    });

    $(function(){

        // FILL IN THIS FUNCTION BY FOLLOWING THE STEPS BELOW
        function send_message(){
            // 1. create a variable to store the message text
            // assign the input value entered into #message
            var theMessage = $("#message").val();
            // 2. send the message to the socket.io server
            // use the "sendchat" event, pass message as 2nd arg
            socket.emit("sendchat", theMessage);
            // 3. clear the input value of #messeage (set to "")

            // 4. call .focus() event on #message
            // Now the input is ready for more input!

            // return false, so form does not post
            return false;
        }

        // Call send_message() when button clicked, or form submitted
        $('#send').on('click',send_message);
        $('form').on('submit',send_message);

    });