Untitled

<html lang="en"><head>
    <title>Passion Fruit Jam</title>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <!--The above library(/socket.io/socket.io.js) will be generated by socket.io module of server -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <link rel="stylesheet" media="screen" href="https://ajwebcdn1.akamaized.net/assets/2.0/main-91475b0eba3490d3394bacd04d3653ef8822d80feb78bad48e45d3c2c840cd4d.css" />

    <link rel="icon" type="image/png" sizes="96x96" href="https://i.imgur.com/eUiPsfq.png">

</head>
<style>
    body
    {background: url(https://i.imgur.com/txii070.jpg); no-repeat fixed top center;  background-size: 1920px 1000px; }

</style>

<form>
    <div id="wrapper">


        <input type="text" id="message" placeholder="Enter desired string" style="
    border-left-width: 0px;
    padding-bottom: 140px;
    margin-left: 820px;
    position: absolute;
    left: 0;
    top: 135px;
    background: #fcf7de;
    border: #83583f 2px solid;
    border-radius: 16px;
    padding: 8px 0 120px 10px;
    box-shadow: inset 0px 3px 2px 0px rgba(50,50,50,0.25);
    box-sizing: border-box;
    width: 195px;


"> <!--text form to send data to the server-->
        <input id="submit" type="button" value="Send data to Client" style="
    padding-bottom: 5px;
    margin-left: 827px;
    position: absolute;
    left: 0;
    top: 300px;

    display: inline-block;
    color: #086600;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    background-color: #70DB43;
    background-image: linear-gradient(0deg, #86fd64 0%, #56b021 53.4%, #78c04d 53.5%, #d4ebc6 98%);
        cursor: pointer;
    font-family: Tiki-Island;
    font-weight: normal;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 1px;
    height: 40px;
    border-radius: 82px;


"><input type="text" id="message" placeholder="Enter desired string" style="


    border-left-width: 0px;
    padding-bottom: 140px;
    margin-left: 1225px;
    position: absolute;
    left: 0;
    top: 135px;
    background: #fcf7de;
    border: #83583f 2px solid;
    border-radius: 16px;
    padding: 8px 0 120px 10px;
    box-shadow: inset 0px 3px 2px 0px rgba(50,50,50,0.25);
    box-sizing: border-box;
    width: 195px;

"><input id="submitting" type="button" value="Send data to Server" style="
padding-bottom: 5px;
    margin-left: 1230px;
    position: absolute;
    left: 0;
    top: 300px;

     display: inline-block;
    color: #086600;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    background-color: #70DB43;
    background-image: linear-gradient(0deg, #86fd64 0%, #56b021 53.4%, #78c04d 53.5%, #d4ebc6 98%);
        cursor: pointer;
    font-family: Tiki-Island;
    font-weight: normal;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 1px;
    height: 40px;
    border-radius: 82px;

    "><input type="text" id="message1" placeholder="Text to match" style="


     border-left-width: 0px;
    padding-bottom: 140px;
    margin-left: 1635px;
    position: absolute;
    left: 0;
    top: 150px;

    background: #fcf7de;
    border: #83583f 2px solid;
    border-radius: 72px;
    padding: 8px 0 25px 10px;
    box-shadow: inset 0px 3px 2px 0px rgba(50,50,50,0.25);
    box-sizing: border-box;
    width: 195px;

    "><input type="text" id="message" placeholder="Replace with" style="


    border-left-width: 0px;
    padding-bottom: 140px;
    margin-left: 1635px;
    position: absolute;
    left: 0;
    top: 215px;

    background: #fcf7de;
    border: #83583f 2px solid;
    border-radius: 72px;
    padding: 8px 0 25px 10px;
    box-shadow: inset 0px 3px 2px 0px rgba(50,50,50,0.25);
    box-sizing: border-box;
    width: 195px;

    "><input id="submit" type="button" value="Set" style="
 padding-bottom: 50px;
    margin-left: 1705px;
    position: absolute;
    left: 0;
    top: 290px;

     display: inline-block;
    color: #086600;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    background-color: #70DB43;
    background-image: linear-gradient(0deg, #86fd64 0%, #56b021 53.4%, #78c04d 53.5%, #d4ebc6 98%);
        cursor: pointer;
    font-family: Tiki-Island;
    font-weight: normal;
    font-size: 40px;
    line-height: 45px;
    letter-spacing: 1px;
    height: 40px;
    border-radius: 82px;


">
        <div id="content" style=" width:721px; height: 376px; overflow-y: auto;"><p></p>
            <style>

            </style>
        </div><!--This is where the data from the server is added-->


    </div>

</form>

<script type="text/javascript">
    var socket = io.connect("/");
    /*Initializing the connection with the server via websockets */
    socket.on("message",function(message){
        /*
            When server sends data to the client it will trigger "message" event on the client side , by
            using socket.on("message") , one cna listen for the ,message event and associate a callback to
            be executed . The Callback function gets the dat sent from the server
        */
        console.log("Message from the server arrived")
        console.log(message); /*converting the data into JS object */
        $('#content').append('<div >'+message.data+'</div>'); /*appending the data on the page using Jquery */
    });
    $(function(){
        $('#submit').click(function(){ /*listening to the button click using Jquery listener*/
            var data = { /*creating a Js ojbect to be sent to the server*/
                message:$('#message').val(), /*getting the text input data      */
            }
            console.log("Sending");
            console.log(data);
            socket.send(JSON.stringify(data));
            /*Data can be sent to server very easily by using socket.send() method
            The data has to be changed to a JSON before sending
                                  it (JSON.stringify() does this job )*/
            /* This triggers a message event on the server side
            and the event handler obtains the data sent */
            $('#message').val('');
            //Emptying the text box value using jquery
        });
        $(function() {
            $('#submit').click(function () { /*listening to the button click using Jquery listener*/
                var data = {
                    /*creating a Js ojbect to be sent to the server*/
                    message: $('#message').val(), /*getting the text input data      */
                }
                console.log("Sending");
                console.log(data);
                socket.send(JSON.stringify(data));
                /*Data can be sent to server very easily by using socket.send() method
                The data has to be changed to a JSON before sending
                                      it (JSON.stringify() does this job )*/
                /* This triggers a message event on the server side
                and the event handler obtains the data sent */
                $('#message').val('');
                //Emptying the text box value using jquery
            });
        });


        $(function() {
            $('#submitting').click(function () { /*listening to the button click using Jquery listener*/
                var data = {
                    /*creating a Js ojbect to be sent to the server*/
                    messagee: $('#message1').val(), /*getting the text input data      */
                }
                console.log("Sending");
                console.log(data);
                socket.send(JSON.stringify(data));
                /*Data can be sent to server very easily by using socket.send() method
                The data has to be changed to a JSON before sending
                                      it (JSON.stringify() does this job )*/
                /* This triggers a message event on the server side
                and the event handler obtains the data sent */
                $('#message1').val('');
                //Emptying the text box value using jquery
            });
        });


    });
</script>