Activity Board Step 2

app.js

// ...

io.on('connection', function(socket){
    console.log('a user connected');

    socket.on('disconnect', function(){
        console.log('user disconnected');
    });

    socket.on('add activity', function(activityName){
        console.log('add activity: ' + activityName);
        socket.broadcast.emit('add activity', activityName);
    });
});

//...

index.html

...

<script>
    var socket = io();
    
    socket.on('add activity', function(activityName){
        console.log("add activity: " + activityName);
        addActivity(activityName);
    });
            
    $(document).ready(function() {
        $('.add-activity').on('click', function(e) {
            e.preventDefault();

            $('#addActivity').openModal();
            $('#addActivity .btn-save').on('click', function(e) {
                e.preventDefault();
                var activityName = $('#addActivity-activityName').val();
                socket.emit('add activity', activityName);

                addActivity(activityName);

                $('#addActivity').closeModal();
            });
        });
    });
    
    var addActivity = function (activityName) {
        $('#activity-board .step1').append(activityBox(activityName));
    };

    var activityBox = function (activityName) {
        return $('<div>')
            .addClass('card teal')
            .attr('data-name', activityName)
            .append($('<div>').addClass('card-content')
                .append($('<span>').addClass('card-title').html(activityName))
            )
    };
</script>

...